Editor Datatables hide form button in custom display controller

matissg

I'm trying to disable buttons in my custom display controller. I can disable "Add" button in my DataTables with this piece of code:

  var can_create = $('#user_groups_table').attr('data-create');
  if (can_create.includes('false')) {
    table.button('.buttons-create').disable();
  } else {
    table.button('.buttons-create').enable();
  }

However I can't make this one to work for my custom display controller:

  $('#user_groups_table').on('click', 'td.details-control', function() {
    var tr = this.parentNode;
    var can_destroy = $('#user_groups_table').attr('data-destroy');

    if (table.row(tr).child.isShown()) {
      editor.close();
    } else {

      if (can_destroy.includes('false')) {
        table.button('.DTE_Form_Buttons delete-button').disable();
      } else {
        table.button('.DTE_Form_Buttons delete-button').enable();
      }

      editor.edit(
        tr,
        'Edit row', [{
          className: "update-button",
          label: "Update",
          "fn": function() {
            editor.submit();
          }
        }, {
          className: "delete-button",
          label: "Delete",
          "fn": function() {
            // Show delete dialog with confirmation
            editor
              .title('Delete record')
              .buttons('Confirm delete')
              .message('Are you sure you want to remove this record?')
              .remove(tr, '', null, false);
          }
        }]
      );
    }
  });

In my console log I can see can_destroy value is passed correctly, however later on nothing happens with my "Delete" button. I assume, it's not connecting somehow together since this is form generated inside table when row is opened.

How do I fix this, please?
So far I've been trying to implement something from this buttons() API, however no luck.

allan

Hi,

It looks like you are trying to use the Buttons API to control the buttons shown inside the Editor form. While I see the obvious connection, I'm afraid they are not the same - Buttons is not used to display the buttons inside the Editor form, so its API doesn't apply there.

There isn't actually a disable option for the buttons inside Editor at the moment - instead, what you could do is use the buttons() Editor method to change the buttons based on the logic condition - e.g.:

.buttons( can_destroy.includes('false') ? [] : 'Confirm delete' )

e.g. no buttons (empty array) when it can't be removed.

Allan

matissg

@allan Thank you, your suggestion works for my delete "Show delete dialog with confirmation" part.

Do you think there is some way to hide my "Delete" button in form?
Lines 24-25 in my code above:

className: "delete-button",
label: "Delete",

I'm trying to figure out if there is a way to do it within edit() method. So far I understand buttons are generated within that [options] part, but then I don't see I can squeeze in that

editor
   .buttons( can_destroy.includes('false') ? [] : 'My Delete Button' )

allan

With edit() you could do:

editor.edit( tr, {
  buttons: can_edit.includes('false') ? [] : 'My Edit Button'
} );

is that what you mean? I think I'm not quite understanding.

Allan

matissg

@allan Thank you. Yes, I need to hide "Edit" / "Delete" buttons on condition. Your latest suggestion works if I have only one button in my form.
My piece of code would look something like this, however now I'm thinking, hod do I add that can_destroy.includes('false') ? [] : 'My Delete Button' ?

    editor.edit(
      tr,
      'Edit row', [{
        buttons: can_edit.includes('false') ? [] : 'My Edit Button'
      }, {
        className: "delete-button",
        label: "Delete",
        "fn": function() {
          // Show delete dialog with confirmation
          editor
            .title('Delete record')
            .buttons('Confirm delete')
            .message('Are you sure you want to remove this record?')
            .remove(tr, '', null, false);
        }
      }]
    );

Basically in ideal world in my form, where I have two buttons "Edit" and "Delete", I'd like to hide each of them on condition. For "Delete" I would need to keep that delete dialog with confirmation. How can I do that, please?

allan

It sounds like the condition should actually be placed outside the edit() call - for example:

if ( can_edit ) {
  editor.edit( tr, ... );
}
else {
  editor.remove( tr, ... )
}

Is that what you are looking for? That would seem to be a little easier than changing the button, title, message, etc, inside the form.

Allan

matissg

@allan Silly me, I should have thought to do the way you suggest with "if, else" outside edit() call. Thank you, now it works like charm!