Dropdownlist
DataSource
$("#txtReinsurerDecision").data("kendoDropDownList")
.dataSource.data()
Change
Fired when the value of the widget is changed by the user.
Cascading widget will trigger change event
when its value is changed due to parent update.
$("#dropdownlist").kendoDropDownList({
dataSource: [ "Apples", "Oranges" ],
change: function(e) {
// this is
var value = this.value();
// Use the value of the widget
}
});
DataBound
// Set the value of a dropdownlist after reading external data
$("#txtRiders").kendoMultiSelect({
dataTextField: "...",
dataValueField: "...",
optionLabel: ' ',
dataSource: {
// skip for simplify ...
},
dataBound: function () {
if (current_fac_application.rider != null) {
var rider = current_fac_application.rider.split(',');
// set the value of the widget
this.value(rider);
}
else {
// leave the selection as empty
this.value([]);
}
}
});
/* Set initial Value
The DropDownList widget with autoBind: false will perform Ajax
request when the one call value() method.
Check the latest official release of Kendo UI.
*/
$("#titles").kendoDropDownList({
dataTextField: "Name",
dataValueField: "Id",
autoBind: false,
dataSource: {
type: "odata",
serverFiltering: true,
filter: [{
field: "Name",
operator: "contains",
value: "Star Wars"
},{
field: "BoxArt.SmallUrl",
operator: "neq",
value: null
}],
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
}
});
$("#titles").data('kendoDropDownList').value("ApOCQ");
setDataSource
/*
Set the dataSource of an exisiting DropDownList and rebind it
*/
var reinsurer_life_decision_key_items = [];
for (var i in data.decisionDetailItems) {
reinsurer_life_decision_key_items.push({
"life_decision_key": data.decisionDetailItems[i].decisionHistoryKey
});
}
$('#reinsurer_life_decision_key').data("kendoDropDownList")
.setDataSource(new kendo.data.DataSource({
data: reinsurer_life_decision_key_items
}));
/* select the item by index */
setTimeout(function() {
$('#reinsurer_life_decision_key')
.data("kendoDropDownList").select(1);
}, 100);
select()
/*
If the widget is not bound (e.g. autoBind is set to false),
the select method will not pre-fetch the data before continuing with
the selection and value setting (unlike the value method),
and no item will be selected.
The numeric argument indicates the item index in the dropdown,
not in the dataSource. If an optionLabel is used,
the dropdown item index can be obtained by incrementing the
respective dataSource item index by 1.
*/
/*
make sure to set autoBind to true if you want to select the value
and the dataSource is set dynamically
*/
Cascading
- A nice feature, it avoids using onChange or other events.
- There have two ways to deal with cascading dropdown list, one is client-side filtering, the other is server-side filtering.
Client-Side Filtering
- Since the datasource in the dropdown list cannot be changed after initliazation, a common approach is to use filter to select the items from child collection.
- It requires the ViewModel for both parent and child cotains same property.
- In the example below, the child control (plancodeversion) contains a property (ReinsurerId) which will be used to filter the items in the child controls
// parent control
$("#txtReinsurer").kendoDropDownList({
dataTextField: "reinsurerName",
dataValueField: "reinsurerId",
optionLabel: " ",
change: loadReinsurerInfo,
dataBound: loadReinsurerInfo,
dataSource: {
transport: {
read: {
dataType: "json",
url: "../../Api/Reinsurer/GetReinsuers"
}
}
}
});
// child control
$("#txtPlanCodeVersion").kendoDropDownList({
autoBind: false, // won't try and read from the DataSource when it first loaded
cascadeFrom: "txtReinsurer", // parent control Id
cascadeFromField: "reinsurerId", // refereced from txtReinsurer
dataTextField: "planVersionDescription",
dataValueField: "planVersionId",
optionLabel: " ",
dataSource: {
transport: {
read: {
dataType: "json",
url: "../../Api/Treaty/GetTreatyPlanVersion?facId=" + $('#facApplicationId').val()
}
}
}
});
Server-Side Filtering
// start of kitchen
$("#kitchens").kendoDropDownList({
cascadeFrom: "sites",
autoBind: false,
dataTextField: "KitchenName",
dataValueField: "Id",
dataSource: {
serverFiltering: true, // <-- must have !
transport: {
read: {
dataType: "json",
url: "/api/Lookup/GetUserKitchens"
},
// Kendo UI sends a filter array object by default
// add parameterMap to "select" the parameter sent by Kendo UI as default
//
parameterMap: function (data, operation) {
if (operation == "read") {
// approach 1: retrieve the data directly
var stieName = $("#sites").data("kendoDropDownList").value();
// approach 2: retrieve from filter
// var siteName = options.filter.filters[0].value
console.log(stieName);
// send the parameter to server side
return {
'siteName': stieName
};
} else {
return {};
}
}
}
}
});
// end of kitchens
Filter Grid Data
Link from Kendo Developer Blog
// create a product variable to hold the selected
// product id. set it to 0 by default
var productId = 0;
$("#orders").kendoGrid({
columns: [{ field: 'OrderID', title: 'Order ID'},
{ field: 'ShipName', title: 'Name'},
{ field: 'ShipCity', title: 'City' },
{ field: 'ShipRegion', title: 'Region'}],
dataSource: new kendo.data.DataSource({
transport: {
read: "data/orders.php",
parameterMap: function(options, operation) {
// return the value of the selected product
return {
ProductID: productId
}
}
},
schema: {
data: "data",
total: "total"
},
pageSize: 10
}),
pageable: true,
autoBind: false
});
// Add Change Event Listener To Products
$("#products").kendoDropDownList({
dataSource: new kendo.data.DataSource({
transport: {
read: "data/products.php",
parameterMap: function(options, operation) {
return {
CategoryID: options.filter.filters[0].value
}
}
},
schema: {
data: "data"
},
serverFiltering: true
}),
optionLabel: "Select A Product",
dataTextField: "ProductName",
dataValueField: "ProductID",
cascadeFrom: "categories",
autoBind: false,
change: function(e) {
// the products DropDown is e.sender. to get it's selected value
// call the view() method
productId = e.sender.value();
// tell the grid to refresh
$("#orders").data("kendoGrid").refresh();
}
});
Add animation to the Grid visibility
// this is the CHANGE event on the Products DropDown.
// the other code has been omitted for berevity
...
change: function(e) {
if ($("#orders").is(":visible")) {
// first zoom the grid out
$("#orders").kendoAnimate({
effects: "zoom:out fade:out",
// this fires when the zoom out completes
complete: function() {
// the products DropDown is e.sender. to get it's selected value
// call the view() method
productId = e.sender.value();
// tell the grid datasource to read
$("#orders").data("kendoGrid").dataSource.read();
// zoom the grid back in
$("#orders").kendoAnimate({
effects: "zoom:in fade:in",
// the show toggles the items display css property
show: true
});
}
});
}
}