New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Formatting ProgressBar Value

Updated on Dec 10, 2025

Environment

Product	Telerik UI for ASP.NET MVC ProgressBar
Progress Telerik UI for ASP.NET MVC version	Created with the 2024.2.514 version

Description

How can I format the current value of the ProgressBar that is displayed into a Grid column?

By design, the underlying value of the ProgressBar must be a number. In some cases, the value must be formatted. For example, when the number groups must be comma-separated to match the current culture.

Solution

Follow the steps below to initialize a ProgressBar into a specified Grid column and format its value based on the French (fr-FR) culture:

Add the ProgressBar element through the ClientTemplate() option of the Grid's column.

Razor

  columns.Bound(p => p.Freight).ClientTemplate("<div class='progress'></div>");

Handle the DataBound event of the Grid, select the div elements with class progress and initialize the ProgressBar component in each column cell.

Razor
  @(Html.Kendo().Grid<OrderViewModel>()
    .Name("grid")
    .Events(ev => ev.DataBound("onDataBound"))
    ...// Other configuration.
  )
JS
  <script>
    function onDataBound(e) {
      var grid = this;
      grid.tbody.find(".progress").each(function (e) {
          var row = $(this).closest("tr");
          var model = grid.dataItem(row);
          $(this).kendoProgressBar({
              max: model.Freight,
              value: model.Freight
          })
      });
    }
  </script>

Within the DataBound event handler, select the k-progressbar elements, and access the respective ProgressBar value through the k-progressbar-status element. Use the kendo.parseFloat() and kendo.toString() methods to format the value and update it with jQuery.

  <script>
    function onDataBound(e) {
      var grid = this;
      grid.tbody.find(".progress").each(function (e) {
          ... 
      });

      $.each($(".k-progressbar"), function(){
        let currentValue = $(this).find(".k-progress-status").text();
        $(this).find(".k-progress-status").text(kendo.toString(kendo.parseFloat(currentValue), 'n2', 'fr-FR'));
      });
    }
  </script>

For a runnable example based on the code above, refer to the REPL example on formatting the value of ProgressBar displayed into a Grid column.

Formatting ProgressBar Value

Environment

Description

Solution

More ASP.NET MVC ProgressBar Resources

See Also