Expand/collapse hierarchy client-side on external control click

Thread is closed for posting
5 posts, 1 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 22 Jan 2007 Link to this post


    RadGrid for ASP .NET version

    RadControls for ASP .NET AJAX version

    4.5.0 and later

    2008.3.1125 and later

    .NET version

    2.0 and later

    Visual Studio version

    2005 and later

    Programming language


    Browser support

    all supported by RadGrid for ASP .NET

    all browsers supported by RadControls for ASP .NET AJAX


    The demo shows how to expand/collapse all tables in hierarchical grid (configured in client hierarchy load mode) on checkbox click. The checkbox toggles the expanded state in all levels by means of client javascript logic.

    In essence, you need to find the corresponding expand/collapse image inside a parent table row, change its image url and invoke its click() method conditionally depending on expand/collapse indicator. Because there is no default click() method for img html element under Gecko-based browsers, we define a prototype for that function to handle the operation in the same way as under IE. Below is the javascript block from the sample demo:

                <script language="javascript">  
                    HTMLElement.prototype.click = function() {  
                    var evt = this.ownerDocument.createEvent('MouseEvents');  
                    evt.initMouseEvent('click'truetruethis.ownerDocument.defaultView, 1, 0, 0, 0, 0, falsefalsefalsefalse, 0, null);  
                var grid;  
                var expClpsIndicator = false;  
                function GridCreated()  
                  grid = this;  
                function ExpandCollapseAllTables()  
                  var checkbox = document.getElementById("CheckBox1");  
                  expClpsIndicator = !expClpsIndicator;  
                function PerformAction(gridObj)  
                  for(var dtIndex = 0; dtIndex < gridObj.DetailTablesCollection.length; dtIndex++)  
                     var tableView = gridObj.DetailTablesCollection[dtIndex];                    
                     var nestedViewRow = tableView.Control.parentNode.parentNode;  
                     var parentTable = nestedViewRow.parentNode.parentNode;  
                     var parentRow = parentTable.rows[nestedViewRow.rowIndex - 1];  
                     expandColumnImage = parentRow.cells[0].firstChild;  
                     if(expClpsIndicator && expandColumnImage.src != "http://localhost:1848/Grid4xNET2/RadControls/Grid/Skins/WebBlue/SingleMinus.gif")  
                     else if(!expClpsIndicator && expandColumnImage.src != "http://localhost:1848/Grid4xNET2/RadControls/Grid/Skins/WebBlue/SinglePlus.gif")  
  2. 3BD6F94B-4C03-46D3-8568-9982F1F201BF
    3BD6F94B-4C03-46D3-8568-9982F1F201BF avatar
    10940 posts
    Member since:
    May 2014

    Posted 28 Mar 2008 Link to this post

    Hi guys,

    We've posted Web.UI version of the project here for those of you already using our new controls. The only differences are the changes to the client API according to the MS AJAX conventions.

    Best wishes,
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. 8CAC1D53-3794-43C9-B106-785CAEA8B67A
    8CAC1D53-3794-43C9-B106-785CAEA8B67A avatar
    1 posts
    Member since:
    Mar 2007

    Posted 17 Nov 2008 Link to this post


    I still have errors with this solution. The error happened when the parent grid is expanded and the child grids are collapsed. When we click expand/collapse checkbox, the parent is supposed to collapsed, and we are not supposed to see the children at all. But following this solution, I still can see the child grids. Can you help, pls?
  4. Answer
    046865EF-EF62-42BA-AFBA-62066BB90986 avatar
    41 posts
    Member since:
    Nov 2007

    Posted 22 Jan 2009 Link to this post

    Your example works perfectly well when using DetailTables (like in the posted example) but we are using the grouping feature (GroupByExpressions in three hierarchy levels) and then grid.get_detailTables().length equals 0 and consequently nothing is expanded or collapsed.

    I tried several things to change the JavaScript but nothing was really successful. I do not reach the expandColumnImage to call the click() method.

    Please, could you help us to solve this problem!

    Many thanks in advance!!!

  5. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 22 Jan 2009 Link to this post

    Hello Bidan,

    In this case the solution would be different and it is demonstrates in other code library entry:


    Best regards,
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top

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