Kendo DropDownlist template selected value without using index - php

Question

I have a kendo DropDownList template in which I want to select a specific record by id without using index.
What I want is to select a record with CustomerID
following is my code
$(document).ready(function() {
$("#shopSupplier").kendoDropDownList({
change:shopSupplierSelect,
dataTextField: "ContactName",
dataValueField: "CustomerID",
valueTemplate: 'template',
template: 'template',
dataSource: {
transport: {
read: {
dataType: "json",
cache:false,
url: "<?=base_url()?>/controller/method",
}
}
}
//,index:1 /// **I dont want this**
});
var dropdownlist = $("#shopSupplier").data("kendoDropDownList");
});

Answer 1

If you want to use the id instead of the index you should use:
var dropdownlist = $("#shopSupplier").data("kendoDropDownList");
dropdownlist.select(function(dataItem) {
return dataItem.CustomerID === 4; // Replace it by the ID of the customer
});
making it generic:
var dropdownlist = $("#shopSupplier").data("kendoDropDownList");
function selectByID(id) {
dropdownlist.select(function(dataItem) {
return dataItem.CustomerID === id;
});
}
selectByID(2);
Working example:
$(document).ready(function() {
function shopSupplierSelect() {
alert ("select");
}
$("#shopSupplier").kendoDropDownList({
change:shopSupplierSelect,
dataTextField: "ContactName",
dataValueField: "CustomerID",
valueTemplate: kendo.template($("#template").html()),
template: kendo.template($("#template").html()),
dataSource: {
transport: {
read: function(op) {
var data = [
{ CustomerID: 1, ContactName: "John" },
{ CustomerID: 3, ContactName: "Jack" },
{ CustomerID: 5, ContactName: "Joseph" },
{ CustomerID: 6, ContactName: "Jill" },
{ CustomerID: 2, ContactName: "Jeff" },
{ CustomerID: 4, ContactName: "Jane" }
];
op.success(data);
}
}
}
//,index:1 /// **I dont want this**
});
var dropdownlist = $("#shopSupplier").data("kendoDropDownList");
function selectByID(id) {
dropdownlist.select(function(dataItem) {
return dataItem.CustomerID === id;
});
}
selectByID(2);
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<input id="shopSupplier" />
<script id="template" type="text/kendo-templ">
<div><b>#= CustomerID # </b> #: ContactName #</div>
</script>

Answer 2

Kendo UI DropDownList has select method to select specific item. Take a look at this link here
<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id"
});
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
// selects item if its text is equal to "test" using predicate function
dropdownlist.select(function(dataItem) {
return dataItem.CustomerID == 12345;
});
</script>