A Rich UI dataGrid widget defines an array of row values in a table. This topic gives general information about the widget and then provides reference detail.
Here is the Record part:
Record Stock type BasicRecord
Symbol STRING;
NumShares INT;
Quote DECIMAL(5,2);
SelectQuote Boolean;
end
The field names are important because they are referenced later, in the declaration of the grid columns.
stockList Stock[] = [
new Stock{SelectQuote = false, Symbol = "Company1", Quote = 100.00, NumShares = 40 },
new Stock{SelectQuote = false, Symbol = "Company2", Quote = 200.00, NumShares = 10 } ];
The order of fields in a given data record is not meaningful. However, by default, the order of the data records in the array is the order of rows in the data grid.
myGrid DataGrid{...};
columns = [
new DataGridColumn { name = "Symbol", displayName = "Company Symbol"},
new DataGridColumn { name = "Quote", displayName = "Price Per Share" },
new DataGridColumn { name = "NumShares", displayName = "Number of Shares" },
new DataGridColumn { name = "Total",
displayName = "Value of Shares",
formatters = [totalFormatter] }
]
Each of the first three declarations of type DataGridColumn references a record field in the array of Stock records. The fourth declaration identifies a calculated column, which is a column that has no corresponding record field; in this case, no record field named Total.
The order of the DataGridColumn elements determines the order in which the columns are displayed.
data = stockList as any[]
Each element in the array provides a subset of the data required for a row in the data grid.
In most cases, Rich UI requires that you declare variables before you reference them. In this example, stockList must be declared before the data grid.
function totalFormatter(class String inout, value String inout, rowData any in)
// display the total value of the shares after calculating the value
// from the content of two other columns in the same row
value = rowData.NumShares as INT * rowData.Quote as DECIMAL(5,2);
end
The invocation of a function referenced in the formatters property occurs once per row, before the grid is rendered. The content of the entire row is available in the third parameter, and you can update the column-specific cell by setting either the first parameter, which controls the CSS class, or the second parameter, which controls the value.
Re-render the grid only in an on-construction function, in a listener, or in another event handler such as one that runs in response to a button click.
The data grid does not support initialization under a parent widget which is hidden by CSS display:none. To append a data grid to a hidden parent, you must explicitly call the DataGrid render function after the parent widget becomes visible.
As noted, a data grid supports column sorting. A sort occurs when the user clicks the column header, but only if the value of the DataGridColumn enableSorting property is true. By default, the enableSorting property is true, and a sort orders the column content in accordance with the ASCII string value of the cells. The value of the DataGridColumn ignoreCase property also affects the default sort. You can customize the sort behavior by setting the DataGridColumn comparatorFunction property and by writing the function to which that property refers.
myGrid.data[3];
In addition to sorting columns, the user can drag a column and drop it to another position. This capability is always enabled.
Delegate ColumnComparator(data1 any in, data2 any in) returns (int) end
Function CompareTwo(myFirst ANY in, mySecond ANY in) returns (int)
if ( (myFirst as string )[8:8] == "6")
return(-1);
else
return(1);
end
end
If the columnComparator property refers to the CompareTo function, the user's click places Company6 at the top or bottom of the column.
Delegate CellFormatter(class String inout, value String inout, rowData any in) end
The functions for the formatters field are invoked in the order in which the DataGridColumn entries are defined in the DataGrid columns property. Those functions run before the functions specified in the following DataGrid properties, which are listed in runtime order: headerBehaviors, behaviors, and editingBehaviors.
A set of functions are provided for use with the formatters property. For details, see the following file in the com.ibm.egl.rui project, com.ibm.egl.rui.widgets package: DataGridFormatters.egl.
.EglRuiDataGridHeaderCell {
text-align: center;
}
You might access the sortDirection field in a comparator function.
Delegate
DataCellBehavior(grid DataGrid in, cell Widget in, rowData ANY in,
rowNumber INT in, column DataGridColumn in)
end
The DataGrid properties are processed in the following order: headerBehaviors, behaviors, and editingBehaviors.
Delegate
CheckBoxListener(grid DataGrid in) end
end
function myListener(grid DataGrid in)
columnRetrieve Stock[];
columnRetrieve = grid.getChecked() as Stock[];
numberOfRows int = columnRetrieve.getSize();
if (numberOfRows > 0)
for (i int from 1 to numberOfRows)
sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked.");
end
end
end
For details on setting check boxes from your code, see the later description of the DataGrid checkAll and setChecked functions.
Delegate DataLoader(startRow int in, endRow int in, sortFieldName string in,
sortDirection int in) returns(boolean)
end
if (dataComplete)
return(true);
else
// do the processing needed to add data to the specified rows
end
The example assume that, after a service provides all that data that can be shown, you are setting a variable named dataComplete to true. The condition in the if statement prevents the data loader from doing subsequent work in your application.
myGrid.dataLoader = myDataLoader;
myGrid.data = myDataList as ANY[];
For an example use of the dataLoader property, see "End-to-end processing with a UI program and a data grid."
Delegate
EditorBehavior(grid dataGrid in, cell Widget in, rowData any in,
rowNumber INT in, column DataGridColumn in, value ANY in)
returns (Widget)
end
The return value is a widget or null.
The DataGrid properties are processed in the following order: headerBehaviors, behaviors, and editingBehaviors.
Delegate
SelectionListener(grid DataGrid in) end
end
function myListener(grid DataGrid in)
columnRetrieve Stock[];
columnRetrieve = grid.getSelection() as Stock[];
numberOfRows int = columnRetrieve.getSize();
if (numberOfRows > 0)
for (i int from 1 to numberOfRows)
sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected.");
end
end
end
For details on row selection in your code, see the later description of the DataGrid selectAll and setSelection functions.
Delegate
SortListener(grid DataGrid in, sortColumn DataGridColumn in) end
end
Here is an example function:
function mySortListener(grid DataGrid in, sortColumn DataGridColumn in)
syslib.writeStdOut("You sorted the " + sortColumn.displayName + " column. ");
end
The selected rows can span multiple grid pages.
If you set the showButtonBar property to false when more rows are available than can be seen, and if you do not set the showScrollBar property to true, the user cannot access the unseen rows.
function getChecked() returns (any[])
function myResponse (e event in)
columnRetrieve Stock[];
columnRetrieve = grid.getChecked() as Stock[];
numberOfRows int = columnRetrieve.getSize();
if (numberOfRows > 0)
for (i int from 1 to numberOfRows)
sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked.");
end
end
end
The getChecked function retrieves the records referenced by the DataGrid data property. However, the order in which the data is returned depends on the current display, which is affected by the user's sort.
function getCurrentPageIndex() returns (int)
function getPageCount() returns (int)
function getSelection() returns (any[])
function myResponse (e event in)
columnRetrieve Stock[];
columnRetrieve = grid.getSelection() as Stock[];
numberOfRows int = columnRetrieve.getSize();
if (numberOfRows > 0)
for (i int from 1 to numberOfRows)
sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected.");
end
grid.deSelectAll();
else
sysLib.writeStdOut("Select one or more rows.");
end
end
The getSelection function retrieves the records referenced by the DataGrid data property. However, the order in which the data is returned depends on the current display, which is affected by the user's sort.
function goToPage(pageNumber int in)
function setChecked(selection any[] in)
function start()
grid.setChecked([grid.data[2], grid.data[3]]);
// alternative coding
myAny ANY[] = [grid.data[2], grid.data[3]];
grid.setChecked(myAny);
end
function setSelection(selection any[] in)
function start()
grid.setSelection([grid.data[3], grid.data[2]]);
// alternative coding
myAny ANY[] = [grid.data[3], grid.data[2]];
grid.setSelection(myAny);
end
The ability to select rows depends on the setting of the DataGrid selectionMode property. For example, only the first entry submitted to the setSelection function is selected if your code tries to select two rows when the selectionMode property allows only one.
gridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 };
import egl.rui.widgets.DataGridToolTip;
Delegate DataGridTooltipTextProvider(rowData any in, fieldName String in,
td Widget in) returns(Box)
end
stocks Stock[] = [
new Stock{Symbol = "Company1", Quote = 100, NumShares = 40, SelectQuote = false},
new Stock{Symbol = "Company2", Quote = 200, NumShares = 10, SelectQuote = false}
];
if (rowData.Quote as int == 200)
// place content in a box (the tooltip) and return the tooltip
end
Here is an example that you can try in your workspace:
package client;
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.DataGrid;
import com.ibm.egl.rui.widgets.DataGridColumn;
import com.ibm.egl.rui.widgets.DataGridTooltip;
import com.ibm.egl.rui.widgets.TextArea;
import egl.ui.rui.RUIHandler;
Record Stock
Symbol STRING;
Quote DECIMAL(5,2);
NumShares INT;
end
handler MyDataGrid1 type RUIhandler { initialUI = [ grid ],
onConstructionFunction = start }
stockList Stock[] = [
new Stock{Symbol = "Company1", Quote = 100.00, NumShares = 40 },
new Stock{Symbol = "Company2", Quote = 200.00, NumShares = 10 },
new Stock{Symbol = "Company3", Quote = 100.00, NumShares = 40 } ];
grid DataGrid {
data = stockList as any[],
behaviors = [myDataGridToolTip.setToolTips],
pageSize = 15,
columns = [
new DataGridColumn { name = "Symbol", displayName = "Symbol Display"},
new DataGridColumn { name = "Quote", displayName = "Quote Display"},
new DataGridColumn { name = "NumShares", displayName = "NumShares Display" }]};
myDataGridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 };
tooltipBox Box{columns=1, width=475};
function start()
end
function tooltipText (rowData any in, fieldName String in, td Widget in) returns (Box)
tooltipArea TextArea { width=450, height=100, paddingLeft=7, marginLeft=7 };
tooltipBox.children = [ tooltipArea ];
tooltipArea.text =
"In function tooltipText (a tooltip provider):" +
"\n fieldName is the column name ('"+fieldName+"')." +
"\nYou can access cell content:" +
"\n td.innerText is '"+td.innerText+"'. \nThanks to EGL dynamic access" +
"\n rowData[fieldName] is also '"+rowData[fieldName] + "'.";
return (tooltipBox);
end
end