Expand/collapse grouped grid client-side on external control click

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

    Posted 02 Feb 2007 Link to this post

    Requirements

    RadGrid for ASP .NET version

    RadControls for ASP .NET AJAX version

    4.5.0 and later


    2008.1.415 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 groups in groupable grid (configured in client group 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 group header, 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 = true;  
                  
                function GridCreated()  
                {  
                  grid = this;  
                }  
                function ExpandCollapseAllGroups()  
                {  
                  var checkbox = document.getElementById("<%=CheckBox1.ClientID %>");  
                    
                  expClpsIndicator = !expClpsIndicator;  
                    
                  PerformAction(grid.MasterTableView);  
                    
                }  
                function PerformAction(tableView)  
                {  
                  for(var index = 0; index < tableView.Rows.length; index++)  
                  {  
                    if(tableView.Rows[index].ItemType == "GroupHeader")  
                    {  
                      if(expClpsIndicator)  
                      {  
                       //expand all groups  
                       //this loop is needed to check how many grouped items do you have and identify the expand/collapse image   
                       for (var i = 0; i < grid.GroupPanel.GroupPanelItems.length; i++)  
                       {  
                          if(tableView.Rows[index].Control.cells[i])  
                          {  
                              groupColumnImage = tableView.Rows[index].Control.cells[i].firstChild;  
                       
                            if(groupColumnImage.src)  
                            {   
                                //change the url here if you run the web site under IIS or on different local port  
                                if(groupColumnImage.src != "http://localhost:1859/Grid4xNET2VB/RadControls/Grid/Skins/Ice/SingleMinus.gif")  
                                {  
                                    groupColumnImage.click();  
                                }  
                            }  
                          }  
                        }  
                       }  
                       else 
                       {  
                          //collapse only the root groups - no need to collapse nested group headers as they are not visible     
                          groupColumnImage = tableView.Rows[index].Control.cells[0].firstChild;  
                            
                          if(groupColumnImage.src)  
                          {  
                                //change the url here if you run the web site under IIS or on different local port   
                                if(groupColumnImage.src != "http://localhost:1859/Grid4xNET2VB/RadControls/Grid/Skins/Ice/SinglePlus.gif")  
                                {  
                                    groupColumnImage.click();  
                                }  
                          }  
                       }  
     
                     }  
                   }   
                }  
                  
     
                </script> 
  2. jefflandry
    jefflandry avatar
    30 posts
    Member since:
    Feb 2007

    Posted 06 Feb 2007 Link to this post

    I can't run this because it tells me sa isn't a trusted user of sql server.  I have tcp/ip and pipes enabled locally and remotely.

    Any suggestions?  I installed sql server 2005 on the machine with integrated security and switched it to mixed the first time I got this error.  I have no idea what the sa password is.
  3. Hristo Deshev
    Admin
    Hristo Deshev avatar
    559 posts

    Posted 07 Feb 2007 Link to this post

    Hi Jeff,

    This example uses an AccessDataSource control and the problem you report makes me think you are using SQL server.

    Using the "sa" user for SQL Server is generally ill advised and you may have hit some sort of a security feature and the DB may be explicitly blocking you from using that account. Try creating another user, grant permissions to the Northwind DB, and then regenerate the SQLDataSource control on your page.

    Kind regards,
    Hristo Deshev
    the telerik team
  4. jefflandry
    jefflandry avatar
    30 posts
    Member since:
    Feb 2007

    Posted 07 Feb 2007 Link to this post

    You are correct, I am using sql server.  And I didn't have any of the sample databases installed.  Put in the sample database and now it works.

    Thanks,
    Jeff Landry
  5. John
    John avatar
    41 posts
    Member since:
    Nov 2007

    Posted 23 Jan 2009 Link to this post

    I am trying to get your example to work in our environment but having problems with the MasterTableView. When I'm trying to access the Rows like in your sample ( tableView.Rows.length ) I am always getting an error ('Rows.length' is null or not an object). I also tried to get the rows of the MasterTableView via get_masterTableView().Rows which was not successful as well.

    Has it maybe something to do with our version of the dll (2008.3.1314.20)

    Could you help!?

    Many Thanks!
  6. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 23 Jan 2009 Link to this post

    Hi Bidan,

    I have attached a sample page which demonstrates how to achieve a similar to the requested functionality using RadGrid for ASP.NET AJAX control.

    Please give it a try and let us know if this helps or you need further assistance.

    Kind regards,
    Rosen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. John
    John avatar
    41 posts
    Member since:
    Nov 2007

    Posted 26 Jan 2009 Link to this post

    Works perfectly fine - Thanks a lot!!

    Kind regards
Back to Top