How to edit aggregate values in datatable?

Webix JS
#1

I need to edit (and write properly) columns “Value A” and “Value B”:

https://snippet.webix.com/w1iveuf9

#2

Hello @maug,

I need to edit (and write properly) columns “Value A” and “Value B”:

This is what is happening currently:

  • you set the template according to your data structure
  • after you edit the cell, the text editor accepts the new value and displays it correctly (the native input that appears when editing a cell)
  • the cell value itself isn’t updated, since the editor will try to update the field corresponding to the edited column id, i.e. if you edit column “Value A” (from your original example) your item will look like this:
{
  id:..., product:..., values: {a:..., b:...}, valueA:...
}

I’d like to suggest updating the values manually from within the onBeforeEditStop event, since the default logic will always set the value to the field corresponding to the edited column id.

Please take a look at the following example: https://snippet.webix.com/tbsd872y.

#3

Thanks @Dzmitry,

One problem with this approach - editor starts with empty value, so if you just click on a cell in column “Value A” and then click somewhere else, the empty value is written to table. The same happens if you press Tab.

How to provide the editor with initial value?

#4

Now that you mention it, you are right. You can try and set the initial value by calling the setValue() method of the inner editor - https://snippet.webix.com/ijhrld2f (please note that the “test” column has no data to go by, which is why the editor will be blank initially).

#5

Thanks @Dzmitry!

Works great apart from two more issues:

  1. After editing value in column “Value A” editor saves value in values.a but also in property “a” of the row (I added console.log to demonstrate the issue https://snippet.webix.com/fk9injew)
  2. Edit the value and delete its contents (empty string), then edit the same value and try to enter anything - empty value will show regardless of what you enter
#6

Hey again @maug,

Please check out the following sample: https://snippet.webix.com/srseh4kj.

Some notes on the matter:

  1. After editing value in column “Value A” editor saves value in values.a but also in property “a” of the row (I added console.log to demonstrate the issue https://snippet.webix.com/fk9injew)

Unfortunately, apart from making this field constant (meaning that the value will be set to this field only) and naming it in a way that makes sense I don’t see a way to completely prevent this behaviour with the current implementation.

  1. Edit the value and delete its contents (empty string), then edit the same value and try to enter anything - empty value will show regardless of what you enter

This should be fixed in the sample above, I’ve simply altered the condition check, which should be more accurate now.

#7

Thank you for your help @Dzmitry!

About the issue with messing in object (writing to unwanted property) - I fixed that by feeding the datatable with proxy objects with disabled setter and writing the value myself. However it is not a good thing there is no way to save the value in a custom way. The editors should accept optional “readValue/writeValue” functions which act as a proxy reading/writing the value from/to datatable objects.