Add ProgressBars to Grid Cells

Environment

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

Description

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

Solution

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>
<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>

See Also

• Kendo UI for jQuery Data Grid (Product Page)
• jQuery Data Grid Overview (Demo)
• Data Grid Overview (Documentation)