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

[Christian-Me]

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.

Ideally I like them to be disabled (grayed) or hidden without freeing the vertical space to keep the layout consistent.

[knolleary]

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.

[Christian-Me]

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

[knolleary]

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

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

[Christian-Me]

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

[Christian-Me]

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

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

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

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

I get this

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?

[knolleary]

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.

[Christian-Me]

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

$('#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!