Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| protogrid:tableview [2021-11-08 14:32] – dru | protogrid:tableview [2021-12-21 22:48] (current) – [Display Client-Side Calculated Data as a Tableview] dru | ||
|---|---|---|---|
| Line 36: | Line 36: | ||
| It's also possible to hide certain Cards in the list of all Cards. For preparation you have to [[protogrid: | It's also possible to hide certain Cards in the list of all Cards. For preparation you have to [[protogrid: | ||
| - | ===== Reload | + | ===== Reload |
| - | The following code example shows how a table view can be reloaded programatically without a full page refresh. | + | The following code example shows how a TableView |
| <code javascript> | <code javascript> | ||
| Line 49: | Line 49: | ||
| Any number of dedicated Search Dialog Boxes (aka search masks) can be configured for a TableView. | Any number of dedicated Search Dialog Boxes (aka search masks) can be configured for a TableView. | ||
| - | Any number of Filter Fields can be assembled for a Search Dialog Box (each configured either as a filter or as a sorter). | + | Any number of Filter Fields can be assembled for a Search Dialog Box (each configured either as a filter or as a sorter). |
| + | |||
| + | Unlike normal views, in Search Dialog Boxes users basically have to fill in/set all filters. An empty filter field in a Search Dialog Boxes means a filter for those Cards where the target field is also empty. | ||
| Please note that depending on the number of affected Cards, it may take several minutes before a newly created or modified search dialog box can be used by the users. | Please note that depending on the number of affected Cards, it may take several minutes before a newly created or modified search dialog box can be used by the users. | ||
| + | |||
| + | ===== Display Client-Side Calculated Data as a Tableview ===== | ||
| + | If the setting " | ||
| + | |||
| + | To implement this, the following three JavaScript function calls are available: | ||
| + | |||
| + | ==== Initialize Client-Side Calculated TableView ==== | ||
| + | <code javascript> | ||
| + | |||
| + | This allows a client-side calculated TableView to be initialized. If a TableView has already been initialized, | ||
| + | * tableview_id [String]: ID of the TableView to be initialized (corresponds to the Card ID of the TableView definition). | ||
| + | * header_cells [Array of Objects]: Definition of the columns used. | ||
| + | * click_handler_callback [Function, optional]: Function which is called when the user clicks inside the TableView. | ||
| + | * initial_table_date [Array of Objects]: Initial table data to display. | ||
| + | * initial_sorting_column_identifier [String, optional]: Identifier of that column, by which the initial sorting should be done. If not set, the TableView will be sorted by the first sortable column by default. | ||
| + | * initial_sorting_descending [Boolean, optional]: If " | ||
| + | |||
| + | Example: | ||
| + | <code javascript> | ||
| + | " | ||
| + | [ | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | ], | ||
| + | function(clicked_row, | ||
| + | alert(" | ||
| + | }, | ||
| + | [ | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | ], | ||
| + | " | ||
| + | true | ||
| + | );</ | ||
| + | |||
| + | ==== Do a Complete Update of the Data Displayed in a Client-Side Calculated TableView ==== | ||
| + | <code javascript> | ||
| + | |||
| + | This allows to update all data displayed in a client-side calculated TableView. The TableView has to already been initialized. The function parameters can be set as follows: | ||
| + | * tableview_id [String]: ID of the TableView to be updated (corresponds to the Card ID of the TableView definition). | ||
| + | * new_table_data [Array of Objects]: Initial table data to display. | ||
| + | * sorting_column_identifier [String, optional]: Identifier of that column, by which the initial sorting should be done. | ||
| + | * sorting_descending [Boolean, optional]: If " | ||
| + | |||
| + | Example: | ||
| + | <code javascript> | ||
| + | " | ||
| + | [ | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | ], | ||
| + | " | ||
| + | false | ||
| + | );</ | ||
| + | |||
| + | ==== Update the Value of a Single Cell in a Client-Side Calculated TableView ==== | ||
| + | <code javascript> | ||
| + | |||
| + | This allows to update a single cell value in a client-side calculated TableView. The TableView has to already been initialized. The function parameters can be set as follows: | ||
| + | * tableview_id [String]: ID of the TableView to be updated (corresponds to the Card ID of the TableView definition). | ||
| + | * new_cell_value [String or Number]: Value with which the cell content is to be replaced. | ||
| + | * row_identifier [String]: Identifier of the row in which the cell value is to be replaced. | ||
| + | * column_identifier [String]: Identifier of the column in which the cell value is to be replaced. | ||
| + | |||
| + | Example: | ||
| + | <code javascript> | ||
| + | " | ||
| + | "Aaron Miller", | ||
| + | " | ||
| + | " | ||
| + | );</ | ||
