Formatting ProgressBar Value

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>

Html

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

Html

  <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