Expand/collapse hierarchy client-side on external control click

Thread is closed for posting
5 posts, 1 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 22 Jan 2007 Link to this post

    Requirements

    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

    Javascript

    Browser support

    all supported by RadGrid for ASP .NET


    all browsers supported by RadControls for ASP .NET AJAX



    PROJECT DESCRIPTION

    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">  
                if(window.netscape)  
                {  
                    HTMLElement.prototype.click = function() {  
                    var evt = this.ownerDocument.createEvent('MouseEvents');  
                    evt.initMouseEvent('click'truetruethis.ownerDocument.defaultView, 1, 0, 0, 0, 0, falsefalsefalsefalse, 0, null);  
                    this.dispatchEvent(evt);  
                    }  
                }  
                  
                var grid;  
                var expClpsIndicator = false;  
                  
                function GridCreated()  
                {  
                  grid = this;  
                }  
                function ExpandCollapseAllTables()  
                {  
                  var checkbox = document.getElementById("CheckBox1");  
                  expClpsIndicator = !expClpsIndicator;  
                    
                  PerformAction(grid);  
                    
                }  
                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")  
                     {  
                        expandColumnImage.click();  
                     }  
                     else if(!expClpsIndicator && expandColumnImage.src != "http://localhost:1848/Grid4xNET2/RadControls/Grid/Skins/WebBlue/SinglePlus.gif")  
                     {  
                          expandColumnImage.click();  
                     }  
                  }  
                }  
                </script> 
  2. Steve
    Admin
    Steve avatar
    10941 posts

    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,
    Steve
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Alagar
    Alagar avatar
    1 posts
    Member since:
    Mar 2007

    Posted 17 Nov 2008 Link to this post

    hi,

    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
    John
    John 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. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    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:

    http://www.telerik.com/community/code-library/aspnet-ajax/grid/expand-collapse-grouped-grid-client-side-on-external-control-click.aspx

    Best regards,
    Sebastian
    the Telerik team

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