How to modify jQuery progressbar color in ASP.net gridview?

Question

I have a Gridview with a column that contains progressbar value. I managed to display the progress for each row but I'm looking for a way to alter the color of progress bar based on another column with Boolean value ( True/False ). If value is True color becomes green. If the value is False color becomes Red. I've manged to alter a single progress bar color but I haven't been able to do it in a Gridview for each row! The Boolean column is status and the progressbar value is in progress.

Thanks in Advance!

GridView in ASP:

Updated:

<Columns>
<asp:TemplateField>
    <ItemTemplate>
        <%# Container.DataItemIndex + 1 %>
    </ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="progress" HeaderText="Progress" SortExpression="progress" />
<asp:BoundField DataField="status" HeaderText="status" SortExpression="status" />
<asp:TemplateField>
<ItemTemplate>
   <div class="pbcontainer">
      <div class="progressbar"><span><%# Eval("progress") %>%</span></div>
      <div class="value" style="visibility:hidden; height:0; width:0;"> <%#         Eval("progress") %> </div>
      <div class="status" style="visibility:hidden; height:0; width:0;"> <%# Eval("status") %> </div>
  </div>
</ItemTemplate>
</asp:TemplateField>
</Columns>

Script:

UPDATED:

  <script>
    $(function () {

        $('.pbcontainer').each(function () {

            var val = parseInt($(".value", this).text());
            var status = $(".status", this).text();

            var progressColor = "Orange";
            var progressBackColor = "lightYellow";
            if (status == "False") {
                progressColor = "Red";
                console.log(progressColor);
            }
            else {
                progressColor = "Green";
                console.log(progressColor);
            }

            $('.progressbar', this).progressbar({ value: val });
            $('.progressbar', this).css({ 'background': progressBackColor });
            $('.progressbar > div', this).css({ 'background': progressColor });
        });
    });
 </script>

Edit: I've updated the code but still the color is always Green! like the If statement is not working ?!

@Guganeshan.T can you help me out ? – Poorya Aug 08 '13 at 08:18 — Poorya, Aug 08 '13 at 08:18

vendettamit · Answer 1 · 2013-08-08T10:58:38.223

In your snippet the value in hidden field is the same as in the span for progress. So you rather use the same value to and make the decision of coloring.

Updated:

For e.g. you have let say two rows with value true and false

<div class="progressbar"><span>70%</span></div>
<div class="progressbar"><span>20%</span></div>
<div class="status" style="visibility:hidden; height:0; width:0;">true</div>
<div class="status" style="visibility:hidden; height:0; width:0;">false</div>

Now you can read the value in each item and color them accordingly.

   var progressColorRed = "Red";
    var progressColorGreen = "Green";
    var progressBackColor = "lightYellow";
    var progressLate = true;

 $('.progressbar').each(function(index, item) {
        var progressValue = $(".status").eq(index).text();
        console.log(progressValue);
        if(progressValue == "true")
        {
            $(item).css({ 'background': progressBackColor });
            $(item).css({ 'background': progressColorGreen });
        }
        else
        {
            $(item).css({ 'background': progressBackColor });
            $(item).css({ 'background': progressColorRed });
        }
 });

Here' the fiddle demo of the same

I need to make that decision based on another filed called **Status** not based on the value in span! i need that value in span to be displayed on progressbar. I figured my solution works only for one hidden filed! so I've changed my approach but still have an issue with it! i'll update my code in a minute — Poorya, Aug 08 '13 at 09:55
the Code is updated would you take a look and give me a hand! — Poorya, Aug 08 '13 at 10:05
@pouria I've updated the answer as per your question. $(".value") returns array of items having class "value" so I've just used the .eq() to get specific item based on index. See updated fiddle demo. — vendettamit, Aug 08 '13 at 11:00

How to modify jQuery progressbar color in ASP.net gridview?

1 Answers1