Why is dropDownList undefined

[Robert]

            var dropdownDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "Tenant/ProductList",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        type: "post"
                    }
                },
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: { editable: false, nullable: true },
                            ProductName: { editable: false }
                        }
                    }
                }
            });

            var dropDownList = $("#ProductList").kendoDropDownList({
                optionLabel: "Select product...",
                name: "ProductID",
                dataTextField: "ProductName",
                dataValueField: "ProductID",
                dataSource: dropdownDataSource
            }).data("kendoDropDownList");

At this point dropDownList = undefined??

 

[Alexander Valchev]

Hello Robert,

Most probably the problem is caused by a wrong selector. Please verify that $("#ProductList") returns the correct element.

Kind regards,
Alexander Valchev
the Telerik team

[Robert]

What exactly is the correct element? This element is in a popup edit window and the drop down list is created successfully on the popup window. If the list is created successfully how come .data("kendoDropDownList") of that element is undefined. It would help if you had some real world examples of a drop down list in an edit popup bound to remote data.
 

[Robert]

Here's the View definition for ProductList:
<input id="ProductList" data-bind="value: ProductID" style="width: 205px"/>

This is loaded as a grid popup template:
<script type="text/kendo" id="popupTemplate">
    @Html.Partial("_TenantPopup", new dtoBaseTenant())
</script>

Javascript grid setup:
    $("#gridTenant").kendoGrid({
        dataSource: gridDataSource,
        height: 500,
        pageable: true,
        toolbar: [{ name: "create", text: "Add Tenant" } ],
        columns: [
            { field: "SageCustomerNumber", title: "Sage Customer Number", width: 170, attributes: { style: "white-space: nowrap" } },
            { field: "CustomerName", title: "Customer", width: 150, attributes: { style: "white-space: nowrap" } },
            { field: "InvitationEmail", title: "EMail", width: 200, template: "<a href=\"mailto:#=InvitationEmail#\">#=InvitationEmail#</a>", attributes: { style: "white-space: nowrap" }},
            //{ field: "ProductID", title: "Product", width: 170, template: "#=displayProductName(ProductID)#", attributes: { style: "white-space: nowrap" }},
            { field: "ProductName", title: "Product", width: 170, attributes: { style: "white-space: nowrap" }},
            { field: "BillingAccountNumber", title: "Billing Account Number", width: 170, attributes: { style: "white-space: nowrap" } },
            { command: ["edit", "destroy", { text: "Invite", click: sendEMailWithSendGrid }], title: "&nbsp;", width: 280 }
        ],
        editable: {
            mode: "popup",
            template: $("#popupTemplate").html(),
            confirmation: "Are you sure you want to remove this tenant?"
        },
        edit: function (e) { return PopupSetup(e); },
        save: function (e) { return PopupSave(e); },
        filterable: true,
        sortable: true,
        selectable: "row single",
        scrollable: true,
        columnMenu: true
    });

How do you properly get this dropdownlist element? I've tried:
    var editor = $("div.k-widget.k-window").last();

    var ddl = editor.find("#ProductList").data("kendoDropDownList");
    // ddl is undefined here??

[Alexander Valchev]

Hello Robert,

Your last code snippet does not explain when and how do you initialize a DropDownList from the #ProductList element. The recommended approach is via data-attributes in the mark-up of the template or via JavaScript at the edit event of the Grid. Please try the following:

edit: function (e) {
    var editor = e.container,
        dropDownList = editor.find("#ProductList").kendoDropDownList({
            optionLabel: "Select product...",
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            dataSource: { ..... }
        }).data("kendoDropDownList");
    console.log(dropDownList);
},

In addition, the DropDownList does not have a "name" configuration property. Please do not define it.

Regards,
Alexander Valchev
the Telerik team

[Robert]

Alexander, when I removed the name configuration property the dropDownList is in fact defined. However, when the user clicks Update on the popup the value property of the drop down does not populate in the pages model, i.e. model.ProductID contains Guid.Empty not the value associated with the option chosen from the drop down list. How do I get the selected value of the drop down into model.ProductID?

I thought specifying data-bind="value: ProductID" in the HTML would do this:
<input id="ProductList" data-bind="value: ProductID" style="width: 205px"/>

[Alexander Valchev]

Hello Robert,

Yes when the editor input is bound to a field from the model the update should be performed automatically. Here is an example.
In this forum thread you can find runnable sample that demonstrates working editing with pop-up template. Please compare your implementation with the one presented in the examples. If this does not help, it would be best if you could send me a runnable example that isolates the issue so I can examine it and see what is going wrong.

Regards,
Alexander Valchev
the Telerik team