Table is an element comprised of table rows and columns and data is filled in corresponding rows and columns. This table class has a capability to handle large data such as pagination, selective querying, number of record per page, etc. It also has an ability to highlight a selection of data as well.
| Description | ||
| new Table(params?srcNodeRef?) |
Create a new Table widget. |
| Description | ||
| FILTER_CONTAIN |
FILTER_CONTAIN : |
|
| FILTER_ENDWITH |
FILTER_ENDWITH : |
|
| FILTER_EQUAL |
FILTER_EQUAL : |
|
| FILTER_STARTWITH |
FILTER_STARTWITH : |
|
| STYLE_NO_DATA_HIDE_HEADER |
STYLE_NO_DATA_HIDE_HEADER : |
|
| STYLE_NO_DATA_SHOW_HEADER |
STYLE_NO_DATA_SHOW_HEADER : |
| Type | Description | |
| _itemData | Dojo/store/Memory |
ItemData is a data in items. |
| _styleAttr | Object |
when you want to set style for other node. you can do this by example...
_styleAttr:{
|
| alternateRowColors | Boolean |
If true, the table will have alternating row colors. |
| alwaysShowfreezing | Boolean |
If true, show loading and it will stop after query is completed. |
| alwaysShowPaging | Boolean |
If true, page navigation panel is shown and table is shown with all applicable paging settings. If false, there is no page navigation panel and all data records are displayed in one page. |
| beginParamName | String |
Specifies first parameter name that used to begin query data when set pagePerQuery > 0 or alwaysShowPaging=true. In the process the widget will automatically calculate first record. 'Service' and 'stored procedure' must support this parameter. |
| calculateType | String |
Type of calculate. If 'hasMathRow' true must include calculateType. |
| cellOver | Boolean |
If true, a table cell is highlighted when the mouse pointer is over it. |
| cellSelect | Boolean |
If true, a user can click a table cell then the cell is highlighted. Important: 'primaryKeyField' must be defined for this to work properly. |
| cellSelected | Object[] |
An array of data in the selected table cells. |
| columns | ColumnDef[] |
Column that displays in a table. (Array of columnDef.) |
| currentPageLabel | String |
Label for current page in navigation panel. |
| dataNotFoundIcon | String |
Icon that displays when there is no data found. |
| dataNotFoundText | String |
Message that displays when there is no data found. |
| dataStore | DataStore |
A data store is a repository of a set of data objects. |
| enabledGotoPage | Boolean |
If true, a user can specifies a page to change by inputting a page number. |
| enabledTotal | Boolean |
If true, display total number of records in a table. |
| endParamName | String |
Specifies last parameter name that used to query data when set pagePerQuery > 0 or alwaysShowPaging=true. In the process the widget will automatically calculate last record. 'Service' and 'stored procedure' must support this parameter. |
| filter | Object | Function |
A data filter. |
| filterData | Object[] |
Filtered data. |
| hasMathRow | Boolean |
Insert a row to show Sum (or average), If set to true must include "calculateType" |
| idProperty | String |
An unique id for an element. (The specified value must be unique within the document.) |
| items | Dojo/store/Memory |
Items is a memory to collect a set of data. |
| loadDelay | Number |
Time period in seconds to wait before show 'alwaysShowfreezing' (loading). In case the query finished before this time period ends, 'alwaysShowfreezing' (loading) is not shown at all. |
| loadingIcon | String |
loading icon. |
| multiSelect | Boolean |
If true, a user can select multiple rows or cells. |
| multiSort | Boolean |
If true, this allows sorting in multiple column. This is server-side sorting. The stored procedure must support this else this will not function. |
| noDataStyle | String |
Style that is used when there is no data (use constant). |
| pageFromLabel | String |
Label for total number of pages in navigation panel. |
| pagePerQuery | Number |
Number of table pages per one query request. |
| pageSize | Number |
Number of records to be displayed on each page. |
| pagingBand | Object |
Number of visible page numbers for each screen size. This object contains 3 fields:
|
| pagingSize | Number |
Number of visible page numbers in page navigation. |
| primaryKeyField | String |
Primary key field name. Required when the table has these column types; TYPE_CHECKBOX or TYPE_RADIOBUTTON. The table's primary key field name must be specified before setting columns to the table. |
| rowOver | Boolean |
If true, a table row is highlighted when the mouse pointer is over it. |
| rowSelect | Boolean |
If true, a user can click a table row then the row is highlighted. Important: 'primaryKeyField' must be defined for this to work properly. |
| rowSelectedData | Object[] |
An array of data in the selected table rows. |
| sortOptions | Object[] |
Collect column that sort data. Object contains 2 values 1.id: field name that you want to sort 2.sortType: type of sorting |
| toggleSelect | Boolean |
If true, a table cell or row toggle between selected and normal states when they are clicked repeatedly. |
| total | Number |
Total number of records of data. |
| totalTextFormat | String |
Text format to show total number of records. |
| width | Number | String |
Width of table. |
| Return type | Description | |
| __baseClassInherit(constructor) | None |
get className from superclass. |
| _abortRequest() | None |
|
| bind(dataStore) | Dojo/Deferred |
Bind data to the control. |
| checkAllCurrentPage(columnDefcheckced) | Object[] |
Check all columns in current page. You can specifies |
| clearCellSelection(idAndFieldNames) | None |
Clear cell selection. If no parameter is given, all selections are unselected. Otherwise, only specified selections are unselected. |
| clearRowSelection(ids) | None |
Clear row selections. If no parameter is given, all selections are unselected. Otherwise, only specified selections are unselected. |
| filter(exp) | Object[] |
Filter data by defined conditions. |
| getCheckBoxCheckedData(columnDef) | Object[] |
Return columns that checkbox is checked. |
| getCheckBoxUnCheckedData(columnDef) | Object[] |
Return columns that checkbox is unchecked. |
| getRadioCheckedData(columnDef) | Object[] |
Return columns that radio button is checked. |
| getRadioUnCheckedData(columnDef) | Object[] |
Return columns that radio button is unchecked. |
| hide(elem?) | None |
Hide a specified element. The hidden element will not be displayed at all. |
| isVisible(elem?) | Boolean |
Return true if the element is visible, otherwise false. |
| refresh() | None |
Refresh a table. |
| reset() | None |
Reset all state and value to default. |
| show(elem?) | None |
Display a specified element. |
| toggle(elem?) | None |
Toggle visibility of a specified element. |
| unbind() | None |
Remove binded data from control |
| Description | ||
| bind-completed |
Fires when bind data completed. |
|
| bind-error |
Fires when bind data error. |
|
| cell_Click |
Fires when click on a cell. |
|
| cell_MouseOut |
Fires when mouse pointer is moved out from cell. |
|
| cell_MouseOver |
Fires when mouse pointer moved over a cell. |
|
| filter_Completed |
Fires when a user clicks on an element. |
|
| header_Click |
Fires when click header. |
|
| page_Changed |
Fires when page changed. |
|
| query-data-completed |
Fires when query data completed. |
|
| query-data-error |
Fires when query data error. |
|
| query-data-start |
Fires when start query data. |
|
| row_Click |
Fires when click on a row. |
|
| row_MouseOut |
Fires when mouse pointer is moved out from row. |
|
| row_MouseOver |
Fires when mouse pointer moved over a row. |
|
| sort_Click |
Fires when click on a sort icon. The object from this event is used as follows:
|
ItemData is a data in items.
when you want to set style for other node. you can do this by example...
_styleAttr:{
style-property:effected-node
}
this property was effected where this class was inherited and your widget was called by...
var widget = new YourWidget({
style:{
style-property:style-value
}
});
now effected-node in you widget will have style-property = style-value
Default value: {}
If true, the table will have alternating row colors.
Default value: false
If true, show loading and it will stop after query is completed.
Default value: true
If true, page navigation panel is shown and table is shown with all applicable paging settings. If false, there is no page navigation panel and all data records are displayed in one page.
Default value: true
Specifies first parameter name that used to begin query data when set pagePerQuery > 0 or alwaysShowPaging=true. In the process the widget will automatically calculate first record. 'Service' and 'stored procedure' must support this parameter.
Default value: BEGIN
Type of calculate. If 'hasMathRow' true must include calculateType.
Default value: sum
If true, a table cell is highlighted when the mouse pointer is over it.
Default value: false
If true, a user can click a table cell then the cell is highlighted. Important: 'primaryKeyField' must be defined for this to work properly.
Default value: false
Message that displays when there is no data found.
Default value: ไม่พบข้อมูล
If true, a user can specifies a page to change by inputting a page number.
Default value: false
Specifies last parameter name that used to query data when set pagePerQuery > 0 or alwaysShowPaging=true. In the process the widget will automatically calculate last record. 'Service' and 'stored procedure' must support this parameter.
Default value: END
A data filter.
// 1. for type of Function
this.set("filter", lang.hitch(this, function (item) {
return item["CHECK"] == true;
}));
// 2. for type of Object
this.set("filter", { CHECK: true });Insert a row to show Sum (or average), If set to true must include "calculateType"
Default value: false
An unique id for an element. (The specified value must be unique within the document.)
Default value: "id"
Items is a memory to collect a set of data.
Time period in seconds to wait before show 'alwaysShowfreezing' (loading). In case the query finished before this time period ends, 'alwaysShowfreezing' (loading) is not shown at all.
Default value: 2
If true, this allows sorting in multiple column. This is server-side sorting. The stored procedure must support this else this will not function.
Default value: false
Style that is used when there is no data (use constant).
Default value: STYLE_NO_DATA_SHOW_HEADER
Number of visible page numbers for each screen size. This object contains 3 fields:
phone. tablet. desktop. pagingBand: {
phone: 3,
tablet: 7,
desktop: 10}Primary key field name. Required when the table has these column types; TYPE_CHECKBOX or TYPE_RADIOBUTTON. The table's primary key field name must be specified before setting columns to the table.
If true, a table row is highlighted when the mouse pointer is over it.
Default value: true
If true, a user can click a table row then the row is highlighted. Important: 'primaryKeyField' must be defined for this to work properly.
Default value: false
Collect column that sort data. Object contains 2 values 1.id: field name that you want to sort 2.sortType: type of sorting
If true, a table cell or row toggle between selected and normal states when they are clicked repeatedly.
Default value: true
Text format to show total number of records.
Default value: จำนวนผลลัพธ์ {total} รายการ
get className from superclass.
<Object>
constructor
|
Required |
|
Bind data to the control.
<DataStore>
dataStore
|
Required |
DataStore of data for binding to the control. |
Check all columns in current page. You can specifies checked is true or false.
Clear cell selection. If no parameter is given, all selections are unselected. Otherwise, only specified selections are unselected.
<Object[]>
idAndFieldNames
|
Required |
Array of row ids and field names of cells |
Clear row selections. If no parameter is given, all selections are unselected. Otherwise, only specified selections are unselected.
<Object[]>
ids
|
Required |
Array of row ids |
Filter data by defined conditions.
<Object>
exp
|
Required |
conditions that used to filter data. |
Return columns that checkbox is checked.
<Object>
columnDef
|
Required |
Column detail. |
Return columns that checkbox is unchecked.
<Object>
columnDef
|
Required |
Column detail. |
Return columns that radio button is checked.
<Object>
columnDef
|
Required |
Column detail. |
Return columns that radio button is unchecked.
<Object>
columnDef
|
Required |
Column detail. |
Hide a specified element. The hidden element will not be displayed at all.
<Node>
elem
|
Optional |
Specified element to be hidden. |
Return true if the element is visible, otherwise false.
<Node>
elem
|
Optional |
Specified element to be checked. If not specified, domNode of the widget is used instead. |
Refresh a table.
Reset all state and value to default.
Display a specified element.
<Node>
elem
|
Optional |
Specified element to be displayed. |
Toggle visibility of a specified element.
<Node>
elem
|
Optional |
Specified element to toggle visibility. |
Remove binded data from control
Fires when bind data completed.
<Object>
arg
|
Result from bind data complete. |
Fires when click on a cell.
Fires when mouse pointer is moved out from cell.
Fires when mouse pointer moved over a cell.
Fires when a user clicks on an element.
<Object[]>
filterData
|
Filtered data. |
Fires when query data completed.
<Object>
arg
|
Result from query data complete. |
Fires when query data error.
<Object>
err
|
Rrror detail from query data. |
Fires when click on a row.
Fires when click on a sort icon. The object from this event is used as follows:
<Object[]>
sortOption
|
An array of object. The object contains 2 fields: |