# Editable List: Is there a easy way to disable the sort and delete button

**URL:** <https://discourse.nodered.org/t/editable-list-is-there-a-easy-way-to-disable-the-sort-and-delete-button/52971>\
**Category:** Developing Nodes\
**Tags:** editable-list\
**Created:** [30 October 2021 10:13 UTC](https://discourse.nodered.org/t/editable-list-is-there-a-easy-way-to-disable-the-sort-and-delete-button/52971 "2021-10-30T10:13:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [30 October 2021 10:13 UTC](https://discourse.nodered.org/t/editable-list-is-there-a-easy-way-to-disable-the-sort-and-delete-button/52971/1 "2021-10-30T10:13:04Z")

</div>

Hi,

a quick question. Is there an easy way to disable the sort handle and delete button for single entries in a editable list? I need default values "pinned" in the list. I can put the out of the list but this permanently limit the vertical space of the list (see line above the list). In this case it would reduce the list by half.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/e/2e8fa8cef8891a282af099e7658c1f3445599093.png)  
Ideally I like them to be disabled (grayed) or hidden without freeing the vertical space to keep the layout consistent.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [30 October 2021 12:22 UTC](https://discourse.nodered.org/t/editable-list-is-there-a-easy-way-to-disable-the-sort-and-delete-button/52971/2 "2021-10-30T12:22:28Z")

</div>

No, there isn't a way to disable it for individual entries, only for the list as a whole. Simply not a requirement that has ever come up.

For the delete button, we do have some instances where we disable the built in remove button and add our own to individual entries - that does give you some more control.

But the sort handle is harder to workaround as there are more things to deal with. It might be possible to do... not tried.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [30 October 2021 12:29 UTC](https://discourse.nodered.org/t/editable-list-is-there-a-easy-way-to-disable-the-sort-and-delete-button/52971/3 "2021-10-30T12:29:25Z")

</div>

Thank for the reply - sorting is only an user experience problem. If you can give me a hint how to catch a delete event it would be nice. Or I disable the two buttons by digging into the DOM

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [30 October 2021 12:33 UTC](https://discourse.nodered.org/t/editable-list-is-there-a-easy-way-to-disable-the-sort-and-delete-button/52971/4 "2021-10-30T12:33:32Z")

</div>

It isn't a case of catching the event. Instead, set `removable` to false to hide the remove buttons.

[https://nodered.org/docs/api/ui/editableList/#options-removable](https://nodered.org/docs/api/ui/editableList/#options-removable)

Then, add your own remove button to each item as part of `addItem`. The click handler for the button can call the `removeItem` function.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [30 October 2021 12:34 UTC](https://discourse.nodered.org/t/editable-list-is-there-a-easy-way-to-disable-the-sort-and-delete-button/52971/5 "2021-10-30T12:34:57Z")

</div>

That will work, haven’t thought this way. Thank you.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [30 October 2021 14:48 UTC](https://discourse.nodered.org/t/editable-list-is-there-a-easy-way-to-disable-the-sort-and-delete-button/52971/6 "2021-10-30T14:48:39Z")

</div>

Certainly this solution only works as long as the implementation of the editable list don't change:

1. I give the row which should be fixed an unique id

```auto
row.parent().prop('id','axisDefault');

```

1. I set the style of the two children after the list is created

```auto
$("#node-input-axes-container").editableList('addItems', this.axes);
$('#axisDefault').children()[1].style="display:none";
$('#axisDefault').children()[2].style="display:none";

```

I get this

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/9038236f91ab59499539748991d87f9af86c5c96.png)

The user still can move another row in front of the default one but I can live with it.

A "don't do that" hack? To many things can go wrong?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [30 October 2021 15:15 UTC](https://discourse.nodered.org/t/editable-list-is-there-a-easy-way-to-disable-the-sort-and-delete-button/52971/7 "2021-10-30T15:15:32Z")

</div>

Is there not a CSS class set in the element you want to hide that can be got with `.find()`? That would protect you a bit more from internal changes.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [30 October 2021 16:25 UTC](https://discourse.nodered.org/t/editable-list-is-there-a-easy-way-to-disable-the-sort-and-delete-button/52971/8 "2021-10-30T16:25:42Z")

</div>

Step by step I'll find my way into all this jquery and DOM stuff

```auto
$('#axisDefault').find(".red-ui-editableList-item-handle").css("display","none");
$('#axisDefault').find(".red-ui-editableList-item-remove").css("display","none");

```

This will let me sleep a little bit better 😉  
Thanks a lot!

---

<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:** [13 November 2021 16:26 UTC](https://discourse.nodered.org/t/editable-list-is-there-a-easy-way-to-disable-the-sort-and-delete-button/52971/9 "2021-11-13T16:26:33Z")

</div>

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