Column expand/collapse

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 10 Sep 2007 Link to this post

    Requirements

    RadGrid for ASP .NET version

    4.6.2 and later

    RadControls for ASP .NET AJAX version 2008.1.415
    .NET version

    2.0 and later

    Visual Studio version

    2005 and later

    Browser support

    all supported by RadGrid for ASP .NET


    all browsers supported by RadControls for ASP .NET AJAX



    PROJECT DESCRIPTION

    The project uses client side JavaScript code to simulate column expand/collapse. It uses a template column, which contains two images, nested in the header, which change the width of the column(s), as well as the visibility of the expand/collapse images. The aspx code, and the declaration of the control are listed below:

    .aspx
     <div> 
                <radG:RadGrid ID="RadGrid1" DataSourceID="AccessDataSource1" runat="server"   
                    AutoGenerateColumns="False">  
                    <MasterTableView TableLayout="Fixed">  
                        <Columns> 
                            <radG:GridTemplateColumn UniqueName="CustomerID">  
                                <HeaderTemplate> 
                                    <table> 
                                        <tr> 
                                            <td> 
                                                <img onclick="CollapseColumn(0, this)" src="RadControls/Grid/Skins/Default/SingleMinus.gif" /><img 
                                                    style="display: none" onclick="ExpandColumn(0, this)" src="RadControls/Grid/Skins/Default/SinglePlus.gif" /></td>  
                                        </tr> 
                                        <tr> 
                                            <td> 
                                                <b>CustomerID</b></td>  
                                        </tr> 
                                    </table> 
                                </HeaderTemplate> 
                                <ItemTemplate>                              
                                    <%# Eval("CompanyName") %> 
                                </ItemTemplate> 
                            </radG:GridTemplateColumn> 
                            <radG:GridTemplateColumn> 
                                <HeaderTemplate> 
                                    <table> 
                                        <tr> 
                                            <td> 
                                                <img onclick="CollapseColumn(1, this)" src="RadControls/Grid/Skins/Default/SingleMinus.gif" /><img 
                                                    style="display: none" onclick="ExpandColumn(1, this)" src="RadControls/Grid/Skins/Default/SinglePlus.gif" /></td>  
                                        </tr> 
                                        <tr> 
                                            <td> 
                                                <b>CompanyName</b></td>  
                                        </tr> 
                                    </table> 
                                </HeaderTemplate> 
                                <ItemTemplate> 
                                    <%# Eval("CompanyName") %> 
                                </ItemTemplate> 
                            </radG:GridTemplateColumn> 
                        </Columns> 
                    </MasterTableView> 
                    <ClientSettings> 
                    <Resizing AllowColumnResize="true" ClipCellContentOnResize="true" /> 
                    </ClientSettings> 
                </radG:RadGrid> 
                <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb" 
                    SelectCommand="SELECT * FROM Customers"></asp:AccessDataSource> 
            </div> 

    The JavaScript code used to resize the column, and hide the images is located below:

    .js
      <script type="text/javascript">  
                function CollapseColumn(index, element)  
                {  
                    <%= RadGrid1.ClientID %>.MasterTableView.ColGroup.Cols[index].width = "20px";             
                    element.style.display = "none";  
                    element.nextSibling.style.display = "";  
                }  
     
                function ExpandColumn(index, element)  
                {  
                    <%= RadGrid1.ClientID %>.MasterTableView.ColGroup.Cols[index].width = "";  
                    element.style.display = "none";  
                    element.previousSibling.style.display = "";  
                }  
        </script> 

    A fully functional project is attached to this message.
  2. 23C72464-8FC9-43C3-9A12-B431B37B7758
    23C72464-8FC9-43C3-9A12-B431B37B7758 avatar
    11 posts
    Member since:
    Dec 2013

    Posted 10 Mar 2008 Link to this post

    Hi,

    I have attached an updated version of the project, which uses the ASP .NET AJAX version of the controls.

    Regards,
    Yavor
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top

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