Grid Grouping clicking on text

4 posts, 0 answers
  1. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 02 Apr 2010 Link to this post

    Based on the screenshot below, is it possible to make the header(highlighted) to be click-able to expand/collapse the grouping?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Apr 2010 Link to this post


    Here is the code library which illustrates how to expand/collapse grouped items in RadGrid on double clicking the Group header. Use the same logic and add onclick event instead of onDblClick to GroupHeader to achieve the reuired functionality.

    Hope this help you in getting started,


  3. DevCraft R3 2016 release webinar banner
  4. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 07 Apr 2010 Link to this post

    Hi, I tried the logic on my test page here:

    However, when I click, others header's text disappear.
    Is there anything I can do to fix this?

    My aspx:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="news_test.aspx.vb" Inherits="news_test" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
    <html xmlns="">  
    <head > 
         <link rel="stylesheet" type="text/css" href="Skins/news/Grid.Telerik.css" /> 
        <link href="Skins/news/Slider.Telerik.css" rel="stylesheet" type="text/css" /> 
        <link href="Skins/news/ComboBox.Telerik.css" rel="stylesheet" type="text/css" /> 
        <script src="jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
         <script type="text/javascript">  
           $(document).ready(function() {  
           function goToByScroll(id) {  
               $('html,body').animate({ scrollTop: $("#" + id).offset().top -35 }, 'slow');  
           function Expand(uniqueId) {  
               __doPostBack('<%=gn.UniqueID %>', uniqueId);  
        <form id="form1" runat="server">  
        <telerik:radscriptmanager runat="server"></telerik:radscriptmanager> 
        <telerik:radajaxpanel runat="server" LoadingPanelID="lp" > 
        <telerik:RadGrid PageSize="10" EnableEmbeddedSkins="false" border="0" ID="gn" ShowGroupPanel="false"  runat="server" AllowPaging="True" 
                AllowSorting="True" useembeddedscript="false" Skin="Telerik" Width="99%" showheader="false" CellPadding="5" 
                GridLines="None" UseEmbeddedScripts="False">  
                <ClientSettings AllowGroupExpandCollapse="True" /> 
                 <pagerstyle position="Top" mode="Slider"/>  
                <MasterTableView DataKeyValue="articleID" AutoGenerateColumns="False" GridLines="None" GroupLoadMode="Client" GroupsDefaultExpanded ="false">  
                                <telerik:GridGroupByField FieldAlias="Caption" FieldName="Caption"></telerik:GridGroupByField> 
         SortOrder="Descending" /> 
       <telerik:GridGroupByField FieldName="id" /> 
                        No Issue Found</NoRecordsTemplate> 
                    <RowIndicatorColumn Visible="False">  
                        <HeaderStyle Width="20px"></HeaderStyle> 
                        <telerik:GridTemplateColumn UniqueName="Caption" SortExpression="Caption" HeaderText="">  
                            <HeaderStyle HorizontalAlign="left" /> 
                                <%#DataBinder.Eval(Container, "DataItem.article_content")%> 
            <telerik:RadAjaxLoadingPanel id="lp" Runat="server" height="1000" width="1000">  
            <img src="images/load.gif" width="90" height="90" style="margin-top: 150px;" /> 

    My vb code:
    Imports System.Data  
    Imports System.Data.OleDb  
    Imports System.Data.SqlClient  
    Imports Telerik.Web.UI  
    Partial Class news_test  
        Inherits System.Web.UI.Page  
        Sub gn_PreRender(ByVal sender As ObjectByVal e As EventArgs) Handles gn.PreRender  
            If toggledItemUniqueID <> String.Empty Then 
                For Each GroupHeader As GridGroupHeaderItem In gn.MasterTableView.GetItems(GridItemType.GroupHeader)  
                    If GroupHeader.UniqueID = toggledItemUniqueID Then 
                        GroupHeader.Expanded = Not GroupHeader.Expanded  
                        Exit For 
                    End If 
            End If 
        End Sub 
        Private toggledItemUniqueID As String = String.Empty  
        Protected Sub Page_Init(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Init  
            ' gn.ItemCreated += New GridItemEventHandler(gn_ItemCreated)  
            ' gn.PreRender += New EventHandler(gn_PreRender)  
            Dim eventTarget As String = Request.Params.[Get]("__EVENTTARGET")  
            Dim eventArgument As String = Request.Params.[Get]("__EVENTARGUMENT")  
            If eventTarget = gn.UniqueID Then 
                toggledItemUniqueID = eventArgument  
            End If 
        End Sub 
        Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load  
            If Not Page.IsPostBack Then 
                If Request.QueryString("id") <> "" Then 
                    Dim mclas As ExodusG2.dbOps = New ExodusG2.dbOps  
                    Dim ssql As String = "SELECT id, article_content, cms.ParentID, cms.Caption, cms.URL, cms.livedate, articles.news_location,cms.articleID FROM cms INNER JOIN articles ON cms.articleID = articles.articleID   WHERE articles.articleID = @param1" 
                    Dim alin As ArrayList = New ArrayList  
                    Dim dt As DataTable = New DataTable  
                    dt = GetDataTableParam(ssql, alin)  
                    ViewState("caption") = dt.Rows(0)("caption")  
                End If 
            End If 
        End Sub 
        Protected Sub gN_NeedDataSource(ByVal source As ObjectByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles gn.NeedDataSource  
            Dim mClas As ExodusG2.dbOps = New ExodusG2.dbOps  
            Dim dt As DataTable = New DataTable  
            Dim row As DataRow  
            Dim rowNew As DataRow  
            Dim sSql As String 
            sSql = "SELECT id, article_content, cms.ParentID, cms.Caption, cms.URL, cms.livedate, articles.news_location,cms.articleID FROM cms INNER JOIN articles ON cms.articleID = articles.articleID WHERE (((cms.ParentID)=10) AND ((cms.visibility)=1)) ORDER BY cms.livedate DESC" 
            dt = GetDataTable(sSql)  
            gN.DataSource = dt  
        End Sub 
        Protected Sub gN_itembound(ByVal sender As ObjectByVal e As Telerik.Web.UI.GridItemEventArgs) Handles gN.ItemDataBound  
            If TypeOf e.Item Is GridGroupHeaderItem Then 
                Dim item As GridGroupHeaderItem = DirectCast(e.Item, GridGroupHeaderItem)  
                Dim groupDataRow As DataRowView = DirectCast(e.Item.DataItem, DataRowView)  
                Dim str As String = item.DataCell.Text  
                str = str.Replace("Caption:""")  
                item.DataCell.Text = "" 
                Dim lname As New Label  
                lname.Text = str  
                If Request.QueryString("id") <> "" Then 
                    If ViewState("caption").ToString.Replace(" """) = str.Replace(" """Then 
                        item.Expanded = True 
                        lname.Text = "<a name=""anchorTarget"" id=""bottom"" ></a><strong>" & str & "</strong>" 
                    End If 
                End If 
            End If 
        End Sub 
        Sub LoadNews()  
            Dim ssql As String 
            Dim dt As DataTable  
            ssql = "SELECT  cms.ParentID, cms.Caption, cms.URL, cms.livedate, articles.news_location, cms.articleID, articles.article_content, cms.ID FROM cms INNER JOIN articles ON cms.articleID = articles.articleID WHERE (((cms.ParentID)=10) AND ((cms.visibility)=1))   ORDER BY cms.livedate DESC" 
            dt = GetDataTable(ssql)  
            'If dt.Rows.Count > 0 Then  
            '    rp_news.DataSource = dt  
            '    rp_news.DataBind()  
            'End If  
        End Sub 
        Public Function GetDataTableParam(ByVal query As StringByVal params As ArrayList) As DataTable  
            Dim i As Integer = 0  
            If System.Configuration.ConfigurationManager.ConnectionStrings("MM_CONNECTION_STRING_SWIRL").ProviderName.ToString = "System.Data.OleDb" Then 
                Dim myConn As OleDbConnection = New OleDbConnection(System.Configuration.ConfigurationManager.ConnectionStrings("MM_CONNECTION_STRING_SWIRL").ToString)  
                Dim adapter1 As New OleDbDataAdapter  
                Dim OLEDBCOMMAND As OleDbCommand = New OleDbCommand(query, myConn)  
                With OLEDBCOMMAND.Parameters  
                    For i = 0 To params.Count - 1  
                        .Add(New System.Data.OleDb.OleDbParameter("@param" & i + 1, params(i)))  
                End With 
                adapter1.SelectCommand = OLEDBCOMMAND  
                Dim dt As DataTable = New DataTable  
                Return dt  
                Dim myConnSQL As SqlConnection = New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("MM_CONNECTION_STRING_SWIRL").ToString)  
                Dim adapter1SQL As New SqlDataAdapter  
                'adapter1SQL.SelectCommand = New SqlCommand(query, myConnSQL)  
                Dim mySQLCOMMAND As SqlCommand = New SqlCommand(query, myConnSQL)  
                With mySQLCOMMAND.Parameters  
                    For i = 0 To params.Count - 1  
                        .Add(New System.Data.SqlClient.SqlParameter("@param" & i + 1, params(i)))  
                End With 
                adapter1SQL.SelectCommand = mySQLCOMMAND  
                Dim dtsql As DataTable = New DataTable  
                Return dtsql  
            End If 
        End Function 
        Public Function GetDataTable(ByVal query As StringAs DataTable  
            If System.Configuration.ConfigurationManager.ConnectionStrings("MM_CONNECTION_STRING_SWIRL").ProviderName.ToString = "System.Data.OleDb" Then 
                Dim myConn As OleDbConnection = New OleDbConnection(System.Configuration.ConfigurationManager.ConnectionStrings("MM_CONNECTION_STRING_SWIRL").ToString)  
                Dim adapter1 As New OleDbDataAdapter  
                adapter1.SelectCommand = New OleDbCommand(query, myConn)  
                Dim table1 As New DataTable  
                End Try 
                Return table1  
                Dim myConnSQL As SqlConnection = New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("MM_CONNECTION_STRING_SWIRL").ToString)  
                Dim adapter1SQL As New SqlDataAdapter  
                adapter1SQL.SelectCommand = New SqlCommand(query, myConnSQL)  
                Dim table1sql As New DataTable  
                End Try 
                Return table1sql  
            End If 
        End Function 
        Protected Sub gn_ItemCreated(ByVal sender As ObjectByVal e As GridItemEventArgs) Handles gn.ItemCreated  
            If (TypeOf e.Item Is GridGroupHeaderItem) Then 
                e.Item.Attributes.Add("onclick ""return Expand('" + e.Item.UniqueID + "');")  
            End If 
        End Sub 
    End Class 

  5. Daniel
    Daniel avatar
    4936 posts

    Posted 12 Apr 2010 Link to this post

    Hello HSLaw,

    I created a sample project that demonstrates how to achieve this functionality.
    - create the placeholder (Label) on ItemCreated
    - recreate the control on ItemDataBound and then populate it

    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top