Cancel button

nskwortsow

Hi,

When adding a new record, I would like there to be a CANCEL button as well inside the modal (not only a "Save" button).

How & where do I add this? The code below on fnInitComplete didn't do anything.

editor.buttons( [
{
"label": "Cancel",
"className":"btn btn-link",
"fn": function () {
editor.close();
}
}

allan

Using `close` is certainly the correct method - but if you aren't seeing a close button (and only a close button, there would be no save with the above code) then something else (whatever is showing the form) will be setting its own buttons, which apparently don't include their own cancel button.

Are your add, edit and delete buttons the default TableTools buttons? If so, you need to add the cancel button. You could do something like:

[code]
TableTools.BUTTONS.editor_edit.formButtons.push( ... button def ... );
[/code]

Allan

nskwortsow

Hi Allan,

Where should I insert the snippet?

TableTools.BUTTONS.editor_edit.formButtons.push(xxx)

###

And how should I format my button def? Like

###

editor.buttons( [
{
"label": "Cancel",
"className":"btn btn-link",
"fn": function () {
editor.close();
}
}

allan

After you load TableTools and Editor but before you initialise them.

> And how should I format my button def?

Using exactly the same format as the `buttons` method as you suggest. Although obviously use `this` rather than the `editor` variable, since `editor` won't have been defined by that point.

Allan

nskwortsow

Thanks, but I am missing something here.

Your documentation:
http://editor.datatables.net/api/

My implementation (after

[code]editor = new $.fn.dataTable.Editor(
{ /.../ }[/code]:

[code]
editor.buttons(
{
"label": "Cancel",
"className":"btn btn-link",
"fn": function () {
this.close();
}
});
[/code]

Following the example in your documentation.

But: no cancel button is shown...

Please advise.

N

allan

Are using using TableTools and have you overridden the save only button to also add your cancel button? At what point do you call `buttons` ? Bare in mind that if you are using TableTools buttons they will insert their own buttons immediately on pressing the TableTool button - not when it is initialised.

nskwortsow

Yes, I am using TableTools, but these buttons are shown above the data table, and not inside the editor.
Which code do I use to show a custom cancel button inside my editor?

allan

Just as I suggested before - `push` the cancel button (or `unshift` it if you want it first) onto the button array for the TableTools buttons:

[code]
TableTools.BUTTONS.editor_create.formButtons.unshift( {
... button def ...
} );

TableTools.BUTTONS.editor_edit.formButtons.unshift( {
... button def ...
} );
[/code]

Allan

nskwortsow

Hi Allan,

I've added this code *before* instantiating the editor. No cancel button is added?

[code]
TableTools.BUTTONS.editor_edit.formButtons.push(
{
"label": "Cancel",
"className":"btn btn-link",
"fn": function () {
this.close();
}
});
[/code]

nskwortsow

Note: the cancel button is to be shown in the footer of the modal when creating a new record.

Isn't TableTools the class for showing buttons above datatables?

allan

Seems to work just fine for me. I copied and pasted your code exactly into one of my examples and it worked as expected first time. Can you link me to a test case showing it not working please?

> Note: the cancel button is to be shown in the footer of the modal when creating a new record.

You do realising you are adding the cancel button to the `editor_edit` button set (i.e. the edit buttons) and not the create but ( `editor_create` )?

Allan

nskwortsow

As Homer Simpson would say: "D'oh!"

Problem resolved, thanks Allan.

nskwortsow

Just one more complication: when I have 2 datatables / editors on one page; it seems that the code below adds a second "save" button on each editor_create.

Note that the label is "save" but the action is correct (it closes the editor).

Is there a way to prevent this?

[code]
TableTools.BUTTONS.editor_create.formButtons.unshift(
{
"label": "Cancel",
"className":"btn btn-link",
"fn": function () {
this.close();
}
});
[/code]

allan

Damn, yes - this line in Editor is causing the problem:

[code]
ttButtons['editor_'+val].formButtons[0].label = i18n[val].submit;
[/code]

Because the button is being `unshift` -ed into place, the `[0]` index now refers to the 'wrong' button for the internalisation options. I think the Editor core will need to have a private flag on the original button to stop that.

Until then, can you `push` it on and use CSS to change the order of the elements? Float left rather than right or vice versa?

Allan

nskwortsow

Merci, this works.