RadGrid expanding and collapsing

6 posts, 0 answers
  1. my407sw my407sw
    my407sw my407sw avatar
    2 posts
    Member since:
    Feb 2010

    Posted 20 Feb 2013 Link to this post

    Can any tell me how to do  using javascript ? I find some code on the code library, but the RadGrid component version is too old.
    My RadGrid is the newest !! 
    Than's a lot !!
  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 20 Feb 2013 Link to this post

    Hi my407sw,

    This is not the easiest thing to write out, but there are some good resources for you. You could use a function like this to check whether or not the RadGrid is expanded or collapsed. Implementing the collapse/expand is a bit more difficult, but you should be able to get a feel for where to start by going through this thread.

    Hopefully this helps,
    Master Chief
  3. my407sw my407sw
    my407sw my407sw avatar
    2 posts
    Member since:
    Feb 2010

    Posted 20 Feb 2013 Link to this post

    Thank for your suggest,but it not work for me!
    Here are my code, it always show some object is null and can not reference some object
    can someone help me ?






    <%@ Page Language=
    "C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
                
    </head>
    <body>
        <input type="button" onclick="toggleGroups(null);" value="Toggle All" />
        <input type="button" onclick="toggleGroups(0);" value="Toggle 1st" />
        <input type="button" onclick="toggleGroups(1);" value="Toggle 2st" />
        <form id="form1" runat="server">
        <script type="text/javascript">
          
            function toggleGroups(index) {
                 
                var gridClientID = '<%= RadGrid1.ClientID %>';
                var grid = $find(gridClientID);
                var masterTable = grid.get_masterTableView();
                var groupToggles = masterTable._element.getElementsByTagName('INPUT');
     
                if (index != null) {
                    if (index < groupToggles.length)
                        masterTable._toggleGroupsExpand(masterTable._element.getElementsByTagName('INPUT')[index], event);
                }
             
                else {
                    for (var i = 0; i < groupToggles.length; i++) {
                        masterTable._toggleGroupsExpand(masterTable._element.getElementsByTagName('INPUT')[i], event);
                    }
                }
            }
         
        </script>
        <div>
             
            <telerik:RadScriptManager ID="RadScriptManager2" runat="server"></telerik:RadScriptManager>
            <telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" PageSize="5" AllowSorting="True" AllowPaging="True"
                    GridLines="None">
                <PagerStyle Mode="NumericPages"></PagerStyle>
    <MasterTableView GroupLoadMode="Client"  DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" HierarchyLoadMode="Client" >
        <DetailTables>
            <telerik:GridTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource2" Width="100%"
                                runat="server" HierarchyLoadMode="Client">
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />
                </ParentTableRelation>
                 <Columns>
                     <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                                        DataField="OrderID" UniqueName="OrderID">
                     </telerik:GridBoundColumn>
                     <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
                                        DataField="OrderDate" UniqueName="OrderDate">
                     </telerik:GridBoundColumn>
                     <telerik:GridBoundColumn SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton"
                                        DataField="EmployeeID" UniqueName="EmployeeID">
                     </telerik:GridBoundColumn>
                 </Columns>
                </telerik:GridTableView>
        </DetailTables>
        <Columns>
            <telerik:GridBoundColumn DataField="CustomerID" FilterControlAltText="Filter CustomerID column" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" UniqueName="CustomerID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CompanyName" FilterControlAltText="Filter CompanyName column" HeaderText="CompanyName" SortExpression="CompanyName" UniqueName="CompanyName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ContactName" FilterControlAltText="Filter ContactName column" HeaderText="ContactName" SortExpression="ContactName" UniqueName="ContactName">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
         <ClientSettings AllowExpandCollapse="true">
              
         </ClientSettings>
    </telerik:RadGrid>
     
     
            <br />
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Orders] WHERE ([CustomerID] = @CustomerID)">
                <SelectParameters>
                    <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="String" />
                </SelectParameters>
            </asp:SqlDataSource>
        </div>
        </form>
    </body>
    </html>
  4. Eyup
    Admin
    Eyup avatar
    3692 posts

    Posted 25 Feb 2013 Link to this post

    Hi,

    You can fire a ExpandCollapse command and pass the row index as argument:
    http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-firecommand.html

    I have noticed that you have set the group load mode to client. In that case you probably want to avoid a postback when toggling the expanded state of the groups. For this scenario, you can explicitly click the expand/collapse button of the corresponding group. The following approach demonstrates how to make the entire group header to trigger expand/collapse:
    Copy Code
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridGroupHeaderItem)
        {
            GridGroupHeaderItem groupHeaderItem = e.Item as GridGroupHeaderItem;
            groupHeaderItem.Attributes.Add("onclick", "ToggleExpandedState(this,event);");
        }
    }
    JavaScript:
    Copy Code
    function ToggleExpandedState(headerEl, event) {
        var type = event.target.tagName.toLowerCase();
        if (type != "input" && type != "a") {
            $(headerEl).children()[0].children[0].click();
        }
    }
    And the CSS:
    Copy Code
    <style type="text/css">
        div.RadGrid .rgGroupHeader
        {
            cursor: pointer;
        }
            div.RadGrid .rgGroupHeader .rgExpand
            {
                background: url('plus.png') no-repeat 0 0;
            }
            div.RadGrid .rgGroupHeader .rgCollapse
            {
                background: url('minus.png') no-repeat 0 0;
            }
    </style>

    Hope this helps. Please give it a try and let me know about the result.

    Regards,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Kiran
    Kiran  avatar
    29 posts
    Member since:
    Oct 2018

    Posted 10 Jan in reply to my407sw my407sw Link to this post

    Hi,

    I having been trying since long to get my grouping to collapse and nothing helped. The only thing helped me was adding AllowExpandCollapse=true. I was trying with AllowGroupingexpandcollapse= true but it did not help. Anyone having the same problem as me like, not able to collapse the groping try AllowExpandCollapse="true" in ClientSettings. 

    Thank you.

  6. Eyup
    Admin
    Eyup avatar
    3692 posts

    Posted 15 Jan Link to this post

    Hi Kiran,

    Thanks for sharing your solution with our community. I hope it will prove helpful to other developers as well.

    If you happen to face any issues still, feel free to turn to us.

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top