The Table Object

Table is a data bound component used to view data (like database table records). It takes XML data as an input. The next example shows a single column table:

var tblSample = new TTable(10, 'GetGroupPermissions.php', false);
var wndTableSample = createWindow('Table Sample');

tblSample.addColumn('Action', 'Action', 300);
tblSample.setAuxiliaryParameters('<GroupId>/GroupId>');
tblSample.update();

wndTableSample.add(tblSample);
showModal(wndTableSample);

Table object constructor takes four parameters:

new TTable(numberOfRows, url, autoUpdate, selection);

Where:

Data Structure

Data returned from the server must have specific structure, so the table object can read it.

Data Structure From Server:

<Root>
    <NumberOfPages>Number of pages in the list</NumberOfPages>
    <PageNumber>Current page number</PageNumber>
    <Rows>
      <Row>
        <Id>Record id</Id>
        <ColumnName1(Column name must be identical to the columnId defined in addColumn method)>Value of ColumnName1</ColumnName1>
        <ColumnName2>Value of ColumnName2</ColumnName2>
        .
        .
        .
      </Row>
      .
      .
      .
    </Rows>
</Root>

Data sent to the server have specific structure also. It contains data you may use at your server script. These data is sent by table object automatically, so you do not need to do anything here.

Data Structure To Server:

<Vtf>
    <SessionId>This tag will be passed only if you define g_sessionId variable</SessionId>
    <ItemsOnPage>Number of item on each page</ItemsOnPage>
    <PageNumber>Current page number</PageNumber>
    /*
       You may pass other tags here to use on the server. Use setAuxiliaryParameters property to do so.
    */
    <Column1>Sort mode for the first column (0 = no sort, 1 = incremental, 2 = decremental)</Column1>
    <Column2>Sort mode for the second column (0 = no sort, 1 = incremental, 2 = decremental)</Column2>
    .
    .
    .
</Vtf>
Table Methods and Properties
Method/Property Description
addColumn Adds a new column to the table object. Form:
addColumn(columnId, headerTitle, columnWidth, columnAlignment)
Example:
tblSample.addColumn('column1', 'First Column', 200, 0 /* 0 = center, 1 = left, 2 = right */);
clearSelection Clears all selection from the table object when it is in Single or Multi selection mode
getCellByName Gets table cell value (contents) by record id and column id. Form:
getCellByName(recordId, columnId)
getSelectedIds Gets an array of selected records ids or an empty array in None selection mode or if there is no selection
getSelectionMode Gets selection mode of the table object
hasSelection Determines if there is any selected row or not
loadXML Load XML data to the table. This method takes XML document as an argument: tblSample.loadXML(xmlDoc);

Tip Use this method if your XML data is in your hands and you do not need to connect to the server using update method
setAuxiliaryParameters Sets addtional parameters that you want to pass to the server script which is called via update method. Example:
tblSample.setAuxiliaryParameters('<GroupId>1</GroupId>');
setCell Sets a table cell value. Form: setCell(rowId, columnNumber, value)
setOnClick Sets an event handler for the click event on table object row. Form:
setOnClick(eventHandler)

Tip You get the clicked row id as an argument in the eventHandler
setOnSelectionChangedCallback Sets an event handler for the selected row changed event on the table object. Form:
setOnSelectionChangedCallback(eventHandler)
setSelectionMode Sets table object selection mode (None, Single, or Multi)
sortByMultipleColumns Allows multi columns sort if set to true: tblSample.sortByMultipleColumns(true);

Tip You get each column sort mode by XML sent the from table object using update method
update Sends request to the server script to fetch data. Form:
update(updateCallback)
Where updateCallback will be called after the data gets from the server