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

Check Check all checkbox of the current details table in a RadGrid after checking the header checkbox

1 Answer 352 Views

Ajax

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

Shubham asked on 27 Dec 2013, 08:35 AM

Hey I have two details tables in my rad Grid . Now what I have to do is to check/uncheck all the checkboxes of the current detail table only. on checking/unchecking the header checkbox. and also want to check the header checkbox of current detail table only. when I have checked each checkbox of the same detail table

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadGridHierarchyCheckbox.aspx.cs" Inherits="RadGridHierarchyCheckbox" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<script type="text/javascript">
function SetHeaderCheckBox(checkbox)
{
//Select or deselect header check box
}
function SelectAllCheckBox(checkbox)
{
//Select or deselect Detail Table CheckBOXes
}
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" CellSpacing="0" AutoGenerateColumns="False"
GridLines="None" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource" OnDetailTableDataBind="RadGrid1_DetailTableDataBind">

<MasterTableView DataKeyNames="OrderID" HierarchyDefaultExpanded="true" CommandItemDisplay="Top">

<DetailTables>
<telerik:GridTableView DataKeyNames="OrderID" PageSize="3" Name="DetailViewTest">
<Columns>
<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
</telerik:GridBoundColumn>
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
SortExpression="OrderDate" UniqueName="OrderDate">
</telerik:GridDateTimeColumn>
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
FilterControlAltText="Filter Freight column" HeaderText="Freight"
SortExpression="Freight" UniqueName="Freight">
</telerik:GridNumericColumn>
<telerik:GridBoundColumn DataField="ShipName"
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
SortExpression="ShipName" UniqueName="ShipName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ShipCountry"
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
SortExpression="ShipCountry" UniqueName="ShipCountry">
</telerik:GridBoundColumn>
</Columns>
</telerik:GridTableView>
<DetailTables>
<telerik:GridTableView DataKeyNames="OrderID" PageSize="3" Name="DetailViewTest">
<Columns>
<telerik:GridTemplateColumn UniqueName="SelectItemCheckBoxColumn" Resizable="false" Reorderable="false">
<ItemTemplate>
<asp:CheckBox ID="SelectItemCheckBox" runat="server" onclick="return SetHeaderCheckBox(this);" />

</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="SelectHeaderCheckBox" runat="server" onclick="return SelectAllCheckBox(this);" />

</HeaderTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
</telerik:GridBoundColumn>
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
SortExpression="OrderDate" UniqueName="OrderDate">
</telerik:GridDateTimeColumn>
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
FilterControlAltText="Filter Freight column" HeaderText="Freight"
SortExpression="Freight" UniqueName="Freight">
</telerik:GridNumericColumn>
<telerik:GridBoundColumn DataField="ShipName"
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
SortExpression="ShipName" UniqueName="ShipName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ShipCountry"
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
SortExpression="ShipCountry" UniqueName="ShipCountry">
</telerik:GridBoundColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
</DetailTables>
<Columns>
<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
</telerik:GridBoundColumn>
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
SortExpression="OrderDate" UniqueName="OrderDate">
</telerik:GridDateTimeColumn>
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
FilterControlAltText="Filter Freight column" HeaderText="Freight"
SortExpression="Freight" UniqueName="Freight">
</telerik:GridNumericColumn>
<telerik:GridBoundColumn DataField="ShipName"
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
SortExpression="ShipName" UniqueName="ShipName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ShipCountry"
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
SortExpression="ShipCountry" UniqueName="ShipCountry">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</form>
</body>
</html>

1 Answer, 1 is accepted

answered on 02 Jan 2014, 12:32 PM

Selection.zip

Hi Shubham,

Please examine the following code snippet which demonstrates how to achieve the requested behavior.

function SetHeaderCheckBox(checkbox, parentIndex) {

var masterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();

var nestedView = masterTable.get_dataItems()[parentIndex].get_nestedViews()[0];

for (var i = 0; i < nestedView.get_dataItems().length; i++) {

if(!nestedView.get_dataItems()[i].findElement("SelectItemCheckBox").checked)

{

nestedView.HeaderRow.getElementsByTagName('input')[0].checked = false;

return;

}

nestedView.HeaderRow.getElementsByTagName('input')[0].checked = true;

}

function SelectAllCheckBox(checkbox, parentIndex) {

var masterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();

var nestedView = masterTable.get_dataItems()[parentIndex].get_nestedViews()[0];

for (var i = 0; i < nestedView.get_dataItems().length; i++) {

nestedView.get_dataItems()[i].findElement("SelectItemCheckBox").checked = checkbox.checked;

}

Basically you are looping each time through all items and check whether all of them are checked. If they are you will check the header CheckBox also. Otherwise the header CheckBox control will remain unchecked. Additionally I attached a small sample to this forum thread for your reference.

Regards,
Kostadin
Telerik

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 the blog feed now.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Check Check all checkbox of the current details table in a RadGrid after checking the header checkbox

1 Answer, 1 is accepted