Kendo UI Dropdownlist with template set selected value doesnt work

[don]

I am trying to use a Kendo Dropdownlist that uses a template.  I have a page where a user can select a dataset and that dataset with populate dropdowns with values.  Most of my dropdowns do not use templates however the one that isnt working properly is using templates.

My template:

<script type="text/x-kendo-tmpl" id="dropdownTemplate">
<div>
<p><strong>#= Name #</strong></p>
<p>#= Description #</p>
</div>
</script>

My dropdown definition:

$("#listTemplates").kendoDropDownList({
dataTextField: "Name",
dataValueField: "ChartTemplateId",
template: kendo.template($("#dropdownTemplate").html()),
change: listTemplatesChange
});

How I am populating my dropdown:
portalTemplatesModel = [
[{
Name: "Test",
Description: "Long Description",
ChartTemplateId: "1"
}],
[{
Name: "Test2",
Description: "Long Description2",
ChartTemplateId: "2"
}]
]
 for (i = 0; i < portalTemplatesModel.length; i++) {
debugger;
$("#listTemplates").data("kendoDropDownList").dataSource.add(portalTemplatesModel[i]);
}

My setter:

var ddTemplates = $("#listTemplates").data("kendoDropDownList");
ddTemplates.select(function (dataItem) {
debugger;
return dataItem.value === placeHolderChart.ChartTemplateId;
});

dataItem looks like the following:
[{
Name: "Test",
Description: "Long Description",
ChartTemplateId: "1"
}]

I noticed in the setter documentation you are supposed to use either value or item.  However, with the dataset that I am using it seems to use a different object that does not contain value or text like the other dropdowns that dont use templates have.

Thank you in advance!

[Alexander Valchev]

Hello Don,

The add method accepts object while you are trying to pass an array. The portalTemplatesModel data format is not compatible with the DataSource as it represents array of arrays:

portalTemplatesModel = [
    [{
        Name: "Test",
        Description: "Long Description",
        ChartTemplateId: "1"
    }],
    [{
        Name: "Test2",
        Description: "Long Description2",
        ChartTemplateId: "2"
    }]
]

Please transform the data into array of objects:

portalTemplatesModel = [
    {
        Name: "Test",
        Description: "Long Description",
        ChartTemplateId: "1"
    },
    {
        Name: "Test2",
        Description: "Long Description2",
        ChartTemplateId: "2"
    }
]

After that you can pass it directly to the DataSource via data method.

$("#listTemplates").data("kendoDropDownList").dataSource.data(portalTemplatesModel);

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[don]

I changed the way I am adding my data to the following:

$("#listTemplates").data("kendoDropDownList").dataSource.data(JSON.stringify(portalTemplatesModel));

However, now i am receiving an error when Kendo is trying to do the htmlEncode.  I get the following error message:
0x800a1391 - Microsoft JScript runtime error: 'Name' is undefined

I am getting the data from the server and populating the view model which is defined as the following:
var portalTemplatesModel = kendo.observable({
ChartTemplateId: "",
Name: "",
Description: "",
Theme: "",
ChartType: "",
DataType: "",
DimensionType: "",
CreatedBy: "",
CreatedOn: "",
ModifiedBy: "",
PortalId: "",
ModifiedOn: ""
});

[Alexander Valchev]

Hi Don,

Changing the way data is added is not enough, you also need to change the data format. As I explained in my previous post, the original data format is not compatible with Kendo UI DataSource. portalTemplatesModel should be array of objects.

portalTemplatesModel = [
    {
        Name: "Test",
        Description: "Long Description",
        ChartTemplateId: "1"
    },
    {
        Name: "Test2",
        Description: "Long Description2",
        ChartTemplateId: "2"
    }
]

In your last implementation, the portalTemplatesModel is observable objects, not array. DataSource works with arrays.

Kind regards,
Alexander Valchev
the Telerik team