Formatting ProgressBar Value

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:

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

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

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

     @(Html.Kendo().Grid<OrderViewModel>()
       .Name("grid")
       .Events(ev => ev.DataBound("onDataBound"))
       ...// Other configuration.
     )
   

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

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

More ASP.NET MVC ProgressBar Resources

• ASP.NET MVC ProgressBar Documentation

• ASP.NET MVC ProgressBar Demos

• ASP.NET MVC ProgressBar Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

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

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

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base