We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Displaying a Progress Bar with color depending on value.

Thread ID:

Created:

Updated:

Platform:

Replies:

143796 Apr 4,2019 01:00 PM UTC Apr 9,2019 06:00 AM UTC ASP.NET MVC 4
loading
Tags: Grid
Neill
Asked On April 4, 2019 01:00 PM UTC

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
Replied On April 4, 2019 02:28 PM UTC

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 [Syncfusion]
Replied On April 5, 2019 06:00 PM UTC

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 
 
Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 


Neill
Replied On April 8, 2019 06:43 AM UTC

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 [Syncfusion]
Replied On April 9, 2019 06:00 AM UTC

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 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon