Error implementing DataTables 2.2.x with yadcf 2.0.1.beta.9

[mdawkins]

I'm in the process of upgrading DataTables from 1.13.8 to 2.2.1.
colReorder version: 2.0.4
yadcf version: 2.0.1.beta.9

From the console I get this error:
TypeError: Cannot read properties of undefined (reading 'ColReorder')
at calcColumnNumberFilter (jquery.dataTables.yadcf.js:1106:70)
at parseTableColumn (jquery.dataTables.yadcf.js:3023:32)
at appendFilters (jquery.dataTables.yadcf.js:3376:34)
at initAndBindTable (jquery.dataTables.yadcf.js:5032:11)
at Object.init (jquery.dataTables.yadcf.js:5230:11)

DataTables Init:

const maintable = new DataTable(`#${tableId}`, {
        stateSave: true, // Save the state of the page at reload
        scrollX: true, // Horizontal Scroll in window
        scrollY:  `${dataTableHeight}vh`, // Vertical Height in window
        scrollCollapse: true, // Allows thead row to stay at top while scrolling
        orderCellsTop: true, // Only allow sorting from top thead row
        colReorder: true ,
        fixedColumns: { leftColumns: ltCol, rightColumns: rtCol }, // has problems with drilldown tables and rowGroup
        select: { info: false }, //disable display of record information
        dom: `rt<"bottom footer-${tableClass}"pilB><"clear">`,
        keys: true, // allows for an individual cell to be selected
        buttons: getButtonsConfig(),
        ajax: getAjaxConfig(requestedApp, requestedPage, tableClass, filterApi, urlFilter),
        columns: formatJsonDTColumns(columnsList, showRowNumber, showId, showFunctions, tableId),
        footerCallback: function(row, data) { formatFooter(this.api(), columnsList); },
        orderFixed: getColumnGroupingInfo(columnsList, "list"),
        rowGroup: { dataSrc: getColumnGroupingInfo(columnsList, "name"), emptyDataGroup: null },
        columnDefs: [{ targets: getColumnGroupingInfo(columnsList, "hidecols"), visible: false }],
        lengthMenu: [[rowsPerPage, -1], [rowsPerPage, "All"]],
        language: getLanguageConfig(),
        createdRow: function(row, data, dataIndex) { customizeRow(row, data, dataIndex, rowFormatList) },
        initComplete: function(settings, json) {
            sortColVisDropdown(maintable); // Alphabetize the ColVis dropdown
            setInitComplete(maintable, tableId, tableClass, pageDetails);
        }
});

yadcf Init from within initComplete function setInitComplete():

yadcf.init(dtTable, getFilterColumns(pageDetails), {
                filters_tr_index: yadcfTrIndex,
                cumulative_filtering: true
            });

getFilterColumns(pageDetails):

{column_number: 0, style_class: 'filter_code', filter_type: 'text'}
1
: 
{column_number: 1, style_class: 'filter_name', filter_type: 'text'}
2
: 
{column_number: 2, filter_type: ''}
3
: 
{column_number: 3, style_class: 'filter_funding_type', filter_type: 'multi_select', select_type: 'select2', filter_delay: 500, …}
4
: 
{column_number: 4, style_class: 'filter_status', filter_type: 'multi_select', select_type: 'select2', filter_delay: 500, …}
5
: 
{column_number: 5, style_class: 'filter_created_by', filter_type: 'text'}
6
: 
{column_number: 6, style_class: 'filter_created_date', filter_type: 'text'}
7
: 
{column_number: 7, style_class: 'filter_modified_by', filter_type: 'text'}
8
: 
{column_number: 8, style_class: 'filter_modified_date', filter_type: 'text'}

If I comment out the colReorder parameter, the error goes away, but yadcf doesn't appear either.

[vedmack]

Please provide a minimal "jsfiddle" test page on which the issue can be reproduced.

[mdawkins]

Hi,

Thanks for your response. While I'll try to set up a jsfiddle to reproduce the described error, that will take some work. I'm trying to sync the upgrade refactoring between 1.13.8 and 2.2,1. Technically the new yadcf beta should work with the older datatables 1.13.8 correct? I still get a similar breakpoint pause in Chrome using DT 1.1.3.8 and yadcf 2.0.1.beta9.

Has the required format for the columns object changed or become more strict? Mind you, this configuration works for yadcf 0.9.6 HEAD.

column object:
0: {column_number: 0, style_class: 'filter_code', filter_type: 'text'}
1: {column_number: 1, style_class: 'filter_name', filter_type: 'text'}
2: {column_number: 2, filter_type: ''}
3: {column_number: 3, style_class: 'filter_funding_type', filter_type: 'multi_select', select_type: 'select2', filter_delay: 500, …}
4: {column_number: 4, style_class: 'filter_status', filter_type: 'multi_select', select_type: 'select2', filter_delay: 500, …}
5: {column_number: 5, style_class: 'filter_created_by', filter_type: 'text'}
6: {column_number: 6, style_class: 'filter_created_date', filter_type: 'text'}
7: {column_number: 7, style_class: 'filter_modified_by', filter_type: 'text'}
8: {column_number: 8, style_class: 'filter_modified_date', filter_type: 'text'}
length: 9[[Prototype]]: Array(0)

console error:
programs:210 Error initializing YADCF: TypeError: Cannot read properties of undefined (reading '3') at appendFilters (jquery.dataTables.yadcf.js:3819:97) at initAndBindTable (jquery.dataTables.yadcf.js:5026:11) at Object.init (jquery.dataTables.yadcf.js:5224:11) at setInitComplete (programs:210:97) at ce.initComplete (programs:228:1492) at jquery.dataTables.min.js:4:47722 at Function.map (jquery.min.js:2:3971) at R (jquery.dataTables.min.js:4:47669) at qt (jquery.dataTables.min.js:4:33365) at jquery.dataTables.min.js:4:33206

On line 1106: column_number_filter = plugins[table_selector_jq_friendly].ColReorder[column_number];