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

Add ProgressBars to Grid Cells

Environment

Product Progress Kendo UI Grid
Made with version 2017.3.913

Description

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

Solution

  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>
<script>
$("#grid").kendoGrid({
  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);

      $(this).kendoProgressBar({
        max: 1000,
        value: model.progress
      })
    });
  }
});
</script>
In this article
Not finding the help you need? Improve this article