Expand/collapse hierarchy client-side on double click

Thread is closed for posting
1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 16 May 2007 Link to this post

    Requirements

    RadGrid for ASP .NET version

    4.6.0 and later

    RadControls for ASP .NET AJAX version 

    2008.2.723 and later

    .NET version

    2.0 and later

    Visual Studio version

    2005 and later

    Programming language

    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 locate the nested view and switch its visibility when the user double-clicks a grid record. In addition to that, you need to change the url of the expand/collapse image to reflect the status change for the parent record:

    RadGrid for ASP.NET

                <script type="text/javascript">  
                var imageButtonPath = null;  
                  
                function RowDblClicked(rowIndex)  
                {  
                 if(this.Rows[rowIndex+1].ItemType == "NestedView" && this.Name != "OrderDetails")  
                 {  
                   if(this.Rows[rowIndex+1].Control.style.display == "")  
                   {  
                     this.Rows[rowIndex+1].Control.style.display = "none";  
                     imageButtonPath = this.GetCellByColumnUniqueName(this.Rows[rowIndex], "ExpandColumn").innerHTML;  
                     imageButtonPath = imageButtonPath.replace("SingleMinus","SinglePlus");  
                     this.GetCellByColumnUniqueName(this.Rows[rowIndex], "ExpandColumn").innerHTML = imageButtonPath;  
                   }  
                   else if(this.Rows[rowIndex+1].Control.style.display == "none")  
                   {  
                     this.Rows[rowIndex+1].Control.style.display = "";  
                     imageButtonPath = this.GetCellByColumnUniqueName(this.Rows[rowIndex], "ExpandColumn").innerHTML;  
                     imageButtonPath = imageButtonPath.replace("SinglePlus","SingleMinus");  
                     this.GetCellByColumnUniqueName(this.Rows[rowIndex], "ExpandColumn").innerHTML = imageButtonPath;  
                   }  
     
                 }             
                  
                }  
                </script> 

                <radG:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" Skin="Mac" 
                    PageSize="3" AllowSorting="True" AllowPaging="True" DataSourceID="AccessDataSource1">  
                    <PagerStyle Mode="NumericPages"></PagerStyle> 
                    <MasterTableView DataKeyNames="CustomerID" Width="100%" HierarchyLoadMode="Client" 
                        Name="Customers" DataSourceID="AccessDataSource1">  
                        <DetailTables> 
                            <radG:GridTableView DataKeyNames="OrderID" Name="Orders" Width="100%" HierarchyLoadMode="Client" 
                                DataSourceID="AccessDataSource2">  
                                <ParentTableRelation> 
                                    <radG:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" /> 
                                </ParentTableRelation> 
                                <DetailTables> 
                                    <radG:GridTableView DataKeyNames="OrderID" Name="OrderDetails" Width="100%" DataSourceID="AccessDataSource3">  
                                        <ParentTableRelation> 
                                            <radG:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID" /> 
                                        </ParentTableRelation> 
                                        <Columns> 
                                            <radG:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton" 
                                                DataField="UnitPrice">  
                                            </radG:GridBoundColumn> 
                                            <radG:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton" 
                                                DataField="Quantity">  
                                            </radG:GridBoundColumn> 
                                            <radG:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton" 
                                                DataField="Discount">  
                                            </radG:GridBoundColumn> 
                                        </Columns> 
                                    </radG:GridTableView> 
                                </DetailTables> 
                                <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> 
                            </radG:GridTableView> 
                        </DetailTables> 
                        <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> 
                    </MasterTableView> 
                    <ClientSettings AllowExpandCollapse="true">  
                        <ClientEvents OnRowDblClick="RowDblClicked" /> 
                    </ClientSettings> 
                </radG:RadGrid> 
                <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> 

    RadGrid for ASP.NET AJAX

    <script type="text/javascript">  
    var imageButtonPath = null;  
     
    function RowDblClicked(sender, eventArgs)  
    {  
        var grid = sender;                
        var rowIndex = eventArgs.get_itemIndexHierarchical();  
        if(rowIndex.indexOf(':') != -1)  
        {  
            rowIndex = rowIndex.substr(rowIndex.lastIndexOf('_') + 1);  
        }  
        var tableView = eventArgs.get_tableView();  
        var row = tableView.get_dataItems()[rowIndex];    
        if(tableView.getCellByColumnUniqueName(row, "ExpandColumn"))  
        {             
            if(row.get_expanded() == false)  
            {  
                row.set_expanded(true);                   
                imageButton = tableView.getCellByColumnUniqueName(row, "ExpandColumn").childNodes[0];  
                imageButton.className = "rgCollapse";  
            }  
            else 
            {  
                row.set_expanded(false);  
                imageButton = tableView.getCellByColumnUniqueName(row, "ExpandColumn").childNodes[0];  
                imageButton.className = "rgExpand";  
            }       
        }        
    }  
    </script> 
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" Skin="Telerik" 
        PageSize="3" AllowSorting="True" AllowPaging="True" DataSourceID="AccessDataSource1">  
        <MasterTableView DataKeyNames="CustomerID" Width="100%" HierarchyLoadMode="Client" 
            Name="Customers" DataSourceID="AccessDataSource1">  
            <DetailTables> 
                <telerik:GridTableView DataKeyNames="OrderID" Name="Orders" Width="100%" HierarchyLoadMode="Client" 
                    DataSourceID="AccessDataSource2">  
                    <ParentTableRelation> 
                        <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" /> 
                    </ParentTableRelation> 
                    <DetailTables> 
                        <telerik:GridTableView DataKeyNames="OrderID" Name="OrderDetails" Width="100%" DataSourceID="AccessDataSource3">  
                            <ParentTableRelation> 
                                <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID" /> 
                            </ParentTableRelation> 
                            <Columns> 
                                <telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton" 
                                    DataField="UnitPrice">  
                                </telerik:GridBoundColumn> 
                                <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton" 
                                    DataField="Quantity">  
                                </telerik:GridBoundColumn> 
                                <telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton" 
                                    DataField="Discount">  
                                </telerik:GridBoundColumn> 
                            </Columns> 
                        </telerik:GridTableView> 
                    </DetailTables> 
                    <Columns> 
                        <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton" 
                            DataField="OrderID">  
                        </telerik:GridBoundColumn> 
                        <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton" 
                            DataField="OrderDate">  
                        </telerik:GridBoundColumn> 
                        <telerik:GridBoundColumn SortExpression="Freight" HeaderText="Freight" HeaderButtonType="TextButton" 
                            DataField="Freight">  
                        </telerik:GridBoundColumn> 
                    </Columns> 
                </telerik:GridTableView> 
            </DetailTables> 
            <Columns> 
                <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton" 
                    DataField="CustomerID">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton" 
                    DataField="ContactName">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton" 
                    DataField="CompanyName">  
                </telerik:GridBoundColumn> 
            </Columns> 
        </MasterTableView> 
        <ClientSettings AllowExpandCollapse="true">  
            <ClientEvents OnRowDblClick="RowDblClicked" /> 
        </ClientSettings> 
    </telerik:RadGrid> 
     <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/App_Data/Nwind.mdb" 
        SelectCommand="SELECT * FROM Customers" runat="server"></asp:AccessDataSource> 
    <asp:AccessDataSource ID="AccessDataSource2" DataFile="~/App_Data/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="~/App_Data/Nwind.mdb" 
        SelectCommand="SELECT * FROM [Order Details] where OrderID = ?" runat="server">  
        <SelectParameters> 
            <asp:SessionParameter Name="OrderID" SessionField="OrderID" Type="Int32" /> 
        </SelectParameters> 
    </asp:AccessDataSource> 


    Note that we kept the functionality of the expand/collapse buttons intact - hence you can expand/collapse items by clicking them, too.
Back to Top