Find values of checked rows in gridview using jQuery

Question

I have a gridview that looks like this:

<div id="btnCancel" onclick="cancelize()" class="btn btn-default pull-right ui-colour"><span class="glyphicon glyphicon-remove"></span></div>
    <asp:GridView ID="gv" runat="server" AutoGenerateColumns="False"
        OnPageIndexChanging="gv_PageIndexChanging" Width="90%" PageSize="10" HorizontalAlign="Center" AllowPaging="true" OnRowDataBound="gv_RowDataBound"
        CssClass="table table-bordered ui-state-default table-condensed table-responsive table-hover">
           <Columns>
              <asp:BoundField DataField="id" HeaderText="Nbr." ItemStyle-HorizontalAlign="center" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="false" />
              <asp:TemplateField ItemStyle-Wrap="false" ItemStyle-VerticalAlign="Top" HeaderText="Options" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                  <ItemTemplate>
                     <div id="btnEdit" onclick="modalize(<%#Eval("id") %>)" class="btn btn-sm btn-default ui-colour"><span class="glyphicon glyphicon-wrench"></span></div>
                  </ItemTemplate>
              </asp:TemplateField>
              <asp:BoundField Visible="true" DataField="status" HeaderText="Status" ItemStyle-HorizontalAlign="center" HeaderStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="false" />
              <asp:BoundField Visible="true" DataField="amount" HeaderText="Amount" ItemStyle-HorizontalAlign="center" HeaderStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="false" />
              <asp:BoundField Visible="true" DataField="added" HeaderText="Added" ItemStyle-HorizontalAlign="center" HeaderStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="false" DataFormatString="{0:d}" />
              <asp:BoundField Visible="true" DataField="nextbilling" HeaderText="Next Billing" ItemStyle-HorizontalAlign="center" HeaderStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="false" DataFormatString="{0:d}" />
              <asp:BoundField Visible="true" DataField="lastresult" HeaderText="Last Result" ItemStyle-HorizontalAlign="center" HeaderStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="false" />
              <asp:TemplateField ItemStyle-Wrap="false" ItemStyle-VerticalAlign="Top" HeaderText="Cancel" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                  <ItemTemplate>
                     <asp:Label runat="server" Visible="false" ID="hfId" Text='<%#Eval("id") %>'></asp:Label>
                     <asp:Label runat="server" Visible="false" Text='<%# " - " + Eval("cancel", "{0:d}") %>' ID="lblCancel"></asp:Label>
                     <asp:CheckBox ID="cbCancel" CssClass="cbCancel" runat="server" Visible="false" />
                  </ItemTemplate>
              </asp:TemplateField>
           </Columns>
   </asp:GridView>
 <a id="hlCancel" class="hlCancel" />
 <a id="hlEdit" class="hlEdit" />

Function to call modal:

             function cancelize() {
        var pId = queryString.pid;
        var ids = "";
        $("input[name$=cbCancel]:checked").each(function () {
            ids += "-" + $(this).next('input:hidden[id$=hfId]').val();//stuck here
        }).get();
        var url = "pageToView.aspx?id=1&pid=" + pId+ "&cids=" + ids;
        $j('#hlCancel').attr('href', url)
        $j('#hlCancel').click();
    }

everything works great, but on the .each() in the cancelize function it is returning undefined for the selected rows. What needs to change here so that it can pick up the hfId value from the rows with a checked checkbox?

jQuery Get Selected Row Values from Asp.net Gridview on Checkbox Selection OR Using jQuery with CheckBox and ASP.NET GridView I think out of both one will definetly work for you. — Manish Goswami
– Manish Goswami, Commented Nov 22, 2014 at 4:08
@ManishGoswami unfortunately, that doesn't seem to work for me. I can only see name in lieu of id in the next() as a difference from the above. Tried it to no avail — user4075691
– user4075691, Commented Nov 22, 2014 at 4:14

Rahul Singh · Accepted Answer · 2014-11-22 04:41:43Z

1

You need to select the parent td inside which both hidden control and checkbox are residing and then search the hidden field:-

  var Parenttd =  $('input[type="checkbox"]:checked').parents('td')[0];
  var HiddenValue = $(input:hidden,Parenttd).val();

Also, since you are using 'Visible=false' in your label control it will not render, instead you shoul use Hidden Control:-

<asp:HiddenField ID="hfId" runat="server" Value='<%# Eval("id") %>' />

Edit:
If you want to fetch this using ID selector then you need to set ClientIDMode="Static" property in checkbox and Hidden field control and then you can simply use like this:-

var parenttd =$('#cbCancel:checked').parents('td')[0];
var yourHiddenVal  $('#hfId',parent).val();

I have used this hidden control and checked the above jQuery code is working fine.

edited Nov 22, 2014 at 4:41

answered Nov 22, 2014 at 4:28

Rahul Singh

21.8k6 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user4075691 Over a year ago

modified it so it will pull unique rows, works like this: var Parenttd = $(this).parents('td')[0]; var HiddenValue = $('input[name$=hfId]', Parenttd).val();

Rahul Singh Over a year ago

@user4075691 - Okay Cheers :)

DAB · Accepted Answer · 2014-11-22 03:10:04Z

1

It looks like you are missing a value from the field. When an html checkbox is rendered, it will look like this:

<input type="checkbox" value="1" id="checkbox">

$('#checkbox').val() will return 1 regardless of whether it's checked. If there is no value, it will return undefined - regardless of whether it's checked.

answered Nov 22, 2014 at 3:10

DAB

1,35315 silver badges24 bronze badges

1 Comment

user4075691 Over a year ago

Im not sure what you mean, I am trying to get the value of the hidden label hfId, not the value of the checkbox itself

RGS · Accepted Answer · 2014-11-22 05:37:54Z

0

Use prev() to get your hidden label value.

$("input[name$=cbCancel]:checked").each(function () {
ids += "-" + $(this).parent().find('[id$=hfId]').val();
});

Also use style="visibility:hidden" or style="display:none" instead of using Visible="false" for your label tag because Visible="false" will stop the control from being rendered into the HTML.

edited Nov 22, 2014 at 5:37

answered Nov 22, 2014 at 4:12

RGS

5,2217 gold badges44 silver badges69 bronze badges

2 Comments

user4075691 Over a year ago

I see your angle, but unfortunately it did not work. I believe this is because the issue is now the [id$=hfId]. I will Now try your edit

user4075691 Over a year ago

It did not work setting CSS, I also removed it so it was visible and it still did not work

Collectives™ on Stack Overflow

Find values of checked rows in gridview using jQuery

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related