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', 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> |