Using GridCheckBoxColumn in a radgrid

14 posts, 0 answers
  1. Tony Abou-Akl
    Tony Abou-Akl avatar
    20 posts
    Member since:
    May 2009

    Posted 17 Jul 2009 Link to this post

    Hi there

    i'm trying to execute a javascript code when i check or uncheck a the GridCheckBoxColumn in a grid.

    I have 2 checkboxes and when i check the first one i want to make the other check bot read only attribute = false

    thanks in advance
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Jul 2009 Link to this post

    Hi Tony,

    I guess you are trying to enable/disable the CheckBox of a GridCheckBoxColumn depending on the another CheckBoxColumn. The CheckBox of a GridCheckBoxColumn is disabled in the normal mode and will be enabled only in the Edit mode. But you can achieve the desired scenario using a GridTemplateColumn with CheckBox in its ItemTemplate. Here is a sample code which I tried on my end.

    ASPX:
     
       <telerik:GridTemplateColumn UniqueName="TempCol1"  HeaderText="TempCol1"  > 
                 <ItemTemplate> 
                     <asp:CheckBox ID="CheckBox1" runat="server" onclick="Check(this);"  /> 
                 </ItemTemplate> 
               </telerik:GridTemplateColumn> 
               <telerik:GridTemplateColumn UniqueName="TempCol2"  HeaderText="TempCol2"  > 
                 <ItemTemplate> 
                     <asp:CheckBox ID="CheckBox2" runat="server"  /> 
                 </ItemTemplate> 
               </telerik:GridTemplateColumn> 

    JS:
     
    <script type="text/javascript" > 
     function Check(CheckBox1) 
     { 
       
      var rowIndex=CheckBox1.parentNode.parentNode.sectionRowIndex; 
      var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); 
      var ctl=masterTable.get_dataItems()[rowIndex].findElement("CheckBox2"); 
      if(CheckBox1.checked) 
       ctl.disabled=false
      else 
       ctl.disabled=true
      
     } 
    </script> 


    Thanks
    Shinu.
  3. Tony Abou-Akl
    Tony Abou-Akl avatar
    20 posts
    Member since:
    May 2009

    Posted 20 Jul 2009 Link to this post

    hi Shinu

    I did the following code and i did get an error when clicking on the check box. Object Required. I have this grid control inside another grid.

    Thanks 
    tony  
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Jul 2009 Link to this post

    Hi Tony,

    Could you please send your entire aspx page.

    Shinu
  5. Tony Abou-Akl
    Tony Abou-Akl avatar
    20 posts
    Member since:
    May 2009

    Posted 22 Jul 2009 Link to this post

    Hi Shinu

    I tried the code again and it didn't give me any error but the problem i have now is that it doesn't work in IE8 browser but it works fine in Mozzilla firefox. In IE 8 when i check or uncheck the first check box the other checkbox stays disabled. Do you know if this works on IE8.
    Please let me know if still need the aspx code

    Thanks

    Tony
  6. Daniel
    Admin
    Daniel avatar
    4949 posts

    Posted 23 Jul 2009 Link to this post

    Hello Tony,

    Please try the following modification:
    <telerik:GridTemplateColumn UniqueName="TempCol1" HeaderText="TempCol1"
        <ItemTemplate> 
            <input type="checkbox" id="CheckBox1" runat="server" onclick="Check(this);" /> 
        </ItemTemplate> 
    </telerik:GridTemplateColumn> 
    <telerik:GridTemplateColumn UniqueName="TempCol2" HeaderText="TempCol2"
        <ItemTemplate> 
            <input type="checkbox" id="CheckBox2" runat="server" disabled="disabled" /> 
        </ItemTemplate> 
    </telerik:GridTemplateColumn> 

    <script type="text/javascript"
        function Check(CheckBox1) 
        { 
            var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView(); 
            var ctl = $telerik.findElement(CheckBox1.parentNode.parentNode, "CheckBox2"); 
            ctl.disabled = !CheckBox1.checked; 
        }  
    </script> 

    I hope this helps,

    Regards
    Daniel
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. Tony Abou-Akl
    Tony Abou-Akl avatar
    20 posts
    Member since:
    May 2009

    Posted 27 Jul 2009 Link to this post

    Hi there

    in the same scenario I have a hidden colum custid, I'm trying to get the value of this colum when i check or uncheck the check box
    My code is below.

     

    <telerik:GridBoundColumn DataField="CustID" DataType="System.String"

     

     

    EmptyDataText="&amp;nbsp;" HeaderText="CustID" ReadOnly="True"

     

     

    SortExpression="CustID" UniqueName="CustID" Visible="false">

     

     

    </telerik:GridBoundColumn>

    function

     

    Check(CheckBox1) {

     

     

    var rowIndex = CheckBox1.parentNode.parentNode.sectionRowIndex;

     

     

    var masterTable = $find("<%# radgrid.ClientID %>").get_masterTableView();

     

     

    var firstDataItem = masterTable.get_dataItems()[0];

     

     

    var keyValues = firstDataItem.getDataKeyValue("CustID");

     

    alert(keyValues);

     

    }

    Please help Thanks

  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 Jul 2009 Link to this post

    Hello Tony,

    Try out the following code to retrieve the datakeyvalue for that row on which the checkbox was clicked:
    js:
     function Check(CheckBox1)  
        {         
            var id1 = CheckBox1.parentNode.parentElement.id; 
            var index = id1.lastIndexOf('_'); 
            var rowIndex = id1.substr(index + 1,id1.length); 
     
            var masterTable = $find("<%= radGrid.ClientID %>").get_masterTableView();  
            var firstDataItem = masterTable.get_dataItems()[rowIndex]; 
            var keyValues = firstDataItem.getDataKeyValue("CustID"); 
            alert(keyValues); 
        } 

    Thanks
    Princy.
  9. Arun Kumar
    Arun Kumar avatar
    3 posts
    Member since:
    Apr 2009

    Posted 17 Dec 2009 Link to this post

    Hi Daniel,

    This Javascript code works fine for only the first item in the Grid and it does not enable the other items in the Grid. Can you please help me get this working for all the items in a particular page in the Radgrid.

    Thanks,
    Arun
  10. Daniel
    Admin
    Daniel avatar
    4949 posts

    Posted 18 Dec 2009 Link to this post

    Hello Arun,

    You can traverse through all checkboxes that contain CheckBox2 in the ID:
    <script type="text/javascript">
        function disableAll()
        {
            var masterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
            var inputs = masterTable.get_element().getElementsByTagName("INPUT");
      
            for (var inum = 0; inum < inputs.length; inum++)
            {
                var curInp = inputs[inum];
                if (curInp.id.indexOf("CheckBox2") != -1 && curInp.type.toLowerCase() == "checkbox")
                    curInp.disabled = true;
            }
        }   
    </script>

    Best regards,
    Daniel
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. Rajat
    Rajat avatar
    4 posts
    Member since:
    Sep 2012

    Posted 29 Feb 2012 Link to this post

    I would like to implement a tri-state checkbox where the parent node would be unchecked if no children are checked, checked if all childre are checked, and grayed out if some children are checked.  Can you tell me how i would implement tri-state functionality in RadGrid using GridCheckBoxColumn.

    Please help.
  12. Daniel
    Admin
    Daniel avatar
    4949 posts

    Posted 05 Mar 2012 Link to this post

    Hello,

    We do not have tri-state checkboxes outisde RadTreeView but you could implement the desired functionality using GridTemplateColumn. Put your tri-state checkboxes in the ItemTemplate and the HeaderTemplate and wire them in the code-behind. I would not recommend that you trying to use the built-in GridCheckBoxColumn for this custom scenario.

    Regards,
    Daniel
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  13. Daniel
    Daniel avatar
    9 posts
    Member since:
    Jul 2014

    Posted 04 Apr in reply to Daniel Link to this post

    Hi

    I see this question asked in 2012: is there some evolution on this question in the current Telerik ASP.NET Grid for that ?

    More generaly, I would like to build something that seems obvious but I didn't found any demo related to the following case:

    A grid with a Master table and a detail table + be able to choose the entry from the master table that will select all the entries from the nasted detail grid + be able to select only some of the entries from one or more the nasted grids...

    Would you have a Demo showing something near to that ? Somthing that shows how it could work and how to navigate through the selected items in the nasted grids.

    Thanks a lot

  14. Attila Antal
    Admin
    Attila Antal avatar
    376 posts

    Posted 12 Apr Link to this post

    Hi Daniel,

    Since we not every possible scenario is covered with a demo sample, we have created a How-To article for this one. Check it out at Check CheckBoxes of DetailTables using the CheckBox from the MasterTable row in hierarchical RadGrid. Even if this article doesn't necessarily resembles the exact scenario, it could give you an idea of how such functionality can be achieved using either client-side or  server-side programming.

    Kind regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top