CODEWITHSUNDEEP
asp.net-mvc-3kendo-ui
Mr.Bobo Haha
Mr.Bobo Haha

Reputation: 141

issue on kendodropdownlist showing undefine word

im having a issue on my kendodropdownlist... whenever i add a optionlabel on it, it always shows undefine fields.. how can i get rid of the undefined on my dropdown list... functionalities of the dropdown is good just the word "undefine" really bugging me out.

here's my code:

<input id="ddlWorker" name="ddlWorker" class:"validate[required] inputLong" style="width: 400px;" value="@workerPosId"  />

$("#ddlWorker").kendoDropDownList({
            dataTextField: "workerName",
            dataValueField: "workerID",
            autoBind: false,

            optionLabel: {
                workerName: "-- Select An Option --",
                workerID: ""

    },
            // define custom template
            template:
                                      '<h5>${ data.workerName }</h5>' +
            //                                      '<p>${ data.workerID }</p>' +
                                      '<p>${ data.AvailableDay_LookID }</p>' +
                                      '<p>${ data.StartTime } - ${ data.EndTime }</p>',

            dataSource: {
                transport: {
                    read: {
                        url: '/Client/LoadWorkerDropdownList?clientCusPosShiftId=' + clientCusPosShiftId,
                        dataType: "json",
                        type: "POST"
                    }
                }
            }

        });

        var dropdownlist = $("#ddlWorker").data("kendoDropDownList");

thanks

Upvotes: 0

Views: 477

Answers (1)

CodingWithSpike
CodingWithSpike

Reputation: 43698

That is because it feeds your optionLabel object:

{
    workerName: "-- Select An Option --",
    workerID: ""

}

into your template:

'<h5>${ data.workerName }</h5>' +
'<p>${ data.AvailableDay_LookID }</p>' +
'<p>${ data.StartTime } - ${ data.EndTime }</p>'

so it is trying to print the AvailableDay_LookID, StartTime, and EndTime data which are undefined on your object.

You would want to skip those fields if they do not exist. Try the template:

'<h5>${ data.workerName }</h5>' +
'#if(data.AvailableDay_LookID) {#<p>${ data.AvailableDay_LookID }</p>#}#' +
'#if(data.StartTime && data.EndTime) {#<p>${ data.StartTime } - ${ data.EndTime }</p>#}#'

Upvotes: 1

Related Questions