Edit this page

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy