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 15:57] – [Initialize Client-Side Calculated TableView] 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 ===== | ===== Display Client-Side Calculated Data as a Tableview ===== | ||
- | If the setting " | + | If the setting " |
To implement this, the following three JavaScript function calls are available: | To implement this, the following three JavaScript function calls are available: | ||
==== Initialize Client-Side Calculated TableView ==== | ==== Initialize Client-Side Calculated TableView ==== | ||
- | <code javascript> | + | <code javascript> |
This allows a client-side calculated TableView to be initialized. If a TableView has already been initialized, | This allows a client-side calculated TableView to be initialized. If a TableView has already been initialized, | ||
Line 74: | Line 76: | ||
[ | [ | ||
{ | { | ||
- | " | + | " |
- | " | + | " |
- | " | + | " |
- | " | + | " |
- | " | + | |
}, | }, | ||
{ | { | ||
" | " | ||
" | " | ||
- | " | ||
" | " | ||
" | " | ||
Line 90: | Line 90: | ||
" | " | ||
" | " | ||
- | " | ||
" | " | ||
+ | " | ||
+ | }, | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
" | " | ||
} | } | ||
Line 100: | Line 105: | ||
[ | [ | ||
{ | { | ||
- | " | + | " |
- | " | + | " |
- | " | + | " |
- | " | + | " |
+ | " | ||
}, | }, | ||
{ | { | ||
Line 109: | Line 115: | ||
" | " | ||
" | " | ||
- | " | + | " |
+ | " | ||
}, | }, | ||
{ | { | ||
Line 115: | Line 122: | ||
" | " | ||
" | " | ||
- | " | + | " |
+ | " | ||
}, | }, | ||
{ | { | ||
Line 121: | Line 129: | ||
" | " | ||
" | " | ||
- | " | + | " |
+ | "test-html-column" | ||
} | } | ||
], | ], | ||
" | " | ||
true | true | ||
- | )</ | + | );</ |
- | ==== Do a Complete Update of the Data Displayed in a Client-Side Calculated | + | ==== Do a Complete Update of the Data Displayed in a Client-Side Calculated |
- | <code javascript> | + | <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: | 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). | * 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 | + | * 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_column_identifier [String, optional]: Identifier of that column, by which the initial sorting should be done. | ||
- | * sorting_descending [Boolean, optional]: If " | + | * sorting_descending [Boolean, optional]: If " |
Example: | Example: | ||
Line 145: | Line 154: | ||
" | " | ||
" | " | ||
- | " | + | " |
+ | "test-html-column" | ||
}, | }, | ||
{ | { | ||
Line 151: | Line 161: | ||
" | " | ||
" | " | ||
- | " | + | " |
+ | "test-html-column" | ||
}, | }, | ||
{ | { | ||
Line 157: | Line 168: | ||
" | " | ||
" | " | ||
- | " | + | " |
+ | "test-html-column" | ||
} | } | ||
], | ], | ||
" | " | ||
false | false | ||
- | )</ | + | );</ |
- | ==== Update the value of a single cell in a Client-Side Calculated | + | ==== Update the Value of a Single Cell in a Client-Side Calculated |
- | <code javascript> | + | <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: | 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: | ||
Line 176: | Line 188: | ||
<code javascript> | <code javascript> | ||
" | " | ||
- | " | + | " |
" | " | ||
" | " | ||
- | )</ | + | );</ |