.aw-item-text {
vertical-align: top;
}
//NOTE: Extraneous code removed where possible and comments added to give
//context. This implementation is fairly similar to the original V1 code
//in its core concepts. I don't use '+' '-' images to indicate expanded and
//collapsed rows and therefore I have no need to modify my datasource to add
//those images. Clicking anywhere on a row will expand or collapse it.
/*
Event fired when a grid row is clicked.
@param: event
The click event (ala DOM MouseEvent)
@param: index
The index of the grid row that was clicked.
*/
this.onRowClicked = function(event, index) {
var row = this.getRowTemplate(index);
//I store a list of all expanded rows (as the grid can have multiple
//expanded rows at any time) to determine if a row needs to be expanded
//or collapsed. This list is also used to restore the expanded rows state
//after the grid is refreshed or sorted.
if (isRowExpanded(index)) {
this.collapseRow(row.getId(), index);
} else {
this.expandRow(row.getId(), index);
}
};
/*
Expand a grid row to show another grid as a child of the selected row.
@param: rowid
The grid rowid, which is a unique identifier for the grid row.
@param: id
Used to identify the row that is being expanded.
*/
this.expandRow = function(rowid, id) {
//NOTE: Utils_v1.getDocumentElement is just a browser independent way of
//calling document.getElementById()
//Expand row is the HTML element of the row that was clicked into which we
//will add a child DIV that will contain the new grid.
var expandRow = Utils_v1.getDocumentElement(rowid);
//Not a valid rowid
if (!Utils_v1.isValidValue(expandRow)) {
return;
}
//if child DIV does not already exist then create it.
var childDiv = Utils_v1.getDocumentElement("exp_" + id);
if (!Utils_v1.isValidValue(childDiv)) {
childDiv = document.createElement("DIV");
childDiv.id = "exp_" + id;
childDiv.className = "child-grid-style"; //Get this from config system!
//I get subGroup from an external config sym. Each grid 'type' can be
//configured externally to tell it what type of grid to open when one of
//its rows is clicked.
var subGroup = "WHATEVER";
var gridId = this.getId() + "_" + subGroup + "_" + id;
//All AW grid code is actually wrapped in my own Grid object. Grid
//objects are generally created and managed by a GridManager. The code
//below is just asking the GridManager if it alreadys knows about the
//grid identified by gridId. If it does not then create one for us.
//You should just create a new grid whatever way you normally do it.
//I am using an XML Table datasource.
var isNewGrid = false;
if (!Utils_v1.isValidValue(this.getManager().getGrid(gridId))) {
isNewGrid = true;
}
try {
this.getManager().createGrid(subGroup, gridId, childDiv.id);
} catch(e) {
//Dispatch to ExceptionHandler or just alert(e)
return;
}
expandRow.appendChild(childDiv);
try {
this.getManager().renderGrid(gridId);
} catch(e) {
//Dispatch to ExceptionHandler or just alert(e)
return;
}
if (isNewGrid) {
this.getManager().startDataRefresh(gridId);
//NOTE: You need to store the information about the expanded row so that
//when this row is next clicked, you can tell that it is already expanded
//and can therefore collapse it.
setRowExpanded(id, gridId);
}
}
//TODO: Won't draw the sub-grid on screen unless I do this, even though the
//height is set in the css selector class!! Look at this again.
expandRow.style.height = "180px";
};
/*
Collapse an already expanded grid row when it is clicked.
@param: rowid
The grid rowid, which is a unique identifier for the grid row.
@param: id
Used to identify the row that is being expanded.
*/
this.collapseRow = function(rowid, id) {
var expandedRow = Utils_v1.getDocumentElement(rowid);
//NOTE: Remove the child DIV node from the DOM.
//Destroy your child grid object.
//Remember to clear the previously set row expanded information.
if (Utils_v1.isValidValue(expandedRow)) {
expandedRow.style.height = null;
expandedRow.removeChild(Utils_v1.getDocumentElement("exp_" + id));
var gridId = this.getId() + "_" + getSubGroup() + "_" + id;
this.getManager().getGrid(gridId).stopRefreshTimer();
this.getManager().destroyGrid(gridId);
setRowCollapsed(id);
}
};
This topic is archived.