Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
protogrid:tableview [2021-08-24 15:27] – dru | protogrid:tableview [2021-12-21 22:48] (current) – [Display Client-Side Calculated Data as a Tableview] dru | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== TableViews ====== | ====== TableViews ====== | ||
A Tableview is basically a list of all Cards of a special Proto. Essential elements in organising data in a tabular manner. : | A Tableview is basically a list of all Cards of a special Proto. Essential elements in organising data in a tabular manner. : | ||
+ | |||
+ | ===== Minimal vertical size of a TableView ===== | ||
+ | Protogrid automatically adjusts the height of TableViews to fit the data they contain and the space available. The property ' | ||
+ | |||
+ | This property also controls how many rows this TableView loads together. It is therefore a possibility for performance optimizations by the developer. Optimal in most cases is " | ||
+ | |||
+ | The setting " | ||
+ | * When an embedded TableView should be displayed as large as possible (e.g. because it displays a lot of sophisticated data). | ||
+ | * When as many rows as possible (up to 500) must be able to be selected together (e.g. for mass email sending functionality). | ||
+ | * When users typically scroll back and forth a lot in this TableView (that is, when the user does not just search for a specific document in the TableView and opens it immediately). | ||
+ | |||
===== Styling Cells of a TableView ===== | ===== Styling Cells of a TableView ===== | ||
Line 25: | 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 36: | Line 47: | ||
===== Search Dialog Boxes ===== | ===== Search Dialog Boxes ===== | ||
- | Any number of dedicated Search Dialog Boxes (aka search masks) can be configured for a TableView. Please note that depending on the number of affected Cards, it may take several minutes before a newly created or customized | + | 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). Per target field only one Filter Field can be defined at a time. Note that a maximum of two Tag Fields can be configured as filters per Search Dialog Box. | ||
+ | |||
+ | 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 | ||
+ | |||
+ | ===== 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", | ||
+ | " | ||
+ | " | ||
+ | );</ |