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 field 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.
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 field is true. By default, the enableSorting field 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 field also affects the default sort. You can customize the sort behavior by setting the DataGridColumn comparatorFunction field and by writing the function to which that field 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.
import org.eclipse.edt.rui.widgets.DataGrid;
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 field 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 field. Those functions run before the functions specified in the following DataGrid fields, which are listed in runtime order: headerBehaviors, behaviors, and editingBehaviors.
A set of functions are provided for use with the formatters field. For details, see the following file in the org.eclipse.edt.rui project, org.eclipse.edt.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 fields 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[];
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 fields 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 field to false when more rows are available than can be seen, and if you do not set the showScrollBar field to true, the user cannot access the unseen rows.
Other supported functions are described in “Rich UI widget fields,” in the EGL Programmer’s Guide.
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 field. 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 field. 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 field. For example, only the first entry submitted to the setSelection function is selected if your code tries to select two rows when the selectionMode field allows only one.
Other supported functions are described in “Rich UI widget functions,” in the EGL Programmer’s Guide.
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 org.eclipse.edt.rui.widgets.Box; import org.eclipse.edt.rui.widgets.DataGrid; import org.eclipse.edt.rui.widgets.DataGridColumn; import org.eclipse.edt.rui.widgets.DataGridTooltip; import org.eclipse.edt.rui.widgets.TextArea; import eglx.ui.rui.RUIHandler; Record Stock Symbol STRING; Quote DECIMAL(5,2); NumShares INT; end handler MyHandler 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 o fieldName is the column name ('"+fieldName+"')." + "\nYou can access cell content:" + "\n o td.innerText is '"+td.innerText+"'." + "\n o rowData["+fieldName+"] is '"+rowData[fieldName] + "'."; return (tooltipBox); end end