# Add ProgressBars to Grid Cells

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Progress® Kendo UI® Grid for jQuery</td>
 </tr>
 <tr>
  <td>Product Version</td>
  <td>2017.3.913</td>
 </tr>
</table>

## 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`](https://docs.telerik.com/kendo-ui/api/ui/grid/configuration/columns#columnstemplate) configuration.

2. On the [`dataBound`](https://docs.telerik.com/kendo-ui/api/ui/grid/events/databound) event, initialize the ProgressBars by using the model value.

```dojo
<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)](https://www.telerik.com/kendo-jquery-ui/data-grid-\(table\))
* [jQuery Data Grid Overview (Demo)](https://demos.telerik.com/kendo-ui/grid/index)
* [Data Grid Overview (Documentation)](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/overview)