Get ASP.NET GridView cell value and show up in jQuery execution bar

I have an ASP.NET GridView that is populated from a SQL Server database. It works fine. My code works from C #.

One of the columns in the GridView contains the jQuery Progress bar and the other contains multiple responses. See image below:

enter image description here

How can I get each value for the number of responses column and show that value on each row corresponding to the JQuery Progress row?

The jQuery runtime is currently static and it is generated like this:

<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'm not sure where to be here, so any help would be appreciated.

+3


source to share


2 answers


In your div that contains the progress bar, add a hidden field, like this:

<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 every div that contains the progress bar also contains a hidden field with the value needed to update the progress bar.

In jQuery, you can set all progress bars in a data list to their respective values. Example:

EDIT: (the following jQuery code has been 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 of this was just off my head with no real code validation. But this will be an IDEA:

  • Get value from ASP.NET into hidden field next to progress bars on each line
  • Update every progress bar in jQuery with a value in a hidden HTML field.

Hope it helps

+3


source


Try the following:

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

      

+2


source







All Articles