upgrading tableWidget to tabulator 5 with custom jquery_wrapper

application/views/lehre/anrechnung/approveAnrechnungUebersichtData.php

@@ -224,9 +224,7 @@ $filterWidgetArray = array(
         rowFormatter:function(row){
             func_rowFormatter(row,this);
         },
-		columnDefaults:{
+		
-			tooltip:true
-		},
 		//! not working
 		columnDefaults:{
 			tooltip:function(e, cell, onRendered){

public/js/TableWidget.js

@@ -263,15 +263,19 @@ var FHC_TableWidget = {
 			})
 
 			// Click-Event to toggle column-picker columns
-			tableWidgetDiv.find('.btn-select-col').on('click', function()
+			//! was changed to be added when the table was built first
+			tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","tableBuilt",()=>{
+				tableWidgetDiv.find('.btn-select-col').on('click', function()
 			{
 				var selected = this.value;
-
+				
 				tableWidgetDiv.find("#tableWidgetTabulator").tabulator('toggleColumn', selected);
 
 				// toggle class to color button as selected / deselected
 				$(this).toggleClass('btn-select-col-selected').blur();	// blur removes automatic focus
 			})
+			});
+			
 		}
 	},
 
@@ -550,19 +554,27 @@ var FHC_TableWidget = {
 				options.tooltipsHeader = (typeof options.tooltipsHeader == 'undefined') ? true : options.tooltipsHeader;					// set header tooltip with column title
 				options.placeholder = _func_placeholder();	// display text when table is empty
 
-				if (typeof options.rowSelectionChanged == 'undefined')
+				// OLD tabulator v4
-				{
+				// if (typeof options.rowSelectionChanged == 'undefined')
-					options.rowSelectionChanged = function(data, rows){
+				// {
-						_func_rowSelectionChanged(data, rows);
+				// 	options.rowSelectionChanged = function(data, rows){
-					};
+				// 		_func_rowSelectionChanged(data, rows);
-				}
+				// 	};
-				options.columnVisibilityChanged = function(column, visible) {
+				// }
-					_func_columnVisibilityChanged(column, visible);
+				
-				};
+				// OLD tabulator v4
+				// options.columnVisibilityChanged = function(column, visible) {
+				// 	_func_columnVisibilityChanged(column, visible);
+				// };
 
 				// Renders the tabulator
 				tableWidgetDiv.find("#tableWidgetTabulator").tabulator(options);
-				//tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","tableBuilt",()=>{console.log("table build")});
+				tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","rowSelectionChanged",_func_rowSelectionChanged);
+				tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","columnVisibilityChanged",_func_columnVisibilityChanged);
+				
+				// notify other js files that work on the tabulator instance that the tabulator is initialized by triggering the event tableInit
+				
+				
 				
 				
 			}
@@ -573,16 +585,23 @@ var FHC_TableWidget = {
 		// -------------------------------------------------------------------------------------------------------------
 
 		// Render tableWidgetHeader
-		if (typeof options.tableWidgetHeader == 'undefined' ||
+		
+			
+			if (typeof options.tableWidgetHeader == 'undefined' ||
 			(typeof options.tableWidgetHeader != 'undefined' && options.tableWidgetHeader != false))
-		{
+			{
-			var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv);
+				var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv);
-			tableWidgetDiv.find('#tableWidgetHeader').append(tabulatorHeaderHTML);
+				tableWidgetDiv.find('#tableWidgetHeader').append(tabulatorHeaderHTML);
 
-			// Render the collapsable div triggered by button in tableWidgetHeader
+				tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","tableBuilt",()=>{
-			var tabulatorHeaderCollapseHTML = _renderTabulatorHeaderCollapseHTML(tableWidgetDiv);
+					
-			tableWidgetDiv.find('#tableWidgetHeader').after(tabulatorHeaderCollapseHTML);
+					// Render the collapsable div triggered by button in tableWidgetHeader
-		}
+					var tabulatorHeaderCollapseHTML = _renderTabulatorHeaderCollapseHTML(tableWidgetDiv);
+					tableWidgetDiv.find('#tableWidgetHeader').after(tabulatorHeaderCollapseHTML);
+				});
+			}
+		
+		
 
 		/**
 		 * 	tableWidgetFooter is NOT rendered by default.
@@ -795,7 +814,7 @@ function _renderTabulatorHeaderHTML(tableWidgetDiv){
 }
 
 // Returns collapsable HTML element for TableWidget header buttons
-function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){
+function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv,arrayTabulatorColumns){
 
 	var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
 
@@ -810,7 +829,7 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){
 	tabulatorHeaderCollapseHTML += '<div class="panel-heading" role="tab" id="headingOne">';
 	tabulatorHeaderCollapseHTML += '<h5 class="panel-title">';
 	tabulatorHeaderCollapseHTML += '' +
-		'<a role="button" data-toggle="collapse" data-parent="#accordion" ' +
+		'<a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" ' +
 		'href="#selectColumns-' + tableUniqueId + '" ' +
 		'aria-expanded="false" aria-controls="selectColumns">' +
 		FHC_PhrasesLib.t("ui", "spaltenEinstellen") +

public/js/lehre/anrechnung/approveAnrechnungUebersicht.js

@@ -69,15 +69,12 @@ function hf_schreibberechtigt(headerValue, rowValue){
 // Adds column details
 // Sets focus on filterbutton, if table starts with stored filter.
 function func_tableBuilt(table) {
-
     // Store table in global var
     tabulator = table;
-
+    table.tabulator("addColumn",{
-
-    table.find("#tableWidgetTabulator").tabulator("addColumn",{
         title: "Details",
         field: 'details',
-        align: "center",
+        hozAlign: "center",
         width: 100,
         formatter: "link",
         formatterParams:{
@@ -252,28 +249,21 @@ function tableWidgetHook_selectAllButton(tableWidgetDiv){
 
 
 
+
+
 $(function(){
     const genehmigung_panel = $('#approveAnrechnungUebersicht-genehmigung-panel');
     const begruendung_panel = $('#approveAnrechnungUebersicht-begruendung-panel');
     const hasReadOnlyAccess = $('#formApproveAnrechnungUebersicht').data('readonly');
     const hasCreateAnrechnungAccess = $('#formApproveAnrechnungUebersicht').data('createaccess');
-
+   
-
+   
-    $(document).on("tableInit", function(event, table) {
+    $(document).on("tableInit", function(event) {
+     
+        func_tableBuilt($("#tableWidgetTabulator"))
         
-       table.find("#tableWidgetTabulator").tabulator("on","tableBuilt",()=>{
+       
-        func_tableBuilt(table)
+       //table.tabulator("on","rowSelectionChanged",func_rowSelectionChanged);
-        var el =$('#download-csv');
-        
-        $('#download-csv').click( function()
-			{
-                console.log("here")
-				// BOM for correct UTF-8 char output
-				table.find("#tableWidgetTabulator").tabulator("download", "csv", "data.csv", { bom:true });
-		})
-        console.log(el);
-        });
-       table.find("#tableWidgetTabulator").tabulator("on","rowSelectionChanged",func_rowSelectionChanged);
        
         /*  table.tabulator("on","dataLoaded", function() {
             // do something

public/js/tabulator/jquery_wrapper.js

@@ -57,6 +57,7 @@
                           }
                           console.log(props);
                           console.log('bhbuilt end');
+						  $(document).trigger("tableInit");
                         });
 
 			//retrieve properties on prototype