Editor buttons with key activation?

resqonline

I am trying to implement key activation for the Editor buttons 'create', 'edit' and 'remove' based on this example - is that possible with the built in buttons or only with custom ones? Do I have to include the key with the <u></u> tag in the text of the button? Are there any keys that won't work (like 'enter'/'13') because they do something else?

kthorngren

I think the buttons.buttons.key docs will answer most of your questions. Looks like the example you linked to should be updated to point to the docs. Maybe @allan can do this.

The buttons.buttons.text is independent of the buttons.buttons.key configuration. You don't need to include the u tag and enclosed text.

Are there any keys that won't work (like 'enter'/'13') because they do something else?

I'm not sure about this - I suspect enter is not a good option. Don't know if it works or not but see the Comments for how to use special keys. You will probably just need to test what you want to use.

Kevin

resqonline

Thank you @kthorngren! It's always confusing having to look in different places for the documentation of features The explanation of the Option makes so much more sense! Thanks

resqonline

@kthorngren do you maybe have an idea how to globally apply keys to the Editor buttons? I tried e.g.

$.fn.dataTable.ext.buttons.edit = {
        key: {
            key: 'e',
            shiftKey: true
        },
    }

However that removes the text on the button and the buttons don't work as their respective Editor buttons anymore. As I have several tables and several Editors, I would like to add the default buttons with their keys on a global point that then can be extended by the editor inside the table options. I still don't know the whole extent of how to optimize the initialisation process. Would appreciate any input on this.

kthorngren

From my understanding you are creating a custom button, like this example. First I would use a different name and place the button.button.extend in the default. Something like this example:
http://live.datatables.net/lasimupa/1/edit

I cleverly named it edit2. Note that I used edit2 in the buttons config.

Kevin

resqonline

Thank you for this example @kthorngren - so the extend option doesn't extend an already existing button but always creates a new one? Is there also an option to set defaults to already existing settings? I read in the forums sowhere one can alter the dom, but I just want to give some additional default settings to already existing settings
I will definitely use your example to make my own buttons for launching the editor.

kthorngren

The docs for $.fn.dataTable.ext.buttons state this:

This can be done by attaching your button definition object to the $.fn.dataTable.ext.buttons object - the parameter name used is the name that will reference the button in the initialisation.

You could do this to update the built-in edit button by adding the key key to the current button:

$.fn.dataTable.ext.buttons.edit.key = {
            key: 'e',
            shiftKey: true
        }

http://live.datatables.net/lasimupa/2/edit

I added console.log($.fn.dataTable.ext.buttons); so you can see the object and the updated result with the key added.

Kevin

resqonline

Thank you @kthorngren! I am not that fluent in any Javascript and still learning, so really appreciate your answers!