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

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

9 Answers 344 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Amit
Top achievements
Rank 1
Amit asked on 13 Jul 2012, 11:21 AM
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 

9 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 13 Jul 2012, 11:42 AM
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.
0
Amit
Top achievements
Rank 1
answered on 13 Jul 2012, 02:32 PM
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..
0
Amit
Top achievements
Rank 1
answered on 14 Jul 2012, 10:44 AM
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();

0
Amit
Top achievements
Rank 1
answered on 16 Jul 2012, 08:47 AM
Guys and Idea .. ?

I thought this was a very responsive forum ..
0
Shinu
Top achievements
Rank 2
answered on 16 Jul 2012, 09:57 AM
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.
0
Amit
Top achievements
Rank 1
answered on 16 Jul 2012, 10:06 AM
Thx Shinu,

Will try and get back to you .
0
Ali
Top achievements
Rank 1
answered on 30 Aug 2012, 07:04 AM
The "CheckAll" functions selects all the items in the MasterTable. How can you only select all the items in the specific group checked?
0
Tsvetina
Telerik team
answered on 04 Sep 2012, 05:03 AM
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
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
Amit
Top achievements
Rank 1
answered on 04 Sep 2012, 06:53 AM
Tsvetina Thx,

will give it a try and let you know if it works .. appreciate your help
Tags
Grid
Asked by
Amit
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Amit
Top achievements
Rank 1
Ali
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or