Extra row data and rowdetails form

[bjpetalParticipant]

Hello – I have an editable grid in which I need to store some extra row data. This row data would be entered by simple inputs, and I would like to attach it to the row itself, so the extra data can be retrieved using the jqxGrid(‘getRows’) method.

Currently I have it set up as:

Each row gets initialized with an empty object: extradata {}.

When a rowdetail is initialized(should be called once on expanding each row) – the DOM element created gets stored in an object(_rowDetailsElements) by {rowid:DOMObject}.

When a row is expanded, if there is a key matching the expanded row index present in our _rowDetailsElements, the child input of the stored Dom element gets updated with the value present in the row’s extradata.input_whatever_.

When a row is collapsed, the row’s extradata.input_whatever_ property gets updated with the input’s value.

This seems to be working just fine until I try to duplicate a row. When I duplicate a row – the row details somehow become linked, and changing the input on one row, will also change the input on the new row. I am just using the addrow method, and copying certain row properties, so I am confused as to what is happening. My other addrow method is working fine.

To see this – enter some extradata in the input of the last row, and then duplicate it. Now change the extra detail in the newly created row, and you will see the original row’s input value has changed as well, the rowdetails of these two rows are linked.

http://jsfiddle.net/0t0zxd0w/4/

I am a bit stumped on this one – can you tell me what is going on, or if I am doing something wrong?

Thanks!

[HristoParticipant]

Hello bjpetal,

I would suggest you determinate the editmode: 'selectedcell'.
Also, you could add data from the input to this “extradata” datafield.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[bjpetalParticipant]

Hi Hristo – I am already adding the data from the input into the extradata datafield on a row collapse event. This is working fine until I try to duplicate a row, at which time the row detail inputs become linked somehow, and I can no longer update them independently. I did set the editmode to selectedcell, but didn’t really see a change there.

Thanks,

[bjpetalParticipant]

Does anyone else have any idea what the problem might be? Or maybe a suggestion about a more elegant solution for rowdetail based forms?

[HristoParticipant]

Hello bjpetal,

You should care about the duplicated object – you could use .assign() method.
Please, take a look at this example:
http://jsfiddle.net/txhi/4ybskLun/
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[bjpetalParticipant]

Hristo that is extremely helpful – I did not realize I was just referencing the object instead of copying it. Sadly I have to support IE11 so cannot use the Object.assign() method, but I will find another way to do that. I also like the other changes you have made and a better way to initialize the inputs.

Thank you very much for your help!

[Author]

Posts