Get ASP.NET GridView cell value and show in JQuery Progress Bar

Question

I have an ASP.NET GridView which is populated from a SQL Server database. This is working fine. My code behind is using C#.

One of the columns in the GridView contains a JQuery Progress bar and another contains a number of responses. Please see the image below:

How can I go about getting each value for the response count column and show this value in each rows corresponding JQuery Progress bar?

My JQuery progress bar is currently static and it generated like so:

<asp:DataList runat="server" id="listResponses" DataKeyField="QuestionID" OnItemDataBound="listResponses_ItemDataBound" Width="100%">
    <ItemTemplate>
        <div class="question_header">
            <p><strong><asp:Label ID="lblOrder" runat="server" Text='<%# Container.ItemIndex  + 1 %>'></asp:Label>. <%# DataBinder.Eval(Container.DataItem, "QuestionText") %></strong></p>
        </div> <!-- end question_header -->
        <asp:GridView runat="server" ID="gridResponses" DataKeyNames="AnswerID" AutoGenerateColumns="False" CssClass="responses" AlternatingRowStyle-BackColor="#f3f4f8">
            <Columns>
                <asp:BoundField DataField="AnswerTitle" ItemStyle-Width="250px"></asp:BoundField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <div class="pbcontainer">
                            <div class="progressbar"></div>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="Responses" HeaderText="Response Count" HeaderStyle-Width="100px" />
            </Columns>
        </asp:GridView>   
    </ItemTemplate> 
</asp:DataList>

Using the following script provided on the JQuery UI website:

 $(function () {

        // Progressbar
        $(".progressbar").progressbar({
            value: 40
        });
        //hover states on the static widgets
        $('#dialog_link, ul#icons li').hover(
            function () { $(this).addClass('ui-state-hover'); },
            function () { $(this).removeClass('ui-state-hover'); }
        );

   });

I am not sure where to being here so any help would be appreciated.

Answer 1

In your div that holds the progress bar, add a hidden field like so:

<div class="pbcontainer">
    <!-- This is the new line in markup. Replace NumOfResponses with your value field -->
    <asp:HiddenField ID="hiddenValue" runat="server" Value='<%# Eval("NumOfResponses") %>' />

    <div class="progressbar"></div>
</div

Now each div that contains a progress bar also contains a hidden field with the value you need to update the progress bar with.

In jQuery you can set all progress bars inside the data list equal to their respective values. Example:

EDIT: (the following jQuery code was modified)

$('.pbcontainer').each(function() {
    // We assume that there is only 1 hidden field under 'pbcontainer'
    var valueFromHiddenField = $('input[type=hidden]', this).val();

    $('.progressbar', this).progressbar({ value: parseInt(valueFromHiddenField) });
});

ALL these were just from the top of my head without any real code verification.. But this will be the IDEA:

1. Get the value from ASP.NET into a hidden field near the progress bars in each row
2. Update each progress bar in jQuery with the value in HTML hidden field.

Hope this helps

Answer 2

Try this:

<script>
    var maxBarVal = 0;
    $(function () {
        $('.row').each(function () {
            var val = parseInt($(".value", this).text());
            maxBarVal += val;
        });
        $('.row').each(function () {
            var val = parseInt($(".value", this).text());
            $('.bar', this).progressbar({ value: val / maxBarVal * 100 });
        });
    });
</script>

This is simulated output from the GridView control:

<table border="1" cellpadding="3" cellspacing="0" style="border-collapse: collapse;" width="100%">
    <tr>
        <td colspan="3">4. Have you used an iPad before?</td>
    </tr>
    <tr>
        <td width="250">Answer</td>
        <td>Percentage</td>
        <td width="100">Response Count</td>
    </tr>
    <tr class="row">
        <td>Yes</td>
        <td><div class="bar"></div></td>
        <td class="value">4</td>
    </tr>
    <tr class="row">
        <td>No</td>
        <td><div class="bar"></div></td>
        <td class="value">2</td>
    </tr>
</table>