Editor Trial Version - Uncaught Cannot extend unknown button type: create

david_kimery

Test Case - In Development, not sure how to link a JS Fiddle when using a local web server and database.

Debugger - Says no jQuery loaded. jQuery is my first require and it is working else where on the page.

Error - Uncaught Cannot extend unknown button type: create.

Description - I have set up an environment using Typescript, Grunt, and Browserify to make a bundle. Everything has been working great until I tried using the trial version of the editor. I followed the install.js instructions to make sure the right files were moved into my node_modules. I have 11 days left to get the Full CRUD operations and need to get this working before I can get the okay on buying a license.

Code:

// jQuery and BootStrap
let $ = require( 'jquery' );
require('bootstrap');
require('popper.js')
require('bootstrap-select');

// DataTables
let dt = require( 'datatables.net-bs4' )();
let editor = require( 'datatables.net-editor-bs4' )();
require( 'datatables.net-buttons-bs4' )();
require( 'datatables.net-select-bs4' )();

// CSS Imports
import "datatables.net-bs4/css/dataTables.bootstrap4.min.css";
import "datatables.net-editor-bs4/css/editor.bootstrap4.min.css"
import "datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css";
import "datatables.net-select-bs4/css/select.bootstrap4.min.css";
import "bootstrap-select/dist/css/bootstrap-select.min.css";

$(document).ready(function () {
    // set up editor
    let _editor = new editor({
        ajax: "/testpackage/tgroup/params/0/TG",
        table: "#tgParamList",
        idSrc: "uid",
        fields: [{
                label: "Name:",
                name: "name"
            },
            {
                lable: "Value:",
                name: "value"
            }
        ]
    });

    // Activate an inline edit on click of a table cell
    $('#tgParamList').on('click', 'tbody td:not(:first-child)', function (e) {
        _editor.inline(this);
    });

    // Start table
    $('#tgParamList').DataTable({
        dom: "Bfrtip",
        ajax: "/testpackage/tgroup/params/0/TG",
        order: [
            [1, 'asc']
        ],
        columns: [{
                data: null,
                className: "checkbox-row",
                defaultContent: '<input type="checkbox"/>',
                orderable: false
            },
            {
                data: "name"
            },
            {
                data: "value"
            }
        ],
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        buttons: [{
                extend: "create",
                editor: _editor
            },
            {
                extend: "edit",
                editor: _editor
            },
            {
                extend: "remove",
                editor: _editor
            }
        ]
    });
});

colin

Could you run the debugger on the page, please, and send us the link. That'll help us understand which libraries have been installed,

Colin

allan

What are you using to bundle the software up - Webpack, Rollup or something else? Can you show me the configuration you are using for that bundler? Also, if you can link to the page showing the issue, that would be helpful.

Thanks,
Allan

david_kimery

@colin

I ran the debugger as I stated in my OP. All it says is that jQuery is not loaded, but the require is there and jQuery is working everywhere, even with regular DataTables initialization.

david_kimery

@allan

As I stated in my OP I am using Broswerify to create the bundle. I will work on getting the code up on the test server so I can give you a link unless you have a better suggestion

I should have said the file and line number the error was on, sorry:
dataTables.buttons.js:895 Uncaught Cannot extend unknown button type: create

david_kimery

@allan @colin
I tried a different approach I found here: https://editor.datatables.net/examples/styling/bootstrap4

Code (not exact):

let buttons = require( 'datatables.net-buttons-bs4' )();

// Display the buttons
new buttons(this.dt, [
    { extend: "create", editor: editor },
    { extend: "edit",   editor: editor },
    { extend: "remove", editor: editor }
]);

this.dt.buttons().container().appendTo(
    $('.col-md-6:eq(0)', this.dt.table().container())
);
 

I stepped through the debugger and noticed when it got to the Buttons constructor (dataTables.buttons.js line 416) on line 433 when it is looping through buttons to add the config it is only passing config, but the add function takes the config and idx as parameters.

If I am way off base because I am doing something else wrong, I am sorry.

allan

Ah sorry - I missed the point about Bowserify. That will also explain why our own debugger isn't seeing jQuery - Bowserify will remove it from the global scope.

The index parameter for the add() method is optional. If it isn't given, the button is just added to the end of the buttons array, so I don't believe that is the issue.

i'm thinking that because of the lack of global scope for jQuery you might need to do your requires like this:

require( 'datatables.net-bs4' )(window, $);
...

i.e. pass the window and $ as parameters to the functions loaded in for the DataTables requires.

Allan

david_kimery

@allan

Still a no go with the debugger. Maybe I am doing something wrong with my Typescript/Browserify setup. I will do some digging since I am new to this type of environment. I am using Grunt to run the tasks.

I see where I failed to follow the logic with the add function, sorry about that. Original error still persists when it gets to the resolveExtends the create was was never added.

david_kimery

@allan @colin

I got it! Thanks for the help! Since my backend is Spring boot is the best source for using the editor without a server library this page?

https://editor.datatables.net/manual/server

colin

Glad all sorted,

Colin

allan

is the best source for using the editor without a server library this page?

Yes - that's the documentation for what Editor sends, and what it expects back. If you have any questions about it, do let me know.

Regards,
Allan