This is a migrated thread and some comments may be shown as answers.

Grid Grouping clicking on text

3 Answers 67 Views
Grid
This is a migrated thread and some comments may be shown as answers.
HSLaw
Top achievements
Rank 1
HSLaw asked on 02 Apr 2010, 07:03 AM
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

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 05 Apr 2010, 07:46 AM

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.

0
HSLaw
Top achievements
Rank 1
answered on 07 Apr 2010, 07:20 AM
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 
 

0
Daniel
Telerik team
answered on 12 Apr 2010, 01:21 PM
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.
Tags
Grid
Asked by
HSLaw
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
HSLaw
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or