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

Add ProgressBars to Grid Cells


Product Progress® Kendo UI® Grid for jQuery
Product Version 2017.3.913


How can I add a ProgressBar to a Kendo UI Grid cell?


To achieve the desired scenario:

  1. Add the DOM elements for the ProgressBar by using the column.template configuration.

  2. On the dataBound event, initialize the ProgressBars by using the model value.

<div id="grid"></div>
  columns: ["name", {
    field: "progress",
    template: "<div class='progress'></div>"
  dataSource: [ { name: "Jane", progress: 100 }, { name: "John", progress: 200 }],
  editable: true,
  dataBound: function(e) {
    var grid = this;

    grid.tbody.find(".progress").each(function(e) {
        var row = $(this).closest("tr");
      var model = grid.dataItem(row);

        max: 1000,
        value: model.progress

See Also

In this article