How to edit some specific fields with a custom button?

How to edit some specific fields with a custom button?

pisislerpisisler Posts: 106Questions: 21Answers: 1
edited February 2022 in Editor


Using Editor 2.0.2. I would like to add a custom button (which I already added) and when clicked after selecting a row (for which I extended the selected button) to edit some certain fields that I don't normally want to show on edit form.

For example there is already an edit button which edits the selected row(s). But I hide some fields from this main edit modal box using hide(). Now I want to have another edit button by which I want to show only those hidden fields to be edited when clicked.

I tried triggering bubble() with the custom button I mentioned, to allow multiple fields editing. Bubble box is opening, but positioning is wrong which can't fix using bubblePosition() and secondly, it doesn't show fields to be edited; but only the "update" button is shown. Here is the custom button:

            extend: "selected",
            text: (dt) => dt.i18n('platform.fixed_margin'),
            action: function (e, dt, node, config) {
                    dt.rows( {selected: true} ).indexes(),
                    ['field1', 'field2', 'field2', 'field3']

I also tried using edit() specifying which columns to edit like:

editor.edit( { columns: 3 } );

But can't get to make it edit the specified column of only the selected rows. Instead it edits all the rows in table.

PS: I can't give a public link since it is a production site protected with authorization.


  • rf1234rf1234 Posts: 2,806Questions: 85Answers: 406
    edited February 2022

    The simplest solution is to define two different Editors for the same Datatable which is no problem at all. Then you just define different Editor buttons on your Datatable with different texts.

    Like this for example:

    buttons: [
        {   extend: "create", editor: firstEditor },
        {   extend: "edit",   editor: firstEditor },
        {   extend: "remove", editor: firstEditor },
        {   extend: "edit",   editor: secondEditor, text: "edit hidden stuff",
            name: "hiddenStuffButton" }

    Subsequently you can also remove the "hidden stuff" Editor button using its assigned name depending on user authorization.

    if ( userNotAuthorized ) {
  • pisislerpisisler Posts: 106Questions: 21Answers: 1

    That's also what I tough at first, I didn't write to the thread because I was still looking for a better way. Now I saw that it could be done with template(). If you define two different templates, then you can edit some fields with one button, edit some other fields with another button.

Sign In or Register to comment.