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

10 posts, 0 answers
  1. Amit
    Amit avatar
    7 posts
    Member since:
    Jul 2012

    Posted 13 Jul 2012 Link to this post

    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 
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Amit
    Amit avatar
    7 posts
    Member since:
    Jul 2012

    Posted 13 Jul 2012 Link to this post

    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..
  5. Amit
    Amit avatar
    7 posts
    Member since:
    Jul 2012

    Posted 14 Jul 2012 Link to this post

    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();

  6. Amit
    Amit avatar
    7 posts
    Member since:
    Jul 2012

    Posted 16 Jul 2012 Link to this post

    Guys and Idea .. ?

    I thought this was a very responsive forum ..
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Jul 2012 Link to this post

    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.
  8. Amit
    Amit avatar
    7 posts
    Member since:
    Jul 2012

    Posted 16 Jul 2012 Link to this post

    Thx Shinu,

    Will try and get back to you .
  9. Ali
    Ali avatar
    24 posts
    Member since:
    Apr 2010

    Posted 30 Aug 2012 Link to this post

    The "CheckAll" functions selects all the items in the MasterTable. How can you only select all the items in the specific group checked?
  10. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 04 Sep 2012 Link to this post

    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.
  11. Amit
    Amit avatar
    7 posts
    Member since:
    Jul 2012

    Posted 04 Sep 2012 Link to this post

    Tsvetina Thx,

    will give it a try and let you know if it works .. appreciate your help
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017