Column expand/collapse

2 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 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. Yavor
    Admin
    Yavor avatar
    11 posts

    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