ColumnControl custom button problem in newer version

ColumnControl custom button problem in newer version

frankyyfrankyy Posts: 8Questions: 4Answers: 0

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
 */

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 65,368Questions: 1Answers: 10,846 Site admin
    Answer ✓
        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

  • frankyyfrankyy Posts: 8Questions: 4Answers: 0
    edited November 26

    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();
                }
            };
    
  • allanallan Posts: 65,368Questions: 1Answers: 10,846 Site admin

    Ah! Good stuff, thanks for posting back.

    Allan

Sign In or Register to comment.