# How to disable an editableList

**URL:** <https://discourse.nodered.org/t/how-to-disable-an-editablelist/31858>\
**Category:** Developing Nodes\
**Created:** [21 August 2020 23:12 UTC](https://discourse.nodered.org/t/how-to-disable-an-editablelist/31858 "2020-08-21T23:12:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [21 August 2020 23:12 UTC](https://discourse.nodered.org/t/how-to-disable-an-editablelist/31858/1 "2020-08-21T23:12:33Z")

</div>

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:

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

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

Thanks !!  
Bart

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 August 2020 05:56 UTC](https://discourse.nodered.org/t/how-to-disable-an-editablelist/31858/2 "2020-08-22T05:56:41Z")

</div>

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 ...

> <https://github.com/node-red/node-red/blob/ec368ae3fd24dcb688f2918e25bb04d62fafc798/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js#L33>

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

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

1. Add a `disable` method to the `editableList` and raise a PR back to core
2. 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.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 August 2020 07:20 UTC](https://discourse.nodered.org/t/how-to-disable-an-editablelist/31858/3 "2020-08-22T07:20:05Z")

</div>

> [@Steve-Mcl](#):
>
> raise a PR back to core

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...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 August 2020 07:23 UTC](https://discourse.nodered.org/t/how-to-disable-an-editablelist/31858/4 "2020-08-22T07:23:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 October 2020 07:23 UTC](https://discourse.nodered.org/t/how-to-disable-an-editablelist/31858/5 "2020-10-21T07:23:18Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.