The Service Data Table control, similar to the Table control, allows you to create a repeating table. The Service Data Table must specify an AJAX service that returns the data that will be displayed in the table. For this reason, the Service Data Table should never be bound to a variable.
Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).
This control is most commonly used when wanting to display data from an AJAX service in a table format.
Behavior
Data Service Data service to use with this control
Service Data Input data for the data service. Its type should match the input type for the service.
Start Empty Load an empty data table
Selection Mode None, Single, Multiple
Show Footer Visibility of the footer
Show Table Stats Show table statistics (e.g. "Showing 1 to 5 of 59 entries")
Show Pager Enable pagination
Show Page Sizer Enable option to choose number of rows to display per page
Initial Page Size Initial maximum number of entries to be shown
Note: The pager only displays 5 pagers, therefore, depending on the initial page size, and the number of records, the pager may not be consecutive (1, 2, 3...)
example 1:Table has a total of 50 entries, and the initial page size is set to 10
example 2: Table has a total of 50 entries, and the initial page size is set to 5
The user should click the 'Next' button to navigate through the table entries in order, or use the page number buttons to move quickly through the pages.
Columns
Data Element Name Name of data element from object that populates the table
Render as Simple HTML, Custom (The Service Data Table cannot render cells as a Coach View)
Visibility Visible, Read-Only, None
Sortable When checked, data is sortable
Options Optional formatting using already created objects. For example, if there is a Date Picker control and the desired format is Monday 08 Jun, 2015, enter: "datePattern": "EEEE dd MMM, yyyy"
| (e.g. "decimalPlaces": 2, "decimalSeparator": ".", "thousandSeparator": ",", "prefix": "$") |
| Decimal | thousandsSeparator, decimalPlaces, decimalSeparator, postfix, prefix |
| DatePicker | datePattern |
| Link | href |
| Integer | thousandSeparator |
Options only work if you are rendering it as HTML or Custom; with Custom rendering, inside of the On New Cell event, you can use cell.getFormattedValue() to get a value with formatting options applied.
Css Configure a specific column with styles or CSS classes. If there is a colon in this value, the table control assumes that you have specified a CSS style, otherwise, it will assume that you have specified one or more CSS class names. For example, color: #00ff00
Width Width of column in px, em, or %, if no unit is specified px is assumed. Note: It is suggested to leave one column's width undefined to allow the browser to calculate any remaining space and assign it to the column whose width was not specified.
Appearance
Table Style Default, Elegant, Bordered, Striped, Hover Row, Condensed
Color Style
Width Width in px, %, em; for example: 50px, 20%, 0.4em, if no unit is specified, px is assumed
Height Height of table in px, %, em (not including the header or footer if shown);
for example: 50px, 20%, 0.4em, if no unit is specified, px is assumed. If you specify a height and the rows displayed exceeds the available vertical space in the body of this table, the body becomes vertically scrollable.
Performance
Async Loading Provides a better UI experience for large data sets (at the expense of slower overall row-loading time once the section starts loading).
Async Batch Size Defines how many rows are loaded synchronously in an asynchronous batch. This can help tune/optimize synchronous vs. asynchronous loading performance. The number of rows after which the browser can process user requests (i.e.. click on a button, etc.)
Example
These are the configuration option settings...
This is the result...
Note: This Service Data Table is populated by the Test Table Data Service, this is the main difference between the Table control and the Service Data Table control.
Events
With the Service Data Table control, there are 6 types of event handlers:
- On Load When the page loads
- On Service Data Loaded When the service data is loaded
- On Service Data Error When the AJAX service has thrown an error
- On Custom Cell When there is a custom cell (In order to make use of this event, you must set the configuration in Columns)
- On Rows Loaded When rows are loaded
- On Row Selected by User When a row is selected by user
You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.
Methods
For detailed information on the available methods for this control, access the JS Doc file.
- Author: Courtney Silva
- Date Created: June 24, 2015
- Date Modified: March 10, 2016
Comments