The following example shows how to hide and show details within one table row.

Example Files (Builder project Advanced Modeling/UI):

<your example path>\Advanced Modeling\UI\uml\uiTableOpenCloseDetails.xml

Running above example leads to the following UI:

Clicking on a plus-icon opens additional lines showing more details, clicking on a minus-icon will close these details. This behavior is implemented by first registering a JavaScript function that is called after the table has been drawn using the tagged value drawCallback on a <<UITableBinding>> usage:

The plus icon for opening and closing the detail lines is implemented by a span element (with text Image in the example above) that has a special CSS class assigned. These classes correspond to a certain styling defined in the themes delivered with the E2E Bridge.

The openClose() JavaScript function is called after drawing the table. Its purpose is to bind event handlers to the open/close icons that open and close the details by calling the table methods fnOpen() respectively fnClose(). For details see the comments in the following code snippet:

function openClose(table) {
	// table is a jQuery datatables object (see http://datatables.net/)
    var controller = this;
    var nodes =  table.fnGetNodes(); // gets all _visible_ HTML nodes in the tables
	var data = table.fnGetData(); // not used here, just to illustrate how to get all data
    $('td span.ui-icon', nodes).each( function () { // register handlers
        $(this).click( function () {
            var tr = this.parentNode.parentNode;
            var jNode = $(this);
            if ( jNode.hasClass('ui-icon-circle-minus') )
            {
                // This row is already open - close it
                jNode.removeClass('ui-icon-circle-minus');
                jNode.addClass('ui-icon-circle-plus');
                table.fnClose( tr );
            }
            else
            {
                // Open this row
                jNode.removeClass('ui-icon-circle-plus');
                jNode.addClass('ui-icon-circle-minus');
				// Open details by calling fnOpen. The added HTML code is generated in formatDetails()
				table.fnOpen( tr, controller.formatDetails( table, tr), 'details' );
            }
        } );
    } );
}

function formatDetails(table, tr) {
  var data = table.fnGetData( tr );

  var detailView = '
<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
  detailView += '
<tr>
<td>Rendering engine:</td>
<td>'+data[2]+' '+data[3]+'</td></tr>';
  detailView += '
<tr>
<td>Link to source:</td>
<td>Could provide a link here</td></tr>';
  detailView += '
<tr>
<td>Extra info:</td>
<td>And any further details here (images etc)</td></tr>';
  detailView += '</table>';

  return detailView;
}

The above example works well if the table is fully initialized when calling the openClose() function. However, for paginated tables the rows change after calling openClose() which would mean that the click-event handlers would not be registered for the new rows if using the above implementation. In this case we use livequery to register rows even if they are not rendered yet! The following example illustrates this.

Example Dictionary File (Builder project Advanced Modeling/UI):

 <your example path>\Advanced Modeling\UI\uml\uiTableOpenCloseDetailsInPagedTable.xml

Again, we call an operation after the table has been drawn, namely setTable():

In contrast to the non-paged table example, this operation just saves the table object in the controller for later use:

function setTable(table) {
	this.myTable = table;
}

The actual registering of the open/close events is actually done right at initialisation time by calling the openClose() method in the initial transition:

The openClose() operation does the actual work by registering all future events using the livequery interface:

function openClose() {
	var self = this; // save this for later use in another context
    $("#ID::myTable .toggleOpenClose").livequery('click',  function () {
            var table = self.myTable; // get table reference. This property is set after the table has been drawn
            var tr = this.parentNode.parentNode; // get current row
            var jNode = $(this); // get current jQuery node
	
			// the rest is as explained above in the openClose(table) code block ...

            if ( jNode.hasClass('ui-icon-circle-minus') )
            {
                /* This row is already open - close it */
                jNode.removeClass('ui-icon-circle-minus')
                jNode.addClass('ui-icon-circle-plus')
                table.fnClose( tr );
            }
            else
            {
                /* Open this row */
                jNode.removeClass('ui-icon-circle-plus')
                jNode.addClass('ui-icon-circle-minus')
                table.fnOpen( tr, controller.formatDetails( table, tr), 'details' );
            }
        } );}
Related Pages:
  • No labels