Access gridview's Checkbox control in JS

Last post 05-24-2008 10:23 AM by NC01. 10 replies.

Sort Posts:

  • Access gridview's Checkbox control in JS

    05-22-2008, 12:54 PM

    Hello all,

       How can i access the checkbox declared inside the Gridview using JS? i tried:

    var chkbox = document.getElementById('<%=Checkbox2.ClientID%>');

    and i got error, couldnt find checkbox2.

     

    http://saqdotnet.blogspot.com/
  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 6:16 AM
    • Participant
      857 point Participant
    • suyog.dabhole
    • Member since 01-05-2007, 7:34 AM
    • Pune(India)
    • Posts 202

    Hi post you code so we can monitor it

    Suyog
    I am just using my free time,but if it helps you then my mark my post as answer
  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 6:20 AM
    • Member
      465 point Member
    • KashifB
    • Member since 07-26-2007, 1:41 PM
    • Bucks, UK
    • Posts 348

    Do you have the JavaScript in the .aspx page or in a separate file?

    If it's in a separate file this method will not work and also using this method you will have to use the FindControl method of the GridView to find the Checkbox control and get it' Client ID.

  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 6:40 AM
    • Participant
      857 point Participant
    • suyog.dabhole
    • Member since 01-05-2007, 7:34 AM
    • Pune(India)
    • Posts 202

    Hi from page view source get id of check box like this.

     var chkbox = document.getElementById('ctl00_MainContentPlaceHolder_GridView1_ctl03_Checkbox2');

    for each row different id page will genrate id's it depends upon no of row you bind to grid view.

    In your code it looks that at design time you have added check box in side grid so it difficult get direct client id.

    Suyog
    I am just using my free time,but if it helps you then my mark my post as answer
  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 10:29 AM

    suyog.dabhole:

    Hi from page view source get id of check box like this.

     var chkbox = document.getElementById('ctl00_MainContentPlaceHolder_GridView1_ctl03_Checkbox2');

     

    Thats why i did document.getelementbyid('<%= Checkbox2.ClientID %>'), so i would get the cleint id.

    my soucre code is :

    <asp:TemplateField HeaderText="View Report">

    <HeaderTemplate>

    <span>View Report</span>

    <asp:CheckBox ID="cbSelectAll" runat="server" />

    </HeaderTemplate>

    <ItemTemplate>

    <asp:CheckBox ID="Checkbox2" runat="server" name="Checkbox2" />    ---HEERE  IS CHECKBOX2 IS DECLARED.

    </ItemTemplate>

    </asp:TemplateField>

    http://saqdotnet.blogspot.com/
  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 10:56 AM
    • All-Star
      75,773 point All-Star
    • NC01
    • Member since 08-26-2005, 7:33 PM
    • Posts 14,128
    • TrustedFriends-MVPs

    Add to your GridView:

    <asp:GridView ID="GridView1" OnRowDataBound="GridView1_RowDataBound" ...

    Change your JavaScript to this:

    <script type="text/javascript">
    <!--
    function onCheckbox2Click(chkbox)
    {
     // Don't need this as it is being passed by the event...
     //var chkbox = document.getElementById('<%=Checkbox2.ClientID%>');

     // Rest of your code goes here...
    }
    // -->
    </script>

    Add to the CodeBehind:

    protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e)
    {
     if ( e.Row.RowType == DataControlRowType.DataRow )
     {
      // CheckBox with an ID of "Checkbox2" is in column #1 of the Grid...
      Button checkBox2 = (Button)e.Row.Cells[1].FindControl("Checkbox2");

      if ( checkBox2 != null )
       checkBox2.Attributes.Add("onclick", "onCheckbox2Click(this);");
     }
    }

    NC...

  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 11:06 AM

    The above code certainly works...but would you please tell me why the method i was trying didnt work...

    http://saqdotnet.blogspot.com/
  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 1:00 PM
    • All-Star
      75,773 point All-Star
    • NC01
    • Member since 08-26-2005, 7:33 PM
    • Posts 14,128
    • TrustedFriends-MVPs

    Because there is a Checkbox2 control declared for each row in the Grid, which makes the ID if each something like: 'GridView1_ctl" + rowNumber + "_Checkbox2' which <%=Checkbox2.ClientID%> can't unscramble. The way that I posted is the correct way of dealing with GridViews, DataGrids, etc.

    NC...

  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 1:13 PM
    • Participant
      857 point Participant
    • suyog.dabhole
    • Member since 01-05-2007, 7:34 AM
    • Pune(India)
    • Posts 202

    You have added check box in grid view at design time,suppose you binds 20 rows to grid view that mean 20 check boxes finally get added to your final rendered page.And in your code your are accessing directly checkbox id which is not possible.

    If you add check box out of grid view your code definilty work because final rendered page only contains one check box,but when you add it grid view until you bind data to it one can not predict no of check boxes in it.

    Suyog
    I am just using my free time,but if it helps you then my mark my post as answer
  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 1:47 PM

    i m kind of disagree here because the checkbox i m trying to access is in the HEader of Gridview....It will be only one checkbox...Its not part of rows...

    http://saqdotnet.blogspot.com/
  • Re: Access gridview's Checkbox control in JS

    05-24-2008, 10:23 AM
    • All-Star
      75,773 point All-Star
    • NC01
    • Member since 08-26-2005, 7:33 PM
    • Posts 14,128
    • TrustedFriends-MVPs

    Well, you did not tell us that. The ClientID of the CheckBox (ID to use in client-side functionality) will still be mangled though and that is why your way won't work.

    NC...

     

Page 1 of 1 (11 items)