add cancel button to inline edit

jettyapp

Description of problem: Doing an inline edit you can abort the edit onblur as in this example:
https://editor.datatables.net/examples/inline-editing/fullRowCreate.html

However, we would like to make this more purposeful and add an X like icon when we want the editor to be closed as we are adding a onblur = 'none' to prevent the user from losing the edits. So if they WANT to lose the edits they can just hit the X and we'll do the editor.close().

What is the best/most efficient way to use the editor to do this?

colin

You could do something like this. It's based on this example with the extra button for the cancellation.

Colin

jettyapp

Thank you for the response Colin,

The "this" link does not work for me. I get a 404 from that link. The example is intriguing though. I didn't realize you could add a buttons element inside the editor.inline function's settings structure, does is support the same options as the buttons element on the table?

jettyapp

what would be awesome (and consistent) is if the editor supported buttons something like this:

        formOptions: {
            submitTrigger: 0,
            submitHtml: '<i class="fa fa-play"/>'
            cancelTrigger: 0,
            cancelHtml: '<i class="fa fa-cancel"/>'
            deleteTrigger: -1,
            deleteHtml: '<i class="fa fa-trash"/>'

and have these issue
editor.on('submit'...) like events with the row for all three event types.

I don't know why this was duplicated....

allan

Hi,

Thanks for the suggestion. The problem with the approach described is that you limit the buttons to what Editor "knows" about and the order it would use them in. The current approach is more flexible:

         formOptions: {
            buttons: [
              { label: '<i class="fa fa-play"/>', fn: function () { this.submit(); } },
              { label: '<i class="fa fa-cancel"/>', fn: function () { this.close(); } }
            ]
        }

Allan

jettyapp

Allan,
thank you, how would this work in terms of editing inline? From the example I mentioned the icon is rendered inline as I described. I'm not sure how to place the icons in the row without the submitTrigger parameter.

allan

I'm with you now - apologies, it hadn't clicked for me we were talking specifically about inline editing (despite it being in the title!).

@Colin put together this example which I think might do what you are looking for: http://live.datatables.net/loluhuma/3/edit . It still needs a little tweaking, but it shows how a cancel button can be added to the control buttons for a row.

Allan

jettyapp

Thank you so much for your previous responses.

To elaborate, it is my understanding that the submitTrigger setting tells the editor which column to place the icon in so that the specified column becomes the submit trigger for that specific action. In the case of adding multiple buttons you have given above I see no indication of which column those buttons will show up in.

It was also my understanding that the inline example revealed this submitTrigger parameter for this specific reason. It is the only method I am aware of which targets an 'action' icon to a specific cell. Moreover I would like to have the freedom of locating icons for all three actions in the same cell or in multiple different cells at my bidding. That is why I made the recommendation.

What I am trying to do now is to have a permanent edit icon in the first column when not editing the row. Then when the pencil is clicked I want to display a cancel edit icon in the same cell next to it which will perform the close operation. If there is better way to put the save and cancel buttons in the same cell, as I am trying to do now only when in the process of editing a row inline please explain.

allan

Got it! I think this is an excellent idea (now I'm fully with it!) and I've added a feature request for Editor 2.1 to have this.

Currently the only way to have a cancel button for full row inline editing is similar to Colin's demo.

Regards,
Allan

jettyapp

Super Allan!
Once again, thank you so much!

jettyapp

note that I always seem to get a 404 from all the live.datatables.net links like this one:
http://live.datatables.net/loluhuma/3/edit
so I can't see the examples posted there

jettyapp

NOTE: in reference to the 404 comment above, for some reason this happens in my firefox browser where I am logged into my account but does NOT happen if I open a separate chrome browser.

colin

Odd that it happens in FF. but not Chrome. It would be worth trying in private browsing mode in case an extension is interfering,

Colin

allan

Quick update on this one to say that I've committed the change to Editor to add support for cancelTrigger and cancelHtml. That will be in the 2.1 drop . I've increased the trigger flexibility so any element in the target row can now be used as the trigger - the updated example in 2.1 will demonstrate this nicely.

I haven't included a delete / remove option as that would already be setup using an event handler else where, and would need the form to be setup (title, message, etc). That said, if a use case arises for other buttons, they can be added fairly easily now (hurrah for modular code!).

Allan