Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
protogrid:tableview [2021-11-18 11:55] – 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 | + | ===== Display |
+ | 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_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 | ||
+ | <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", | ||
+ | " | ||
+ | " | ||
+ | );</ |