New to Kendo UI for jQuery? Download free 30-day trial

Update Toolbar Content Using MVVM Binding


Product Progress® Kendo UI® Grid for jQuery
Operating System All
Browser All
Browser Version All


How can I create a custom MVVM binding to update the Toolbar content dynamically in the Kendo UI Grid for jQuery?


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"
                           { 'field': 'ProductName', 'width': 270 },
                           { 'field': 'UnitPrice' },
           data-bind="source: products, gridToolbar: toolbar"
           style="width: 480px; height: 200px"></div>
  <script> ={
        init: function(widget, bindings, options) {
            //call the base constructor
  , 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 };

              toolbar: value
            }); //update the widget

    var viewModel = kendo.observable({
        products: new{
            schema: {
                model: {
                    id: "ProductID"
            batch: true,
            transport: {
                read: {
                    url: "",
                    dataType: "jsonp"
                update: {
                    url: "",
                    dataType: "jsonp"
                create: {
                    url: "",
                    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);

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

In this article