This is a migrated thread and some comments may be shown as answers.

Using GridCheckBoxColumn in a radgrid

13 Answers 473 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tony Abou-Akl
Top achievements
Rank 1
Tony Abou-Akl asked on 17 Jul 2009, 02:51 PM
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

13 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 20 Jul 2009, 05:04 AM
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.
0
Tony Abou-Akl
Top achievements
Rank 1
answered on 20 Jul 2009, 03:16 PM
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  
0
Shinu
Top achievements
Rank 1
answered on 21 Jul 2009, 06:55 AM
Hi Tony,

Could you please send your entire aspx page.

Shinu
0
Tony Abou-Akl
Top achievements
Rank 1
answered on 22 Jul 2009, 01:49 PM
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
0
Daniel
Telerik team
answered on 23 Jul 2009, 12:07 PM
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.
0
Tony Abou-Akl
Top achievements
Rank 1
answered on 27 Jul 2009, 08:41 PM
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

0
Princy
Top achievements
Rank 1
answered on 28 Jul 2009, 05:48 AM
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.
0
Arun Kumar
Top achievements
Rank 1
answered on 17 Dec 2009, 11:18 AM
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
0
Daniel
Telerik team
answered on 18 Dec 2009, 09:59 PM
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.
0
Rajat
Top achievements
Rank 1
answered on 29 Feb 2012, 11:28 AM
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.
0
Daniel
Telerik team
answered on 05 Mar 2012, 09:21 AM
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.
0
Daniel
Top achievements
Rank 1
answered on 04 Apr 2019, 09:16 PM

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

0
Attila Antal
Telerik team
answered on 12 Apr 2019, 09:51 AM
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.
Tags
Grid
Asked by
Tony Abou-Akl
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Tony Abou-Akl
Top achievements
Rank 1
Daniel
Telerik team
Princy
Top achievements
Rank 1
Arun Kumar
Top achievements
Rank 1
Rajat
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or