Disabled Edit button on Multi-Row selection

womplify

In the old version of the Editor, using TableTools, the Edit button automatically got disabled when multiple rows were edited.
The new version is using the Buttons extension instead (which is really good), and also supports multi-row editing (which is also very nice by the way)..
However,
What do I do if I do NOT want this?
I still want to be able to delete multiple rows. But editing, I would like to have enabled only for a single selected row.. like it was.
I didn't see any such option. Am I missing something?

What do I do?

womplify

Hmmm. I can see now that there is a button class called 'selectedSingle', which does just that. However, I need a button that is BOTH 'edit' AND 'selectedSingle'. Is there a way to set 'extend' property to two classes, so it extends them both? or by design, that is not really possible?

womplify

So.. I've solved it for now, after digging into the code, in the following manner.
I was working under the assumption that extending a button can't be done with more than one base button.. which proved correct, when looking at the code [dataTables.buttons.js:781]..

What I did, was create my own new buttons, and "implanting" them directly into DataTables.ext.buttons. I named the new button editClassic, and since selectedSingle implemented the single select via the init, what I did was as follows..

    $.extend( true, DataTable.ext.buttons, {
        
        editClassic: $.extend( true, {}, DataTable.ext.buttons.edit, {
            className  : "buttons-edit buttons-selected-single WOS_DT_Edit",
            init: DataTable.ext.buttons.selectedSingle.init,
            formButtons: [
                {
                    label    : function ( editor ) {return editor.i18n.edit.submit;},
                    fn       : function ( e      ) {this.submit();},
                    className: "btn btn-primary",
                },
                {
                    label    : "<i class='fa fa-times'></i> cancel", 
                    fn       : function(e){this.close()},
                    className: "btn"
                }
            ]
        })
    });

The init simple refers to the init on the selectedSingle button; the classname has the edit classname, the singleselect classname, as well as my own, for personal customization;
and lastly, while at it, I customize the formButtons, so that the editor will have both cancel and submit buttons, as well as adding a btn-primary bootstrap class to the submit button.

I would love to know if there is a more efficient way to do it.

allan

Hi,

Your current method is probably one of the best way of doing it. Editor's edit button extends the selected button type as you noted.

So the alternative option is just to extend the selectedSingle button type and trigger edit() from its action method (you'd need to also provide the buttons information if you were to select that option).

I'll take a look at providing an option in the next version of Editor to have edit for both single and multi select options.

Allan

womplify

perhaps the best would be to have it as an Editor flag? To be able to restrict it to single-row editing (while still allowing multi-row delete)

allan

I think I'd rather just have two different button types - I think that would be a little easier to understand.

Allan

scipiosoft

its possible to extend button with two options?
ex:
extend: "edit selectedSingle",

{
text: "<i class='fa fa-plus'></i>",
titleAttr: "Add Key (SHIFT + N)",
key: {
shiftKey: true,
key: 'n'
},
formTitle: 'Add Key to ' + product.toUpperCase(),
extend: "create,selectedSingle",
editor: editor
}

allan

@scipiosoft - I've added a reply to your thread with your duplicate question.

Allan

ronakvala

@allan Can you please confirm that you have introduced new button type yet which extends selectedSingle? I would only like to have single row editing in my project.

allan

Yes. Editor 1.6 introduces editSingle and removeSingle.

Allan

ronakvala

@allan Awesome. Thanks