Using GridCheckBoxColumn in a radgrid

[Tony Abou-Akl]

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

[Shinu]

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.

[Tony Abou-Akl]

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  

[Shinu]

Hi Tony,

Could you please send your entire aspx page.

Shinu

[Tony Abou-Akl]

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

[Daniel]

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.

[Tony Abou-Akl]

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

[Princy]

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.

[Arun Kumar]

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

[Daniel]

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.

[Rajat]

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.

[Daniel]

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

[Daniel]

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

[Attila Antal]

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