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', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 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> |