Telerik Admin
MVP
Posted on Jan 22, 2007
(permalink)
| Article relates to |
RadGrid v4.5.x+
or
RadGrid for ASP.NET AJAX
(Telerik.Web.UI v2008.1.x)
|
| .NET version |
2.x
|
| Visual Studio version |
2005+
|
| programming language |
Javascript
|
| browser support |
IE and Gecko-based
|
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', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 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> |
Telerik Admin
Posted on Mar 28, 2008
(permalink)
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
Jefferson
Posted on Nov 17, 2008
(permalink)
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?
Answer
Bidan
Posted on Jan 22, 2009
(permalink)
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!!!
Telerik Admin
Posted on Jan 22, 2009
(permalink)
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.