ExpandCollapseGroupedGridOnDoubleClickingTheGroupHeader

Thread is closed for posting
7 posts, 1 answers
  1. FD4BB7E9-09DE-4645-AF12-498D9617F195
    FD4BB7E9-09DE-4645-AF12-498D9617F195 avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Aug 2008 Link to this post

    Requirements

    RadControls version

    2008.01.0415.20
    .NET version

    2.0
    Visual Studio version

    2005
    programming language

    C#, Javascript
    browser support

    all browsers supported by RadControls


     
    PROJECT DESCRIPTION
    This project illustrates how to expand/collapse grouped items in RadGrid on double clicking the Group header. The task is achieved by adding an onDblClick client event on the GridGroupHeader and performing a PostBack from the client side. Then on the server side switch the expanded state of the GroupHeader.


    <%@ 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> 
    <script type="text/javascript" language="javascript" > 
      function Expand(strText) 
        {   
          var Hidden1document.getElementById("Hidden1");   
          Hidden1.value=strText
         __doPostBack('<%=RadGrid1.ClientID %>'); 
         } 
    </script> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <div> 
                <telerik:RadGrid ID="RadGrid1" runat="server"  DataSourceID="SqlDataSource1" 
                    GridLines="None" Skin="Hay" OnItemDataBound="RadGrid1_ItemDataBound" OnPreRender="RadGrid1_PreRender"
                    <MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
                        <GroupByExpressions> 
                         <telerik:GridGroupByExpression> 
                           <GroupByFields> 
                            <telerik:GridGroupByField  FieldAlias="Country" FieldName="Country" /> 
                           </GroupByFields> 
                           <SelectFields> 
                            <telerik:GridGroupByField FieldAlias="Country" FieldName="Country" /> 
                           </SelectFields> 
                         </telerik:GridGroupByExpression> 
                        </GroupByExpressions> 
                        <RowIndicatorColumn Visible="False"
                            <HeaderStyle Width="20px" /> 
                        </RowIndicatorColumn> 
                        <ExpandCollapseColumn Resizable="False" Visible="False"
                            <HeaderStyle Width="20px" /> 
                        </ExpandCollapseColumn> 
                        <Columns> 
                            <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" 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> 
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthWindConnectionString %>" 
                    SelectCommand="SELECT [CustomerID], [CompanyName], [Country] FROM [Customers]"></asp:SqlDataSource> 
                
               <input id="Hidden1" name="Hidden1" runat="server" type="hidden" />  
                
            </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_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e) 
        { 
            if (e.Item is GridGroupHeaderItem) 
            { 
                GridGroupHeaderItem GroupHeader = (GridGroupHeaderItem)e.Item; 
                string strText = GroupHeader.DataCell.Text; 
                GroupHeader.Attributes.Add("onDblClick ", "return Expand('" + strText + "');"); 
            } 
        } 
        protected void RadGrid1_PreRender(object sender, EventArgs e) 
        { 
            foreach (GridGroupHeaderItem GroupHeader in RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader)) 
            { 
                GroupHeader.Controls[0].Visible = false
     
                if (GroupHeader.DataCell.Text == Hidden1.Value) 
                { 
     
                    GroupHeader.Expanded = !GroupHeader.Expanded; 
                } 
            } 
            
        } 

  2. Answer
    CF04F382-A994-4C3A-93EE-FED28AC8E0EC
    CF04F382-A994-4C3A-93EE-FED28AC8E0EC avatar
    2002 posts
    Member since:
    Mar 2023

    Posted 25 Aug 2008 Link to this post

    Hi Shinu,

    Thank you for submitting your sample code and for your active participation in the Telerik community, we appreciate your involvement. Your Telerik points have been updated.

    Kind regards,
    Veli
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. C3B016CF-D7C3-4D97-A541-50335AE3A574
    C3B016CF-D7C3-4D97-A541-50335AE3A574 avatar
    314 posts
    Member since:
    Feb 2008

    Posted 17 Sep 2009 Link to this post

    Hi,

    I've encoutered a error due to asp.net's renaming of server controls. 

    In the script line of the JS function Expand, I changed the first line
    var Hidden1document.getElementById("Hidden1"); 

    in:
    var Hidden1document.getElementById("<%=Hidden1.ClientID %>"); 

    Grz, Erik

  4. CF04F382-A994-4C3A-93EE-FED28AC8E0EC
    CF04F382-A994-4C3A-93EE-FED28AC8E0EC avatar
    2002 posts
    Member since:
    Mar 2023

    Posted 18 Sep 2009 Link to this post

    Hi,

    One drawback of using group header text to identify the item is that the group header text does not ensure uniqueness.  Hypothetically, there might be two or more group header items with the same text, for example, when you modify the text yourself.

    Attached is a sample page demonstrating another approach for expanding group headers on double click. We now use GridGroupHeaderItem's UniqueID property to uniquely identify the group header:

    void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) 
        if (e.Item is GridGroupHeaderItem) 
        { 
            e.Item.Attributes.Add("onDblClick ""return Expand('" + e.Item.UniqueID + "');"); 
        }  

    On the client, we pass RadGrid's UniqueID to __doPostBack(), so we have:

    function Expand(uniqueId)  
        __doPostBack('<%=RadGrid1.UniqueID %>', uniqueId); 
    }  

    In Page_Load event of the page, we check the __EVENTTARGET and __EVENTARGUMENT request parameters, and record the unique ID of the group header to toggle:

    protected void Page_Init(object sender, EventArgs e) 
        RadGrid1.NeedDataSource += new GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource); 
        RadGrid1.ItemCreated += new GridItemEventHandler(RadGrid1_ItemCreated); 
        RadGrid1.PreRender += new EventHandler(RadGrid1_PreRender); 
     
        string eventTarget = Request.Params.Get("__EVENTTARGET"); 
        string eventArgument = Request.Params.Get("__EVENTARGUMENT"); 
        if (eventTarget == RadGrid1.UniqueID) 
        { 
            toggledItemUniqueID = eventArgument; 
        } 
     
    string toggledItemUniqueID = string.Empty; 

    Finally, RadGrid's PreRender event is used to check if we have a group header to toggle, loop over the group headers and toggle the one with the matching unique ID:

    void RadGrid1_PreRender(object sender, EventArgs e) 
        if (toggledItemUniqueID != string.Empty) 
        { 
            foreach (GridGroupHeaderItem GroupHeader in RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader)) 
            { 
                if (GroupHeader.UniqueID == toggledItemUniqueID) 
                { 
                    GroupHeader.Expanded = !GroupHeader.Expanded; 
                    break
                } 
            } 
        } 

    Kind regards,
    Veli
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. BA58619E-8C54-42DA-92DB-BCB21A724012
    BA58619E-8C54-42DA-92DB-BCB21A724012 avatar
    18 posts
    Member since:
    Apr 2010

    Posted 05 Apr 2012 Link to this post

    Here is another simple approach using client side jQuery to search for child objects:

    function
     ExpandMe(n) {
    $(n).children()[0].children[0].click();
    }

    code behind:

    Protected Sub RadGrid1_ItemDataBound(ByVal sender As ObjectByVal e As GridItemEventArgs)
            If TypeOf e.Item Is GridGroupHeaderItem Then
                Dim headerItem As GridGroupHeaderItem = e.Item
                headerItem.Attributes.Add("onclick""ExpandMe(this); return false;")
            End If
    End Sub
  6. D1933D35-7AAC-4646-AB19-1D622C06E763
    D1933D35-7AAC-4646-AB19-1D622C06E763 avatar
    1 posts
    Member since:
    Aug 2008

    Posted 22 Mar 2013 Link to this post

    Ville, thanks for much for posting the above snippet. It is so much simpler than the other solutions I found, and did exactly what I needed.
  7. BFFBBEC9-CD47-4FD2-A716-4235465090E5
    BFFBBEC9-CD47-4FD2-A716-4235465090E5 avatar
    44 posts
    Member since:
    Jul 2012

    Posted 17 Jul 2013 Link to this post

    @Ville: 
    I found this solution works, but with limitations: does not work on sub-groups (just the first level groupbyexpression) and the expand/collapse icon no longer works.  I'm looking for a client-side solution that will work for all levels of grouping as well as retain the functionality of the expand/collapse icon.  

    Code I 'm using is:
    _ItemDataBound
    If TypeOf e.Item Is GridGroupHeaderItem Then
         Dim item As GridGroupHeaderItem = CType(e.Item, GridGroupHeaderItem)
         item.Attributes.Add("onclick", "ExpandGroup(this); return false;")
    End If

    javascript
    function ExpandGroup(n) {
            $telerik.$(n).children()[0].children[0].click();
        }

    I can add the script code to the expand/collapse button, but it only works for the first-level grouping and throws and exception when trying to expand the subgroups: (also located in the _ItemDataBound event)
    If item.Cells.Count > 0 _
         AndAlso item.Cells(0).Controls.Count > 0 _
         AndAlso TypeOf (item.Cells(0).Controls(0)) Is Button Then
              Dim btn As New Button
              btn = item.Cells(0).Controls(0)
              btn.Attributes.Add("onclick", "ExpandGroup(this); return false;")
    End If


Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.