SelectAll option in Grid Header along with individual group selection

8 posts, 0 answers
  1. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Aug 2008 Link to this post

    Requirements

    RadControls version

    2008.01.0415.20
    .NET version

    2
    Visual Studio version

    2005
    programming language

    C#
    browser support

    all browsers supported by RadControls


     
    PROJECT DESCRIPTION

    This project presents how to add a select/deselect all option for selecting all rows in a grouped Grid by means of a CheckBox residing in the Grid header along with individual group selection. To accomplish this task a CheckBox is added to the Grid header inside the ItemCreated event handler. Set the AutoPostBack property of the CheckBox control to true and intercept the action execution
    in the CheckChanged event of the CheckBox.

    ASPX:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <br /> 
            <div> 
                <telerik:RadGrid ID="RadGrid1" runat="server" AllowMultiRowSelection="true"  DataSourceID="SqlDataSource1" GridLines="None" AutoGenerateColumns="False" OnItemCreated="RadGrid1_ItemCreated" Skin="Hay"
                    <MasterTableView DataSourceID="SqlDataSource1"
                        <RowIndicatorColumn Visible="False"
                            <HeaderStyle Width="20px" /> 
                        </RowIndicatorColumn> 
                        <ExpandCollapseColumn Resizable="False" Visible="False"
                            <HeaderStyle Width="20px" /> 
                        </ExpandCollapseColumn> 
                        <GroupByExpressions> 
                          <telerik:GridGroupByExpression> 
                           <GroupByFields> 
                             <telerik:GridGroupByField FieldName="Country" FieldAlias="Country" /> 
                           </GroupByFields> 
                           <SelectFields> 
                             <telerik:GridGroupByField FieldName="Country" FieldAlias="Country" /> 
                           </SelectFields> 
                          </telerik:GridGroupByExpression> 
                        </GroupByExpressions> 
                        <Columns> 
                            <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID"   DataType="System.Int32" SortExpression="CustomerID" 
                                UniqueName="CustomerID"
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" 
                                UniqueName="CompanyName"
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn DataField="Country" HeaderText="Country" SortExpression="Country" UniqueName="Country"
                            </telerik:GridBoundColumn> 
                        </Columns> 
                        <EditFormSettings> 
                            <PopUpSettings ScrollBars="None" /> 
                        </EditFormSettings> 
                    </MasterTableView> 
                </telerik:RadGrid><br /> 
                <br /> 
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthWindConnectionString %>" 
                    SelectCommand="SELECT [CustomerID], [CompanyName], [Country] FROM [ Customers]"></asp:SqlDataSource> 
                &nbsp;</div> 
        </form> 
    </body> 
    </html> 
     

    C#:
    using System; 
    using System.Data; 
    using System.Configuration; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Web.UI.HtmlControls; 
    using Telerik.Web.UI; 
     
    public partial class _Default : System.Web.UI.Page  
        protected void Page_Load(object sender, EventArgs e) 
        { 
     
        } 
        protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e) 
        { 
            if (e.Item is GridHeaderItem) 
            { 
                GridHeaderItem header = (GridHeaderItem)e.Item; 
                CheckBox headerchkbx = new CheckBox(); 
                headerchkbx.ID = "CheckBox2"
                headerchkbx.AutoPostBack = true
                headerchkbx.CheckedChanged += new EventHandler(headerchkbx_CheckedChanged); 
                header["column"].Controls.Add(headerchkbx); 
     
            } 
            if (e.Item is GridGroupHeaderItem) 
            { 
                GridGroupHeaderItem header = (GridGroupHeaderItem)e.Item; 
                CheckBox groupchkbx = new CheckBox(); 
                groupchkbx.ID = "CheckBox1"
                groupchkbx.AutoPostBack = true
                groupchkbx.CheckedChanged += new EventHandler(groupchkbx_CheckedChanged); 
                header.Controls[0].Controls.Add(groupchkbx); 
            } 
              
        } 
        void headerchkbx_CheckedChanged(object sender, EventArgs e) 
        { 
     
            foreach (GridDataItem item in RadGrid1.MasterTableView.Items) 
            { 
                CheckBox headerchkbx = (CheckBox)sender; 
                foreach (GridGroupHeaderItem groupHeader in RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader)) 
                { 
                    GridItem[] children = groupHeader.GetChildItems(); 
                    CheckBox groupchkbx = (CheckBox)groupHeader.Controls[0].FindControl("CheckBox1"); 
     
                    if (headerchkbx.Checked) 
                    { 
                        item.Selected = true
                        groupchkbx.Checked = true
                    } 
                    else 
                    { 
                        item.Selected = false
                        groupchkbx.Checked = false
                    } 
     
                } 
            } 
        } 
     
        void groupchkbx_CheckedChanged(object sender, EventArgs e) 
        { 
            int chkCount = 0
            foreach (GridGroupHeaderItem groupHeader in RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader)) 
            { 
                GridItem[] children = groupHeader.GetChildItems(); 
     
                CheckBox groupchkbx = (CheckBox)groupHeader.Controls[0].FindControl("CheckBox1"); 
                if ((groupchkbx.Checked)) 
                { 
                    chkCount++; 
                } 
                foreach (GridItem child in children) 
                { 
                    GridDataItem dataItem = child as GridDataItem; 
                    dataItem.Selected = groupchkbx.Checked; 
     
                    foreach (GridHeaderItem item in RadGrid1.MasterTableView.GetItems(GridItemType.Header)) 
                    { 
                        CheckBox headerchkbx = (CheckBox)item["column"].FindControl("CheckBox2"); 
     
                        if ((!groupchkbx.Checked)) 
                        { 
                            headerchkbx.Checked = false
                        } 
                        if (RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader).Length == chkCount) 
                        { 
                            headerchkbx.Checked = true
                        } 
     
                    } 
                } 
            } 
        } 

  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 19 Aug 2008 Link to this post

    Hello Shinu,

    Thank you for posting this solution, for the community.
    Your Telerik points have been updated for your involvement.

    Kind regards,
    Yavor
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 17 Dec 2008 Link to this post

    I'm wondering if there is a way to get the group header row that owns the check box that is checked; parent group header row of the sender in the checked changed event; or somethign like this instead of iterating through all the rows.
  5. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 17 Dec 2008 Link to this post

    Posted too soon.
    What do you think of this?

     

     

    CheckBox cb = (CheckBox)sender;

    foreach (GridGroupHeaderItem groupHeader in gridNewRequest.MasterTableView.GetItems(GridItemType.GroupHeader))

    {

    CheckBox groupchkbx = (CheckBox)groupHeader.Controls[0].FindControl("CheckBox1");

    if (cb.Equals(groupchkbx))

    {

    //do check/ uncheck logic and break out of loop.

    }

    }

    Or you can compare the client ID of the sender with the client iD of the check box from the group header row.

     

  6. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 18 Dec 2008 Link to this post

    I can't seem to figure out how to handle some additional UI quirks.
    If a user selects all using the grid header check and then deselects one, I need to deselect the header check since all items are no longer selected.
    I tried to handle some client events as seen here but the events aren't being hit; at least not by the debugger.
    I think if I can get into that event, I should be able to do similar logic in the javascript as you have presented here for the code behind.
  7. Roger Caro
    Roger Caro avatar
    1 posts
    Member since:
    Nov 2009

    Posted 28 May 2010 Link to this post

    Hi ,
    Is it possible to do the same at client side, I'm trying to select  one row per group , to do this I must get the group header item and all the children, but I dont know if there  is support for group header items at client side

    Thanks in advance
  8. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 07 Jun 2010 Link to this post

    Caro,
    The stuff I posted are client-side examples.

    Regards
  9. Naeem
    Naeem avatar
    1 posts
    Member since:
    Aug 2011

    Posted 31 Oct 2011 Link to this post

    Hi towpse,

    The stuff you posted are client-side good examples but you did not write the client side code as Caro want.
    because i have same issue in rad grid as Caro explain above.
    if you have any update for this scenerio then please post a solution

    Thanks
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017