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.

     

  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 6:16 AM

    Hi post you code so we can monitor it


    Suyog
    Please click on “Mark as Answer”button if it helps you.
  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 6:20 AM
    • Loading...
    • KashifB
    • Joined on 07-26-2007, 1:41 PM
    • Posts 215

    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

    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
    Please click on “Mark as Answer”button if it helps you.
  • 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>

  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 10:56 AM
    • Loading...
    • NC01
    • Joined on 08-26-2005, 7:33 PM
    • Posts 7,511
    • 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...

  • Re: Access gridview's Checkbox control in JS

    05-23-2008, 1:00 PM
    • Loading...
    • NC01
    • Joined on 08-26-2005, 7:33 PM
    • Posts 7,511
    • 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

    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
    Please click on “Mark as Answer”button if it helps you.
  • 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...

  • Re: Access gridview's Checkbox control in JS

    05-24-2008, 10:23 AM
    • Loading...
    • NC01
    • Joined on 08-26-2005, 7:33 PM
    • Posts 7,511
    • 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)