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

    Posted 21 Aug 2008 Link to this post


    RadControls version

    .NET version

    Visual Studio version

    programming language

    C#, Javascript
    browser support

    all browsers supported by RadControls

    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> 
    <script type="text/javascript" language="javascript" > 
      function Expand(strText) 
          var Hidden1document.getElementById("Hidden1");   
         __doPostBack('<%=RadGrid1.ClientID %>'); 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
                <telerik:RadGrid ID="RadGrid1" runat="server"  DataSourceID="SqlDataSource1" 
                    GridLines="None" Skin="Hay" OnItemDataBound="RadGrid1_ItemDataBound" OnPreRender="RadGrid1_PreRender"
                    <MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
                            <telerik:GridGroupByField  FieldAlias="Country" FieldName="Country" /> 
                            <telerik:GridGroupByField FieldAlias="Country" FieldName="Country" /> 
                        <RowIndicatorColumn Visible="False"
                            <HeaderStyle Width="20px" /> 
                        <ExpandCollapseColumn Resizable="False" Visible="False"
                            <HeaderStyle Width="20px" /> 
                            <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID" 
                            <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" 
                            <telerik:GridBoundColumn DataField="Country" HeaderText="Country" SortExpression="Country" 
                            <PopUpSettings ScrollBars="None" /> 
                <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" />  

    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
    Veli avatar
    2002 posts

    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,
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 17 Sep 2009 Link to this post


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

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

    Grz, Erik

  4. Veli
    Veli avatar
    2002 posts

    Posted 18 Sep 2009 Link to this post


    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; 

    Kind regards,
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Ville
    Ville 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:

     ExpandMe(n) {

    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. Brandon
    Brandon 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. IUswimmer
    IUswimmer avatar
    44 posts
    Member since:
    Jul 2012

    Posted 17 Jul 2013 Link to this post

    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:
    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

    function ExpandGroup(n) {

    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