Update Toolbar Content Using MVVM Binding
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Operating System | All |
Browser | All |
Browser Version | All |
Description
How can I create a custom MVVM binding to update the Toolbar content dynamically in the Kendo UI Grid for jQuery?
Solution
The following example demonstrates how to create a custom MVVM binding to update the Toolbar content dynamically.
<div id="example">
<button data-bind="click: updateToolbar">Update toolbar</button>
<div data-role="grid"
date-scrollable="true"
data-columns="[
{ 'field': 'ProductName', 'width': 270 },
{ 'field': 'UnitPrice' },
]"
data-bind="source: products, gridToolbar: toolbar"
style="width: 480px; height: 200px"></div>
</div>
<script>
kendo.data.binders.widget.gridToolbar = kendo.data.Binder.extend({
init: function(widget, bindings, options) {
//call the base constructor
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
},
refresh: function() {
var that = this;
var value = that.bindings["gridToolbar"].get(); //get the value from the View-Model
value = $.map(value, function(item) {
return { template: item.template };
});
$(that.element).data("kendoGrid").setOptions({
toolbar: value
}); //update the widget
}
});
var viewModel = kendo.observable({
products: new kendo.data.DataSource({
schema: {
model: {
id: "ProductID"
}
},
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/products/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/products/create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
}
}),
toolbar: [{"template": "<div id=\"gridToolbar\" class=\"toolbar\"><input type=\"button\" class=\"k-button k-button-icontext\" value=\"My Button\"/></div>" }],
updateToolbar: function() {
this.set("toolbar", [{
template: '<div id="gridToolbar" class="toolbar"><input type="button" class="k-button k-button-icontext" value="test"/></div>'
}]);
}
});
kendo.bind($("#example"), viewModel);
</script>
See Also
- JavaScript API Reference of the Data Grid
- Add Cascading DropDownList Editors
- Copy Data from Excel
- Drag and Drop Rows between Grids
- Enable ForeignKey Column Sorting by Text
- Implement Stable Sort in Chrome
- Initialize Data Attribute with Detail Template
- Load and Append More Records While Scrolling Down
- Perform CRUD Operations with Local Storage Data
- Persist Expanded Rows after Refresh
- Set Cell Color Based on ForeignKey Values
- Show Tooltip for Column Records
For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.