RadGrid expanding and collapsing

4 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">
        <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);
            <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"
                <PagerStyle Mode="NumericPages"></PagerStyle>
    <MasterTableView GroupLoadMode="Client"  DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" HierarchyLoadMode="Client" >
            <telerik:GridTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource2" Width="100%"
                                runat="server" HierarchyLoadMode="Client">
                    <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />
                     <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                                        DataField="OrderID" UniqueName="OrderID">
                     <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
                                        DataField="OrderDate" UniqueName="OrderDate">
                     <telerik:GridBoundColumn SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton"
                                        DataField="EmployeeID" UniqueName="EmployeeID">
            <telerik:GridBoundColumn DataField="CustomerID" FilterControlAltText="Filter CustomerID column" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" UniqueName="CustomerID">
            <telerik:GridBoundColumn DataField="CompanyName" FilterControlAltText="Filter CompanyName column" HeaderText="CompanyName" SortExpression="CompanyName" UniqueName="CompanyName">
            <telerik:GridBoundColumn DataField="ContactName" FilterControlAltText="Filter ContactName column" HeaderText="ContactName" SortExpression="ContactName" UniqueName="ContactName">
         <ClientSettings AllowExpandCollapse="true">
            <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)">
                    <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="String" />
  4. Eyup
    Eyup avatar
    3333 posts

    Posted 25 Feb 2013 Link to this post


    You can fire a ExpandCollapse command and pass the row index as argument:

    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);");
    Copy Code
    function ToggleExpandedState(headerEl, event) {
        var type = event.target.tagName.toLowerCase();
        if (type != "input" && type != "a") {
    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;

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

    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.
Back to Top