Double List data edited by user

Webix JS
1

Hi,
I tried to make double list be editable by user.
Can you provide a soluition to the problem.
This is my snippet:
https://snippet.webix.com/3mibkirn

2

@MariyaDemy
I tried to make dbllist edit with protoUI, but it didn’t work.
Can you help me?
webix.protoUI({
name:“editlist”
}, webix.EditAbility, webix.ui.dbllist);

3

Hello @coony ,

In general, EditAbility can be added only to the data components and only throught the protoUI. So, you are in the right direction.
However, if to look at the source code of the double list you can see that:

  • The component consists of the two separate lists that are defined through the privite methods (_setLayout and _getList) so we cannot change the lists configuration so easily (or replace them with editlists, for example).

What you may do then is to create your own custom component with the protoUI using the double list source code as example and modifying it by your needs.

Here is a custom dndlist component from our github that you can use as an example also.

4

@MariyaDemy ,
Thank you very much!
I tried to build a custom compnent, I still couldn’t make it editable.
My codesnippet is down blow:
https://snippet.webix.com/qpwt7ncc

5

@MariyaDemy
It’s a new snippet.
https://snippet.webix.com/73ipubl4
editable, property of column I have tried successly.
But I couldn’t get the right value of column, I always got the row value(object)(picture is down below)
How to do the editor could be get the right value?

image

6

Good day @coony,

It seems that the issue is in the data representation.
In the regular datatable, the data is stored as objects (in datatable.data.pull) while in the datatables from the example above there is additional nesting.
If to remove this nesting, the editors will get the proper values.

Have a look at this example: Code Snippet.