This is a migrated thread and some comments may be shown as answers.

Why is dropDownList undefined

6 Answers 2133 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 10 Jan 2013, 01:36 AM

            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??

 

6 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 10 Jan 2013, 07:58 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
answered on 10 Jan 2013, 06:14 PM
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.
 
0
Robert
Top achievements
Rank 1
answered on 12 Jan 2013, 01:43 AM
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??

0
Alexander Valchev
Telerik team
answered on 14 Jan 2013, 12:04 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
answered on 14 Jan 2013, 08:05 PM
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"/>

0
Alexander Valchev
Telerik team
answered on 16 Jan 2013, 12:34 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
DropDownList
Asked by
Robert
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Robert
Top achievements
Rank 1
Share this question
or