Check a checkbox on Full Gridview row click using Javascript in ASP.NET using C#

Question

I am able to check a column of checkbox when I click the gridview row, however it limits only to a particluar column, when I click on the column of the checkbox, it it is not wkorking.

Here's the case, When I click the any where on this part, it worked well. the checkbox still checking.

but when I click on this part, it doesn't work already.

codes are here

$(document).ready(function () {
    $('body').on('click', 'tr.dataRow', function () {
        var checked = $(this).find('input[id*=chkBusinessSelected]').prop('checked');
         $(this).find('input[id*=chkBusinessSelected]').prop('checked', !checked);

    });
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {
    $('body').on('click', 'tr.dataRow', function () {
        var checked = $(this).find('input[id*=chkBusinessSelected]').prop('checked');
        $(this).find('input[id*=chkBusinessSelected]').prop('checked', !checked);

    });
});

<asp:GridView ID="grdBusiness" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical" Width="420px"  ShowHeaderWhenEmpty="True" EmptyDataText="No records Found" OnRowDataBound="grdBusiness_RowDataBound" DataSourceID="SqlDataSource3"    >
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="chkBusinessSelected" runat="server"  />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Code" HeaderText="Code" SortExpression="Code" />
        <asp:BoundField DataField="Business Type" HeaderText="Business Type" SortExpression="Business Type" />
    </Columns>
    <FooterStyle BackColor="#CCCC99" />
    <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
    <RowStyle BackColor="#F7F7DE" />
    <SelectedRowStyle BackColor="#90FF90" Font-Bold="True" ForeColor="Black"  />
    <SortedAscendingCellStyle BackColor="#FBFBF2" />
    <SortedAscendingHeaderStyle BackColor="#848384" />
    <SortedDescendingCellStyle BackColor="#EAEAD3" />
    <SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>

 protected void grdBusiness_RowDataBound(object sender, GridViewRowEventArgs e)
 {
     if (e.Row.RowType == DataControlRowType.DataRow)
     {
         e.Row.CssClass = "dataRow";     
     }
 }

to have a real FULL gridview row that is able to check the checkbox, as of now the codes are only able to do that on the 2nd and 3rd column. checkbox column when click is uable to check itself. — rickyProgrammer
– rickyProgrammer, Commented Aug 12, 2015 at 10:30

Mitat Koyuncu · Accepted Answer · 2015-08-12 11:14:58Z

2

I am edited @UsmanKhalid 's answer and it worked for me:

$(function () {
        $("#<%=grdBusiness.ClientID %> td").click(function () {
            selectRow($(this).closest("tr"));
        });
    });

    function selectRow(row) {
        var firstInput = row[0].getElementsByTagName('input')[0];
        firstInput.checked = !firstInput.checked;
    }

answered Aug 12, 2015 at 11:14

Mitat Koyuncu

9281 gold badge8 silver badges20 bronze badges

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

3 Comments

rickyProgrammer Over a year ago

Should I put anything in the .ascx source page?

Mitat Koyuncu Over a year ago

I have a page and gridview in page and this script at the header. At my page it works. By the way are you added Jquery reference to your page or control?

rickyProgrammer Over a year ago

I see.. my javascript is on external file. I have a user control with Update Panel on it.

Usman Khalid · Accepted Answer · 2015-08-12 11:00:50Z

1

Try this code:

$(function () {
        $("[id*=GridView] td").click(function () {
            selectRow($(this).closest("tr"));
        });
    });

function selectRow(row)
{
    var firstInput = row.getElementsByTagName('input')[0];
    firstInput.checked = !firstInput.checked;
}

answered Aug 12, 2015 at 11:00

Usman Khalid

3,1209 gold badges44 silver badges68 bronze badges

8 Comments

Usman Khalid Over a year ago

Just replace "[id*=GridView]" with your gridview id.

rickyProgrammer Over a year ago

should I removed my original Javascript code, and replace yours? or retrain it and yours is just an addtion?

Usman Khalid Over a year ago

Yes remove your code. And put your gridid like this : #<%=grdBusiness.ClientID %> td

rickyProgrammer Over a year ago

I'm sorry I need to remove my vote for this because i found out that this does not fully answers the question, because it still does not click the checkbox, only the column part but the checkbox itself is not checkable.

Mitat Koyuncu Over a year ago

@rickyProgrammer change row.getElementsByTagName('input')[0]; to row[0].getElementsByTagName('input')[0]; and try again. It will works. Because row is jquery variable and getElementsByTagName is javascript function.

|

Taleeb · Accepted Answer · 2015-08-12 11:09:29Z

0

Try the following

$('tr.dataRow').click(function(){

  var chkBox = $(this).find('input[type=checkbox]');
    chkBox.prop("checked", !chkBox.prop("checked"));

});

answered Aug 12, 2015 at 11:09

Taleeb

1,91919 silver badges26 bronze badges

Collectives™ on Stack Overflow

Check a checkbox on Full Gridview row click using Javascript in ASP.NET using C#

3 Answers 3

3 Comments

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related