Formatting ProgressBar Value

Updated on Dec 10, 2025

Environment

Product	Telerik UI for ASP.NET Core ProgressBar
Progress Telerik UI for ASP.NET Core 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:

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

Razor

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

Razor

  <column field="Freight" template="<div class='progress'></div>" />

1. 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.
  )

Razor

  <kendo-grid name="grid" on-data-bound="onDataBound">
    <!-- Other configuration -->
  </kendo-grid>

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>

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

JS

  <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 following REPL samples:

• Sample code with the Grid and ProgressBar HtmlHelpers
• Sample code with the Grid and ProgressBar TagHelpers

More ASP.NET Core ProgressBar Resources

• ASP.NET Core ProgressBar Documentation

• ASP.NET Core ProgressBar Demos

• ASP.NET Core ProgressBar Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the ProgressBar for ASP.NET Core

• Server-Side API Reference of the ProgressBar for ASP.NET Core

• Server-Side TagHelper API Reference of the ProgressBar for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base