Updating Andreas's expanded grid example for V2

Hi,
I'm trying to get the excellent example of an expanded grid provided by Andreas at the URI listed below to work in version 2.

http://www.terriblecow.com/awc/ex_row/dyntable.html

It seems to work fine however, I have one problem. When I click on a row to expand it, the data in the master grid row that I click on is vertically aligned in the middle instead of at the top. The effect is that I cannot properly see the data behind the newly created child grid. In Andreas's example the row that is clicked keeps it's data 'top' aligned in the row.

I've tried changing the vertical-align style of the RowTemplate but no luck.

Anyone got ideas? Andreas, can you help please?

Thanks in advance.
BT

You have to change the alignment of the text span inside the cell template:

.aw-item-text {
    vertical-align: top;
}

Hi,

Can anyone post an example of an expanded grid in v2 beta 2?

Thanks in advance,
Kalyana Sundaram S

Hi,

Apologies for the typo, I meant 'an expanded grid in v2 beta 3'...

Regards,
Kalyana Sundaram S

BT,

Could you share how you got this working. I'm trying, but no success.

Hey,
Sorry for the late reply. Haven't been on this forum for a while and just noticed your request now.
I've attached some code, hope it helps you.
Sorry about the length of the post....wanted to be clear!

BT

//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);
    }

  };

Sorry...should also have said.

When you have created your new grid object and want to draw it on screen, you set the innerHtml property of the childDiv that you created to childGrid.toString()

childDiv.innerHtml = childGrid.toString();

BT