Displaying a Progress Bar with color depending on value.

[Neill]

I have an ASP.NET MVC application.

I have a grid that displays various columns and rows.

I want the last column to be a progress bar whose colour is dependant on a value range.

Eg:

< 50 Red progress bar

> 50 Green Progress bar.

I am trying to do this using a template, but I'm note sure if that is the correct way to do it.

Code for the Grid:

    @(Html.EJ().Grid<EngineeringAssistantMVC.DatabaseModels.JobCard>("JobcardsGrid")

                                .Datasource((IEnumerable<EngineeringAssistantMVC.DatabaseModels.JobCard>)Model.Jobcards)

                                .AllowSorting()

                                .AllowPaging().PageSettings(page => page.PageSize(ps)) // Set the number of rows displayed....

                                .AllowFiltering()

                                .AllowResizing()

                                .EnableAltRow(true)

                                .IsResponsive()

                                .Columns(col =>

                                {

                                    col.Field("Customer").HeaderText("Customer").Width(60).Add();

                                    col.Field("RepairsProgress").HeaderText("Progress").Template("#progressTemplate").Width(30).Add();

                                })

                                .ClientSideEvents(events =>

                                {

                                    events.RecordClick("RecordClick");

                                })

                            )

NOTE: I have removed most of the columns from the example code for brevity

The template code:

    <script type="text/x-jsrender" id="progressTemplate">

    <div id="test" class="progress-bar bg-success" role="progressbar"  aria-valuemin="0" aria-valuemax="100">

        {{:RepairsProgress}}

    </div>

</script>

In the template code example the progress bar will always be green no matter what the RepairsProgress value is set to.

How can I either change the 'bg-success' class to 'bg-danger' class depending on the value, or is there another way I could achieve this?

 

[Neill]

I managed to find in the documentation how I can use conditions on the template which solves my problem.

<script id="progressTemplate" type="text/x-jsrender">

    <div>

        {{if RepairsProgress == -1}}

        <div class="progress-bar bg-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100">

            No Items

        </div>     

        {{else RepairsProgress > -1}}

            <div class="progress-bar bg-success" role="progressbar" aria-valuemin="0" aria-valuemax="100">

                {{:RepairsProgress}}

            </div>

        {{else}}

        <div class="progress-bar bg-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100">

            {{:RepairsProgress}}

        </div>

        {{/if}}

    </div>

</script>

[Farveen Sulthana Thameeztheen Basha]

Hi Neil, 

Thanks for contacting Syncfusion Support 

Query#:- I want the last column to be a progress bar whose colour is dependant on a value range.
How can I either change the 'bg-success' class to 'bg-danger' class depending on the value, or is there another way I could achieve this? 

 

We have placed the progressBar as template column and rendered the ejProgress bar control through TemplateRefresh event of the Grid. We have used JSRender conditional tag “if” to set value for Progress control based on condition. 

 

Please refer to the code example:- 

 

<script type="text/x-jsrender" id="columnTemplate"> 

    {{if EmployeeID<3}} 

    <div id="progressbar" class="bg-success" role="progressbar"> 

    </div> 

    {{else EmployeeID>2}} 

    <div id="progressbar" class="bg-warning" role="progressbar"> 

    </div> 

    {{/if}} 

</script> 

@(Html.EJ().Grid<object>("ColumnTemplate") 

       .Datasource((IEnumerable<object>)ViewBag.datasource) 

       .AllowPaging() 

       .PageSettings(page => { page.PageSize(10); }) 

        .Columns(col => 

           col.HeaderText("Progress Bar").Template("#columnTemplate").TextAlign(TextAlign.Center).Width(110).Add(); 

            .    .    . 

        }) 

     .ClientSideEvents(eve =>{ 

            eve.TemplateRefresh("refresh"); 

            

        }) 

 

) 

<script> 

    function refresh(args) { 

        $(args.cell).find("#progressbar").ejProgressBar({ value: args.data.EmployeeID }); 

    } 

 

</script> 

 

Refer to the screenshot:- 

Sample Link:- http://www.syncfusion.com/downloads/support/forum/143796/ze/SyncfusionMvcApplication_(4)538382471 

KB Link:- https://www.syncfusion.com/kb/6798/how-to-display-syncfusion-controls-in-grid-columns 

 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Neill]

Thank you, that works pretty well.

How would I display the value with a percentage sign on the progress bar in the center?

Eg, 50%

[Vignesh Natarajan]

Hi Neill, 

 

Thanks for the update. 

 

Query: How would I display the value with a percentage sign on the progress bar in the center? 

 

We can achieve your requirement using the text property of ejProgressbar in the templateRefresh event of ejGrid. Please refer the below code example, 

 

 

<script type="text/x-jsrender" id="columnTemplate"> 

…………… 

</script> 

@(Html.EJ().Grid<object>("Grid") 

                      .Datasource((IEnumerable<object>)ViewBag.datasource) 

                       .ClientSideEvents(eve => 

                       { 

                           eve.TemplateRefresh("refresh"); 

 

                       }) 

                    …………. 

                     .Columns(col => 

                      { 

                          ……….. 

                         col.HeaderText("Progress Bar").Template("#columnTemplate").TextAlign(TextAlign.Center).Width(110).Add(); 

                      }) 

) 

<script> 

    function refresh(args) { 

        $(args.cell).find("#progressbar").ejProgressBar({ value: args.data.EmployeeID, text: args.data.EmployeeID + " %"}); 

        

    } 

    </script> 

 

 

Note: while rendering the ejProgressBar in template change, we have added the property text. 

 

Refer the below screenshot for the output 

 

 

 

Refer the below link for API documentation 

 

https://help.syncfusion.com/api/js/ejprogressbar#members:text  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan.