Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
protogrid:tableview [2021-11-18 15:58] – [Do a Complete Update of the Data Displayed in a Client-Side Calculated Tableview] druprotogrid: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:filter|define a filter]]. By choosing one of the filter options the related Cards will be displayed. It's also possible to hide certain Cards in the list of all Cards. For preparation you have to [[protogrid:filter|define a filter]]. By choosing one of the filter options the related Cards will be displayed.
  
-===== Reload Table View Without Page Refresh ===== +===== Reload TableView Without Page Refresh ===== 
-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 can be reloaded programatically without a full page refresh.
  
 <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). maximum of two Tag Fields can be configured as filters per Search Dialog Box.+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 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 "Related Proto" on the TableView definition is left empty, Protogrid will not populate any data into the corresponding TableView. Instead, the TableView can be filled dynamically using Client-ScriptLibrary code.+If the setting "Related Proto" on the TableView definition is left empty, Protogrid will not populate any data into the corresponding TableView. Instead, the TableView can be filled dynamically using Client ScriptLibrary code.
  
 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>initialize_client_side_computed_tableview(tableview_id, header_cells, click_handler_callback, initial_table_data, initial_sorting_column_identifier, initial_sorting_descending)</code>+<code javascript>initialize_client_side_computed_tableview(tableview_id, header_cells, click_handler_callback, initial_table_data, initial_sorting_column_identifier, initial_sorting_descending);</code>
  
 This allows a client-side calculated TableView to be initialized. If a TableView has already been initialized, the function cannot be used a second time. The function parameters can be set as follows: This allows a client-side calculated TableView to be initialized. If a TableView has already been initialized, the function cannot be used a second time. The function parameters can be set as follows:
Line 74: Line 76:
     [     [
         {         {
-            "identifier": "test-text-column",            // Must be a non-empty and unique string +            "identifier": "test-text-column",                 // Must be a non-empty and unique string 
-            "text": "Test Text Column Header Text",      // Optional, defaults to "" +            "text": "Test Text Column Header Text",           // Optional, defaults to "" 
-            "value_type": "unicode",                     // Optional, defaults to "unicode+            "display_priority": 10,                           // Optional, defaults to 10 
-            "display_priority": 10,                      // Optional, defaults to 10 +            "is_sortable": true                               // Optional, defaults to true
-            "is_sortable": true                          // Optional, defaults to true+
         },         },
         {         {
             "identifier": "test-number-column",             "identifier": "test-number-column",
             "text": "Test Number Column Header Text",             "text": "Test Number Column Header Text",
-            "value_type": "number", 
             "display_priority": 9,             "display_priority": 9,
             "is_sortable": true             "is_sortable": true
Line 90: Line 90:
             "identifier": "test-date-column",             "identifier": "test-date-column",
             "text": "Test Date Column Header Text",             "text": "Test Date Column Header Text",
-            "value_type": "date", 
             "display_priority": 8,             "display_priority": 8,
 +            "is_sortable": true                               // Note that for correct sorting of dates, the cell values must be understood by Javascript's Date() object or comply with the following format: "DD.MM.YYYY( HH:mm(:ss))"
 +        },
 +        {
 +            "identifier": "test-html-column",
 +            "text": "Test HTML Column Header Text",
 +            "display_priority": 0,
             "is_sortable": true             "is_sortable": true
         }         }
Line 100: Line 105:
     [     [
         {         {
-            "row_identifier": "first-data-row",          // Must be a non-empty and unique string +            "row_identifier": "first-data-row",               // Must be a non-empty and unique string 
-            "test-text-column": "Aaron",                 // Optional, defaults to "" +            "test-text-column": "Aaron",                      // Optional, defaults to "" 
-            "test-number-column": 4,                     // Optional, defaults to "" +            "test-number-column": 4,                          // Optional, defaults to "" 
-            "test-date-column": "2022-11-11T11:11:11   // Optional, defaults to ""+            "test-date-column": "11.11.2022 11:11",           // Optional, defaults to "" 
 +            "test-html-column": "<i>Explanation text</i>"     // Optional, defaults to ""
         },         },
         {         {
Line 109: Line 115:
             "test-text-column": "Damien",                 "test-text-column": "Damien",    
             "test-number-column": 3,             "test-number-column": 3,
-            "test-date-column": "2024-11-11T11:11:11"+            "test-date-column": "12.11.2022 11:11", 
 +            "test-html-column": "<i>Explanation text</i>"
         },         },
         {         {
Line 115: Line 122:
             "test-text-column": "Mike",                 "test-text-column": "Mike",    
             "test-number-column": 2,             "test-number-column": 2,
-            "test-date-column": "2023-11-11T11:11:11"+            "test-date-column": "11.12.2022 11:11", 
 +            "test-html-column": "<i>Explanation text</i>"
         },         },
         {         {
Line 121: Line 129:
             "test-text-column": "Paul",                 "test-text-column": "Paul",    
             "test-number-column": 1,             "test-number-column": 1,
-            "test-date-column": "2021-11-11T11:11:11"+            "test-date-column": "11.12.2022 11:12", 
 +            "test-html-column""<i>Explanation text</i>"
         }         }
     ],     ],
     "test-date-column",     "test-date-column",
     true     true
-)</code>+);</code>
  
