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


<input id="ProductList" data-bind="value: ProductID" style="width: 205px"/>
<script type="text/kendo" id="popupTemplate">
@Html.Partial("_TenantPopup", new dtoBaseTenant())
</script>
$("#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: " ", 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
});
var editor = $("div.k-widget.k-window").last();
// ddl is undefined here??
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

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