How to disable an editableList

BartButenaers · 21 August 2020 23:12

Hi folks,

In my latest node I have an editableList, which needs to be disabled somehow when the config screen of my node has been opened. Afterwards they editableList can be enabled, based on the user actions.

However I don't know how to do this.

I have tried to disable it or set a grey background color, but none of those works:
```
// The editable list should be disabled, until a trace has been selected
myEditableList.prop('disabled', true);
myEditableList.css('background-color', "f9f9f9");
```
When Node-RED injects here extra elements, I can set the background color of the new element (with class red-ui-editableList-container) to grey. Then it looks disabled, but not sure any of this is possible programmatically ...

When I show an alert within the addItem function, an empty row will be added anyway:

var myEditableList = $("#node-input-properties-container").editableList({
   addItem: function(container,i,property) {
       if (...) {
         alert("Not possible to add items now!");
         return false;
      }

The result:

A return false or throw "some error doesn't prevent the empty line being added ...

Does anybody know a decent way to avoid items being added, and to give the editableList somehow a disabled look?

Thanks !!
Bart

Steve-Mcl · 22 August 2020 06:14

Hi Bart, as editableList is a widget, there are methods provided for you to call like this...
$("#node-input-properties-container").editableList("disable",true);
... however, this method has to be provided by the widget creator.

This is the current methods available to editableList ...

github.com

node-red/node-red/blob/ec368ae3fd24dcb688f2918e25bb04d62fafc798/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js#L33


*   - resizeItem : function(item) - called to resize individual item
*   - sortable : boolean|string - string is the css selector for handle
*   - sortItems : function(items) - when order of items changes
*   - connectWith : css selector of other sortables
*   - removable : boolean - whether to display delete button on items
*   - addItem : function(row,index,itemData) - when an item is added
*   - removeItem : function(itemData) - called when an item is removed
*   - filter : function(itemData) - called for each item to determine if it should be shown
*   - sort : function(itemDataA,itemDataB) - called to sort items
*   - scrollOnAdd : boolean - whether to scroll to newly added items
* methods:
*   - addItem(itemData)
*   - insertItemAt : function(data,index) - add an item at the specified index
*   - removeItem(itemData, detach) - remove the item. Optionally detach to preserve any event handlers on the item's label
*   - getItemAt(index)
*   - indexOf(itemData)
*   - width(width)
*   - height(height)
*   - items()
*   - empty()
*   - filter(filter)

There doesnt appear to be a "disable" or "enable" or "inhibit" method provided.

Off the top of my head, two options...

Add a disable method to the editableList and raise a PR back to core
Hack it. ...
1. find the "add" button and disable it (or hide it): $("#node-input-properties-container").parent().next("a.red-ui-editableList-addButton").css("pointer-events","none")
2. find the ol and disable pointer events: $("#node-input-properties-container").css("pointer-events","none")

For me, option 1 is the better solution as class names might change in the future and your solution would break.

PS, the selector could probably be a bit more generic (like find last anchor - would solve future class name changes however if the button was moved in the widget source, you might get the delete anchor of the last item in the list. As I said, option 1 is better).

PS2, it goes without saying you would want to discuss this with Dave and Nick before raising a PR.

BartButenaers · 22 August 2020 07:20

Hey Steve,
Thanks for the feedback. Yes I had also seen that the disable method was missing. But I'm already dying this week of CSS stuff, so not sure whether I can handle this one...

Steve-Mcl · 22 August 2020 07:23

Well, you can always do the hack I suggested until someone gets around to it - will tide you over / give you the functionality you need.