How to Select all items in a group with a checkbox in the group header - Client Side

[Amit]

Guys,

Apologies if this has been asked before however I've been searching for a while and couldn't find an answer.

I have a RadGrid with grouping. The gird does not posts back when a group is expanded and collapsed. I have checkboxes  for each row in the grid. What i need to achieve is to have a checkbox in header of each group and when that checkbox is checked/unchecked all the items of the group should be checked/unchecked. I wish to accomplish this with client side code. No Post-backs

Any suggestions most appreciated. Thx in advance 

[Shinu]

Hello,

Try the following javascript.
aspx:

<telerik:GridTemplateColumn>
 <HeaderTemplate>
  <asp:CheckBox ID="chkSelectAll" runat="server" onclick="CheckAll(this);" />
</HeaderTemplate>
</telerik:GridTemplateColumn>

JS:

function CheckAll(id)
{
  var masterTable = $find("<%= Radgrid1.ClientID %>").get_masterTableView();
  var row = masterTable.get_dataItems();
  if (id.checked == true)
  {
    for (var i = 0; i < row.length; i++)
   {
      masterTable.get_dataItems()[i].set_selected(true);
   }
  }
  else
  {
   for (var i = 0; i < row.length; i++)
   {
     masterTable.get_dataItems()[i].set_selected(false);
   }
  }
}

Thanks,
Shinu.

[Amit]

Thx for the reply Shinu.. however when we try your code .. we get error :

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)

I'am assuming its because of this line

$find("<%= Radgrid1.ClientID %>")

<%= causes the issue... when we change it to <%# the control is not found in the JavaScript

can you suggest how do we deal with this..

[Amit]

Okay .. we have overcome the problem of <%=  by using RadCodeBlock .. now next prb :)

Following Line is returning NULL and I'm not able to work out why ,, any ideas ?

var masterTable = $find("RadGrid1").get_masterTableView();

[Amit]

Guys and Idea .. ?

I thought this was a very responsive forum ..

[Shinu]

Hi,

I am pasting the entire code that I tried which worked as expected.
aspx:

<telerik:RadGrid AllowSorting="true"  ID="RadGrid1" runat="server"  AutoGenerateColumns="false" OnNeedDataSource="approval_NeedDataSource" >
 <MasterTableView>
   <GroupByExpressions>
        <telerik:GridGroupByExpression>
             <SelectFields>
                <telerik:GridGroupByField FieldName="FirstName" />
              </SelectFields>
              <GroupByFields>
                  <telerik:GridGroupByField FieldName="FirstName"  />
               </GroupByFields>
        </telerik:GridGroupByExpression>
   </GroupByExpressions>
 <Columns>
  <telerik:GridBoundColumn  DataField="EmployeeID" UniqueName="ProductID" HeaderText="EmployeeID"></telerik:GridBoundColumn>
  <telerik:GridBoundColumn DataField="FirstName" UniqueName="FirstName" HeaderText="FirstName"></telerik:GridBoundColumn>
  <telerik:GridTemplateColumn>
   <HeaderTemplate>
    <asp:CheckBox ID="chkSelectAll" runat="server" onclick="CheckAll(this);" />
   </HeaderTemplate>
  </telerik:GridTemplateColumn>
 </Columns>
</MasterTableView>
</telerik:RadGrid>

JS:

function CheckAll(id)
{
  var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
  var row = masterTable.get_dataItems();
  if (id.checked == true)
  {
    for (var i = 0; i < row.length; i++)
   {
      masterTable.get_dataItems()[i].set_selected(true);
   }
  }
  else
  {
   for (var i = 0; i < row.length; i++)
   {
     masterTable.get_dataItems()[i].set_selected(false);
   }
  }
}

Thanks,
Shinu.

[Amit]

Thx Shinu,

Will try and get back to you .

[Ali]

The "CheckAll" functions selects all the items in the MasterTable. How can you only select all the items in the specific group checked?

[Tsvetina]

Hello Amit,

You can use a GroupHeaderTemplate to declare a CheckBox and on clicking it select all items until the next group header. You can find a sample implementation in the attached project.
Additionally, in order to display the rest of the required data for the group header, you can use an approach similar to this demo:
Grid Group Header and Footer Templates

Regards,
Tsvetina
the Telerik team

[Amit]

Tsvetina Thx,

will give it a try and let you know if it works .. appreciate your help