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

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

    Posted 05 Apr 2010 Link to this post

    Hello,

    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,

    Shinu.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  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:
    http://www.ximnet.com.my/news_test.aspx


    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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head > 
        <title></title>  
         <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() {  
             
           goToByScroll("bottom");  
           });  
           function goToByScroll(id) {  
               $('html,body').animate({ scrollTop: $("#" + id).offset().top -35 }, 'slow');  
           }  
     
           function Expand(uniqueId) {  
               __doPostBack('<%=gn.UniqueID %>', uniqueId);  
           }     
            
           </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:radscriptmanager runat="server"></telerik:radscriptmanager> 
        <div> 
        <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">  
                    <GroupByExpressions> 
                        <telerik:GridGroupByExpression> 
                          
                          
                          
                            <SelectFields> 
                                <telerik:GridGroupByField FieldAlias="Caption" FieldName="Caption"></telerik:GridGroupByField> 
                            </SelectFields> 
                          
                         <GroupByFields> 
                           <telerik:GridGroupByField  
         FieldName="livedate" 
         SortOrder="Descending" /> 
       <telerik:GridGroupByField FieldName="id" /> 
       
     </GroupByFields> 
                          
                           
                        </telerik:GridGroupByExpression> 
                    </GroupByExpressions> 
                    <NoRecordsTemplate> 
                        No Issue Found</NoRecordsTemplate> 
                    <RowIndicatorColumn Visible="False">  
                        <HeaderStyle Width="20px"></HeaderStyle> 
                    </RowIndicatorColumn> 
                      
                    <Columns> 
                          
                        <telerik:GridTemplateColumn UniqueName="Caption" SortExpression="Caption" HeaderText="">  
                            <HeaderStyle HorizontalAlign="left" /> 
                            <ItemTemplate> 
                                <%#DataBinder.Eval(Container, "DataItem.article_content")%> 
                            </ItemTemplate> 
                        </telerik:GridTemplateColumn> 
                          
                          
                          
                    </Columns> 
                </MasterTableView> 
            </telerik:RadGrid> 
            </telerik:radajaxpanel> 
            <telerik:RadAjaxLoadingPanel id="lp" Runat="server" height="1000" width="1000">  
            <img src="images/load.gif" width="90" height="90" style="margin-top: 150px;" /> 
      </asp:Image> 
    </telerik:RadAjaxLoadingPanel> 
        </div> 
        </form> 
    </body> 
    </html> 
     


    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 
                Next 
            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 
                LoadNews()  
     
                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  
                    alin.Add(Request.QueryString("id"))  
     
                    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 
     
                item.DataCell.Controls.Add(lname)  
            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)))  
                    Next 
                End With 
     
                adapter1.SelectCommand = OLEDBCOMMAND  
     
                Dim dt As DataTable = New DataTable  
                myConn.Open()  
                adapter1.Fill(dt)  
                myConn.Close()  
                Return dt  
            Else 
                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)))  
                    Next 
                End With 
     
                adapter1SQL.SelectCommand = mySQLCOMMAND  
     
                Dim dtsql As DataTable = New DataTable  
                myConnSQL.Open()  
     
                adapter1SQL.Fill(dtsql)  
     
                myConnSQL.Close()  
     
                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  
                myConn.Open()  
                Try 
                    adapter1.Fill(table1)  
                Finally 
                    myConn.Close()  
                End Try 
                Return table1  
            Else 
                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  
                myConnSQL.Open()  
                Try 
                    adapter1SQL.Fill(table1sql)  
                Finally 
                    myConnSQL.Close()  
                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
    Admin
    Daniel avatar
    4945 posts

    Posted 12 Apr 2010 Link to this post

    Hello HSLaw,

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

    Regards,
    Daniel
    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