Data Table - Events & Methods
Events
Data Table behavior can be customized with the help of the call-back events. These events can be accessed from the events tab on the Properties panel. The trigger for the event can be JavaScript, another Variable call, and more.
Event | Trigger and JavaScript Usage |
---|---|
On Row Click | This event will be called when a row in Data Table is clicked. Note: This event can happen when selecting or deselecting a row. |
Event | Trigger and JavaScript Usage |
---|---|
On Row Select | This event will be called when a row from Data Table is selected |
Event | Trigger and JavaScript Usage |
---|---|
On Row Deselect | This event will be called when a row from Data Table is deselected. |
Event | Trigger and JavaScript Usage |
---|---|
On Data Sort | This event will be called when the Data Table header is clicked to sort by a particular column. |
Event | Trigger and JavaScript Usage |
---|---|
On Header Click | This event will be called when the Data Table header is clicked. |
Event | Trigger and JavaScript Usage |
---|---|
On Before Row Delete | This event is called before a record is deleted in a table. |
Event | Trigger and JavaScript Usage |
---|---|
On Column Select | This event will be called when a column in Data Table is selected. Note: This event is accessible if you enable Column Section property from Advanced Settings. |
Event | Trigger and JavaScript Usage |
---|---|
On Column Deselect | This event will be called when a column in Data Table is deselected. Note: This event is accessible if you enable Column Section property from Advanced Settings. |
Event | Trigger and JavaScript Usage |
---|---|
On Record Delete | This event will be called when a record is deleted from the underlying data entity. |
- This event will be triggered for Editable Data Table with delete action defined.
- For Data Table with Form option, this event will be available in the corresponding Form widget and not with Data Table.
Event | Trigger and JavaScript Usage |
---|---|
On Before Record Insert | This event will be called before a new record is inserted in the underlying data entity. |
- This event is triggered for Editable Data Table with insert action defined. Use Case: Populate the date modified or modified user to the current date or logged in user
- For Data Table with Form option, this event will be available in the corresponding Form widget and not with Data Table.
Event | Trigger and JavaScript Usage |
---|---|
On Record Insert | This event will be called after a new record is inserted in the underlying data entity. |
- This event is triggered only for Editable Data Table with insert action defined.
- For Data Table with Form option, this event will be available in the corresponding Form widget and not with Data Table.
Event | Trigger and JavaScript Usage |
---|---|
On Before Record Update | This event will be called before a record is updated to the underlying data entity. |
- This event is triggered only for Editable Data Tables with update action defined.
- For Data Table with Form option, this event will be available in the corresponding Form widget and not with Data Table.
Event | Trigger and JavaScript Usage |
---|---|
On Record Update | This event will be called after a record is updated to the underlying data entity. |
- This event is triggered only for Editable Data Tables with update action defined.
- For Data Table with Form option, this event will be available in the corresponding Form widget and not with Data Table.
Event | Trigger and JavaScript Usage |
---|---|
On Before Data Render | This event will be called the before the data is rendered in the Data Table. Note: The data accessible is restricted to the current page of the Data Table. Use Case: If you want to change the display value based on the values of a column |
Event | Trigger and JavaScript Usage |
---|---|
On Before Form Render | (Only for Data Table with Quick-Edit and Inline-Edit) This event is fired on the edit of a row and before the inline form is rendered. |
This gives access to data to be displayed in the form Use Case: You can use this event to edit values to be displayed in the form. Edit also can be prevented in form based on some condition.
Event | Trigger and JavaScript Usage |
---|---|
On Form Render | This event is accessible for Data Table with Quick-Edit and Inline-Edit templates. This event is called after the inline form is rendered. |
This gives access to the widgets in the form. Use Case: Individual widget can be disabled based on a condition.
Event | Trigger and JavaScript Usage |
---|---|
On Error | (ONLY for Data Table with Quick-Edit and Inline-Edit) This event will be called after the edit/insert/delete operation returns a failure response |
Event | Trigger and JavaScript Usage |
---|---|
On Before Export | (ONLY for Data Table with Export Format selected) This event will be called before downloading the file. Any data changes like file format changes, field expression, size changes etc can be performed here. Returning false from the script will stop the file download. |
Event | Trigger and JavaScript Usage |
---|---|
On Before Filter | This event will be called when filter is applied on Data Table and before the search is triggered by the Data Table. Search values can be modified in this method. If false is returned from the method, Data Table filter will be stopped. |
Event | Trigger and JavaScript Usage |
---|---|
On Data Render | This event will be called when the data is rendered in the Data Table. Note: This gives access to data displayed on the current page of the Data Table Use Case: You can use this event to add a class to a particular row. |
Event | Trigger and JavaScript Usage |
---|---|
On Pagination Change | This event is called on change of pagination. |
Event Flow
Following is the flow of events for each action triggered on the Data Table.
Methods
Data Table has few methods exposed on widget scope which can be accessed via JavaScript. For the following script samples, we are considering the hrdb Department table. DepartmentGrid is bound to the Database CRUD Variable corresponding to the Department table.
- To refresh the data in data table with the currently applied filters and sort:
- To clear the filters applied on data table:
- To focus on a field in edit mode(applicable to inline and quick edit data tables alone):
- To change a property of a column:
- To force re-render Data Table:
- To change a property of a column:
- To change value of a field which is in edit mode (applicable to inline and quick edit data tables alone):
- To retrieve value of a field which is in edit mode (applicable to inline and quick edit data tables alone):
- To select a row:
- To deselect a row:
Deselect will work only for data table with multiselect enabled on it.
- Working with selected item:
- Set filter mode:
Inline edit for service variable
Inline editing can be enabled for a Data Table when bound to a Web Service/Java Service Variable
- Go to Advanced Settings for the Data Table.
- Go to the Actions tab.
- Select the New, Edit and Delete actions.
- As the Data Table is bound to Variable based on APIs exposed by the web service/ java service which returns list of records, for edit, update or delete user should map it to respective variables. This can be achieved through events on data table.
- To On Record Insert:
- To On Record Update:
- On Record Delete:
Methods: Below methods can be used for inline editing (applicable to inline and quick edit data tables alone)
- To edit a row
- To add a new row
- To save a row
- To cancel a row edit
- To delete a row
- To hide the edit row and go back to view mode