-==== Do a Complete Update of the Data Displayed in a Client-Side Calculated Tableview ==== +==== Do a Complete Update of the Data Displayed in a Client-Side Calculated TableView ==== 
-<code javascript>complete_update_client_side_computed_tableview(tableview_id, new_table_data, sorting_column_identifier, sorting_descending)</code>+<code javascript>complete_update_client_side_computed_tableview(tableview_id, new_table_data, sorting_column_identifier, sorting_descending);</code>
  
 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:
Line 145: Line 154:
             "test-text-column": "Miller",             "test-text-column": "Miller",
             "test-number-column": 4004,             "test-number-column": 4004,
-            "test-date-column": "2022-12-12T12:12:12"+            "test-date-column": "05.06.2023 01:02:03", 
 +            "test-html-column""<b>Explanation text</b>"
         },         },
         {         {
Line 151: Line 161:
             "test-text-column": "Smith",                 "test-text-column": "Smith",    
             "test-number-column": 3003,             "test-number-column": 3003,
-            "test-date-column": "2024-12-12T12:12:12"+            "test-date-column": "05.06.2024 01:02:03", 
 +            "test-html-column""<b>Explanation text</b>"
         },         },
         {         {
Line 157: Line 168:
             "test-text-column": "Williams",                 "test-text-column": "Williams",    
             "test-number-column": 2002,             "test-number-column": 2002,
-            "test-date-column": "2023-12-12T12:12:12"+            "test-date-column": "05.06.2025 01:02:03", 
 +            "test-html-column""<b>Explanation text</b>"
         }         }
     ],     ],
     "test-number-column",     "test-number-column",
     false     false
-)</code>+);</code>
  
-==== Update the value of a single cell in a Client-Side Calculated Tableview ==== +==== Update the Value of a Single Cell in a Client-Side Calculated TableView ==== 
-<code javascript>cell_update_client_side_computed_tableview(tableview_id, new_cell_value, row_identifier, column_identifier)</code>+<code javascript>cell_update_client_side_computed_tableview(tableview_id, new_cell_value, row_identifier, column_identifier);</code>
  
 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>cell_update_client_side_computed_tableview( <code javascript>cell_update_client_side_computed_tableview(
     "6e67b170-d6d3-4786-87b8-8db3e17ea960",     "6e67b170-d6d3-4786-87b8-8db3e17ea960",
-    "Aaron Williams",+    "Aaron Miller",
     "replaced-first-data-row",     "replaced-first-data-row",
     "test-text-column"     "test-text-column"
-)</code>+);</code>
Print/export