ColumnControl custom button problem in newer version

frankyy

Link to test case:
https://live.datatables.net/xarawubu/1/

Debugger code (debug.datatables.net): -----
Error messages shown:
Uncaught TypeError: Cannot read properties of undefined (reading 'destroyAdd')
at Button.handler (datatables.js?code=7506eb1bcc79c594ca26faef92fa62def07e53e0:107861:22)

Description of problem:
In the latest version of the datatables, it gives this error.
This is the version:

/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#dt/jszip-3.10.1/pdfmake-0.2.7/dt-2.3.5/af-2.7.1/b-3.2.5/b-colvis-3.2.5/b-html5-3.2.5/b-print-3.2.5/cr-2.1.2/cc-1.1.1/fc-5.0.5/fh-4.0.5/rg-1.6.0/sl-3.1.3
 *
 * Included libraries:
 *   JSZip 3.10.1, pdfmake 0.2.7, DataTables 2.3.5, AutoFill 2.7.1, Buttons 3.2.5, Column visibility 3.2.5, HTML5exp ort 3.2.5, Print view 3.2.5, ColReorder 2.1.2, ColumnControl 1.1.1, FixedColumns 5.0.5, FixedHeader 4.0.5, RowGroup 1.6.0, Select 3.1.3
 */

It was not giving the same error in this version:

/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#dt/jq-3.7.0/dt-2.3.3/b-3.2.4/cr-2.1.1/cc-1.0.7/fc-5.0.4/fh-4.0.3/rg-1.5.2
 *
 * Included libraries:
 *   jQuery 3.7.0, DataTables 2.3.3, Buttons 3.2.4, ColReorder 2.1.1, ColumnControl 1.0.7, FixedColumns 5.0.4, FixedHeader 4.0.3, RowGroup 1.5.2
 */

allan

    var internalApi = undefined; // This mimics the missing API in v2
    
    // THIS IS THE LINE THAT THROWS YOUR ERROR:
    internalApi.destroyAdd; 

I'm a little confused. You've set internalApi to be undefined and then access a property from undefined. That will always throw an error.

I don't really understand what the test case is showing, sorry. Can you give an example with out the mocks?

Allan

frankyy

I'm sorry I updated the package version and just noticed that the button class isn’t getting a ColumnControl instance. I added it and it's working now.

        DataTable.ColumnControl.content.myButton = {
            defaults: {
                className: 'groupBy',
                text: 'Group By',
                icon: 'orderAsc',
            },
            init: function (config) {
                let dt = this.dt();
    
                let btn = new DataTable.ColumnControl.Button(dt, **this**)
                    .text(config.text)
                    .icon(config.icon)
                    .className(config.className)
                    .handler(() => {
                        const columnIndex = this.idx();
                        const columnData = dt.column(columnIndex).dataSrc();
                        //some code
                    });
    
                return btn.element();
            }
        };

allan

Ah! Good stuff, thanks for posting back.

Allan