Expand/collapse hierarchy with ajax request on double click

Thread is closed for posting
2 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 15 May 2007 Link to this post

    Requirements
    RadGrid for ASP .NET version

    RadControls for ASP .NET AJAX version

    4.6.0 and later


    2008.1.415 and later
    .NET version

    2.0 and later
    Visual Studio version

    2005 and later
    Programming language

    VB.NET, Javascript
    Browser support

    all supported by RadGrid for ASP .NET


    all browsers supported by RadControls for ASP .NET AJAX

    To convert code from posted projects Telerik online converter

     
    PROJECT DESCRIPTION
    This demo illustrates how to expand/collapse grid items in hierarchical grid on row double-click. The main part of the logic is to start ajax request when the user double-clicks a grid record and pass the id of the table and the clicked item. Then on the server locate the table and row in the server table object and switch the expanded state of the record.

                <script language="javascript">  
                  
                function RowDblClicked(rowIndex)  
                {  
                   if(this.Rows[rowIndex].ItemType != "NestedView" && this.Name != "OrderDetails")  
                   {  
                    window["<%=RadGrid1.ClientID %>"].AjaxRequest("<%=RadGrid1.UniqueID %>","Expand:"+ this.ClientID + ":" + this.Rows[rowIndex].RealIndex);   
                   }                   
                  
                }  
                </script> 
     
                <radG:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" Skin="Ice" 
                    EnableAJAXLoadingTemplate="true" EnableAJAX="true" LoadingTemplateTransparency="25" 
                    DataSourceID="AccessDataSource1">  
                    <MasterTableView DataKeyNames="CustomerID" AllowPaging="true" PageSize="5" DataSourceID="AccessDataSource1">  
                        <PagerStyle Mode="NumericPages" /> 
                        <Columns> 
                            <radG:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton" 
                                DataField="CustomerID">  
                            </radG:GridBoundColumn> 
                            <radG:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton" 
                                DataField="ContactName">  
                            </radG:GridBoundColumn> 
                            <radG:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton" 
                                DataField="CompanyName">  
                            </radG:GridBoundColumn> 
                        </Columns> 
                        <DetailTables> 
                            <radG:GridTableView DataKeyNames="CustomerID,OrderID" DataSourceID="AccessDataSource2" 
                                Name="Orders" Width="100%">  
                                <Columns> 
                                    <radG:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton" 
                                        DataField="OrderID">  
                                    </radG:GridBoundColumn> 
                                    <radG:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton" 
                                        DataField="OrderDate">  
                                    </radG:GridBoundColumn> 
                                    <radG:GridBoundColumn SortExpression="Freight" HeaderText="Freight" HeaderButtonType="TextButton" 
                                        DataField="Freight">  
                                    </radG:GridBoundColumn> 
                                </Columns> 
                                <ParentTableRelation> 
                                    <radG:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" /> 
                                </ParentTableRelation> 
                                <DetailTables> 
                                    <radG:GridTableView DataKeyNames="OrderID" DataSourceID="AccessDataSource3" Width="100%" 
                                        runat="server" Name="OrderDetails">  
                                        <ParentTableRelation> 
                                            <radG:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID" /> 
                                        </ParentTableRelation> 
                                        <Columns> 
                                            <radG:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton" 
                                                DataField="UnitPrice" UniqueName="UnitPrice">  
                                            </radG:GridBoundColumn> 
                                            <radG:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton" 
                                                DataField="Quantity" UniqueName="Quantity">  
                                            </radG:GridBoundColumn> 
                                            <radG:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton" 
                                                DataField="Discount" UniqueName="Discount">  
                                            </radG:GridBoundColumn> 
                                        </Columns> 
                                        <SortExpressions> 
                                            <radG:GridSortExpression FieldName="Quantity" SortOrder="Descending"></radG:GridSortExpression> 
                                        </SortExpressions> 
                                    </radG:GridTableView> 
                                </DetailTables> 
                            </radG:GridTableView> 
                        </DetailTables> 
                    </MasterTableView> 
                    <ClientSettings> 
                        <ClientEvents OnRowDblClick="RowDblClicked"></ClientEvents> 
                    </ClientSettings> 
                </radG:RadGrid> 
                <br /> 
                <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Grid/Data/Access/Nwind.mdb" 
                    SelectCommand="SELECT * FROM Customers" runat="server"></asp:AccessDataSource> 
                <asp:AccessDataSource ID="AccessDataSource2" DataFile="~/Grid/Data/Access/Nwind.mdb" 
                    SelectCommand="SELECT * FROM Orders Where CustomerID = ?" runat="server">  
                    <SelectParameters> 
                        <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" /> 
                    </SelectParameters> 
                </asp:AccessDataSource> 
                <asp:AccessDataSource ID="AccessDataSource3" DataFile="~/Grid/Data/Access/Nwind.mdb" 
                    SelectCommand="SELECT * FROM [Order Details] where OrderID = ?" runat="server">  
                    <SelectParameters> 
                        <asp:SessionParameter Name="OrderID" SessionField="OrderID" Type="Int32" /> 
                    </SelectParameters> 
                </asp:AccessDataSource> 

    VB.NET
        Protected Overrides Sub RaisePostBackEvent(ByVal source As IPostBackEventHandler, ByVal eventArgument As String)  
            MyBase.RaisePostBackEvent(source, eventArgument)  
            If (source Is Me.RadGrid1) Then 
                Dim postBackData As String() = eventArgument.Split(":")  
                Select Case postBackData(0)  
                    Case "Expand" 
                        Dim item As GridDataItem = CType(GetTableView(Me.RadGrid1.MasterTableView, postBackData(1)).Controls(0), Table).Rows(postBackData(2))  
                        If (item.Expanded) Then 
                            item.Expanded = False 
                        Else 
                            item.Expanded = True 
                        End If 
     
                End Select 
            End If 
        End Sub 
        Private Function GetTableView(ByVal currTableView As GridTableView, ByVal controlId As String) As GridTableView  
            If currTableView.ClientID = controlId Then 
                Return currTableView  
            Else 
                Dim item As GridItem  
                For Each item In currTableView.Items  
                    If item.HasChildItems And TypeOf item Is GridDataItem Then 
                        Dim nestedView As GridTableView  
                        For Each nestedView In CType(item, GridDataItem).ChildItem.NestedTableViews()  
                            Dim res As GridTableView = GetTableView(nestedView, controlId)  
                            If Not res Is Nothing Then 
                                Return res  
                            End If 
                        Next nestedView  
                    End If 
                Next item  
            End If 
        End Function 

    C#
    protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)  
    {  
        base.RaisePostBackEvent(source, eventArgument);  
        if (object.ReferenceEquals(source, this.RadGrid1))  
        {  
            string[] postBackData = eventArgument.Split(":");  
            switch (postBackData(0))  
            {  
                case "Expand":  
                    GridDataItem item = ((Table)GetTableView(this.RadGrid1.MasterTableView, postBackData(1)).Controls(0)).Rows(postBackData(2));  
                    if (item.Expanded)  
                    {  
                        item.Expanded = false;  
                    }  
                    else 
                    {  
                        item.Expanded = true;  
                    }  
     
                    break;  
     
            }  
        }  
    }  
    private GridTableView GetTableView(GridTableView currTableView, string controlId)  
    {  
        if (currTableView.ClientID == controlId)  
        {  
            return currTableView;  
        }  
        else 
        {  
            GridItem item;  
            foreach ( item in currTableView.Items)   
            {  
                if (item.HasChildItems & item is GridDataItem)  
                {  
                    GridTableView nestedView;  
                    foreach ( nestedView in ((GridDataItem)item).ChildItem.NestedTableViews()) {  
                        GridTableView res = GetTableView(nestedView, controlId);  
                        if (!res == null)  
                        {  
                            return res;  
                        }  
                    }  
                }  
            }  
        }  
    } 

    Note that we kept the functionality of the expand/collapse buttons intact - hence you can expand/collapse items by clicking them, too.
  3. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 23 Feb 2008 Link to this post

    Attached to the initial message you will find an updated version with RadControls "Prometheus".

    These are the updates:
    • Remove EnableAJAX, EnableAJAXLoadingTemplate and LoadingTemplateTransparency properties from the grid markup. RadGrid does not have internal AJAX functionality anymore.
    • Add RadAjaxManager and RadAjaxLoadingPanel controls in the page.
    • Configure RadAjaxManager as AjaxControl and RadGrid as updated control.
    • Add another ajax setting to RadAjaxManager -- RadGrid1 as ajax control that is updating itself i.e. RadGrid1 as updated control. This is needed for paging or expand/collapse operation through the images in Expand/Collapse column.
    • Use RadAjaxManager's client-side AjaxRequest method.
    • Send ItemIndexHierarchical of the item clicked in the event arguments, get the item index server-side by parsing the number after the last "_" character. Use "|" character as arguments separator as ":" is used in ItemIndexHierarhical.
    • Wire RadAjaxManager's AjaxRequest event, do not use RaisePostBackEvent anymore.
    • Use SQL backend
Back to Top

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