How to check only few checkbox of a gridview using Jquery?

Question

I have a grid with few columns

<div id="AbstractDiv" runat="server" class="DivGrid">
<asp:GridView GridLines="None" ID="Abstract_GridView" runat="server" AutoGenerateColumns="False" CssClass="Grid" CellPadding="0"> 
<Columns>
<asp:TemplateField HeaderText="Select">
 <HeaderTemplate>
 <asp:CheckBox ID="AllChk" runat="server" TabIndex="3"  CssClass="smallCheckbox"/>
 </HeaderTemplate>
 <ItemStyle HorizontalAlign="Center" />
 <ItemTemplate>
 <asp:CheckBox ID="SelectChk" runat="server" TabIndex="5" CssClass="smallCheckbox" />
 </ItemTemplate>
 </asp:TemplateField>
<asp:TemplateField>
 <ItemTemplate>
 <asp:HiddenField ID="EqpNo" runat="server" value='<%# Bind("Equipmnt_No") %>' />
 </ItemTemplate>
</asp:TemplateField>
</Columns>
  </asp:GridView>
 </div>

I'm facing problem in checking few checkbox together.I have a column EqpNo, all rows whose EqpNo matches with the selected row that row checkbox should get checked.

I referred url but it is just allowing to check one row. Below is my Jquery code which is checking all rows instead of only matched one.

$('#<%=Abstract_GridView.ClientID %>').delegate('tr', 'click', function () {
 var SelectRowEqpNo = $(this).find("input[id*=EqpNo]").attr("value"); //trying to get the clicked row EqpNo
 $('#<%=Abstract_GridView.ClientID %> tr input[id*="EqpNo"]').each(function () {
   var Eachrw = $(this).val(); //getting each row EqpNo
   if (SelectRowEqpNo == Eachrw) { //Comparing both values if matching 
$('#<%=Abstract_GridView.ClientID %> tr input[id*="SelectChk"]:checkbox').attr('checked', true);              
}
  });
});

Anujith · Accepted Answer · 2013-01-16 12:52:15Z

0

Try:

$('#<%=Abstract_GridView.ClientID %>').on('click', 'tr', function () {

 var SelectRowEqpNo = $(this).find("input[id*=EqpNo]").val(); //trying to get the clicked row EqpNo

 $('#<%=Abstract_GridView.ClientID %> tr input[id*="EqpNo"]').each(function () {
   var Eachrw = $(this).val(); //getting each row EqpNo
   if (SelectRowEqpNo === Eachrw) { //Comparing both values if matching 
   $('#<%=Abstract_GridView.ClientID %> tr input[id*="SelectChk"]:checkbox').attr('checked', true);              
     }
  });
});

answered Jan 16, 2013 at 12:52

Anujith

9,3686 gold badges36 silver badges48 bronze badges

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

Comments

Viktor S. · Accepted Answer · 2013-01-16 13:41:26Z

0

I would add css class to hidden field (just for simpler jQuery selectors):

<asp:HiddenField ID="EqpNo" runat="server" value='<%# Bind("Equipmnt_No") %>' class="EqpNo" />

UPD: Ooops. Appeared that class is not allowed there at all... Strange... Code updated to reflect that.

And than use code like below:

$('.DivGrid').delegate('tr', 'click', function () {
      var SelectRowEqpNo = $(this).find("input.EqpNo").val();
      $(this).closest("table").find('tr input[id*="SelectChk"][value="'+SelectRowEqpNo+'"]')
      .each(function() {
            $("this").closest("tr").find(".smallCheckbox").attr('checked', true);
      });
  });

Hope there is no mistakes with brackets )

Also please note that I've removed all #<%=Abstract_GridView.ClientID %> and similar and replaced them with functions that find elements relative to currently clicked tr (like .closest, .find). Now it is completely independent from IDs , code is little cleaner and could be easily placed into external class

edited Jan 16, 2013 at 13:41

answered Jan 16, 2013 at 12:52

Viktor S.

12.8k1 gold badge30 silver badges56 bronze badges

5 Comments

Swati Over a year ago

Class property does not belong to a grid hidden filed

Viktor S. Over a year ago

What do you mean? VS does not show it when you type? That should not be a problem

Viktor S. Over a year ago

Actually, it should be printed even if VS shows a warning there. You may try to use CssClass instead of class

Swati Over a year ago

Im getting complie time error that "does not have public property class"

Viktor S. Over a year ago

Sorry, never tried exact thing. I've updated my answer. Frankly speaking I were not sure if selector like this .find('tr input[id*="SelectChk"][value="'+SelectRowEqpNo+'"]') will work and that why tried to use class.

Stefano Altieri · Accepted Answer · 2013-01-17 09:55:06Z

This is the whole code working. I hust changed the jQuery row in the if block:

<asp:GridView GridLines="None" ID="Abstract_GridView" runat="server" AutoGenerateColumns="False"
        CssClass="Grid" CellPadding="0">
        <Columns>
            <asp:TemplateField HeaderText="Select">
                <HeaderTemplate>
                    <asp:CheckBox ID="AllChk" runat="server" TabIndex="3" CssClass="smallCheckbox" />
                </HeaderTemplate>
                <ItemStyle HorizontalAlign="Center" />
                <ItemTemplate>
                    <asp:CheckBox ID="SelectChk" runat="server" TabIndex="5" CssClass="smallCheckbox" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:HiddenField ID="EqpNo" runat="server" Value='<%# Bind("Equipmnt_No") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="lbl" runat="server" Text='<%# Bind("Equipmnt_No") %>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

And the jQuery block:

 $(document).ready(function () {
        $('#<%=Abstract_GridView.ClientID %>').delegate('tr', 'click', function () {
            var SelectRowEqpNo = $(this).find("input[id*=EqpNo]").attr("value"); //trying to get the clicked row EqpNo
            $('#<%=Abstract_GridView.ClientID %> tr input[id*="EqpNo"]').each(function (i, v) {
                var Eachrw = $(this).val(); //getting each row EqpNo
                if (SelectRowEqpNo == Eachrw) { //Comparing both values if matching 
                    $(this).parents("tr").find('input[id*="SelectChk"]:checkbox').attr('checked', true);
                }
            });
        });
    });

Basically: find the owner tr traversing the DOM up, and then find the checkbox traversing the DOM down again.

Hope this helps.

Collectives™ on Stack Overflow

How to check only few checkbox of a gridview using Jquery?

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related