Jsgrid: Array custom field allows Items to be added but not removed.

[aidankilleen]

I have created a custom field that allows the user to edit an array. Initially this is a text box and
insertTemplate converts the array to a string using .join(v)
the insertValue and editValue functions parse the text back into an array using v.split(",").

When I add an element to the textbox it is stored correctly.

When I try to remove an element from the textbox the array is not updated.

I have created a jsfiddle that demonstrates this. You can edit the Colour field to add an element but you cannot remove one.

[aidankilleen]

I have tracked down the problem and I think it is in jsgrid.js line 1292

The _updateRow function is taking the original object and the edited object and merging them together using $.extend. For normal fields this works fine, the old values are replaced with the new values. For an array however it merges the two arrays together - causing the reported behaviour where you can add items to the array but you cannot remove them.

My temporary fix is to remove any array elements from the original object before calling $.extend:

_updateRow: function($updatingRow, editedItem) {
    var updatingItem = $updatingRow.data(JSGRID_ROW_DATA_KEY);

    // empty any arrays in updatingItem before calling $.extend
   for (prop in updatingItem) {
        if (Array.isArray(updatingItem[prop])) {
            updatingItem[prop] = [];
        }
    }
    var updatingItemIndex = this._itemIndex(updatingItem);
    var updatedItem = $.extend(true, {}, updatingItem, editedItem);

[aidankilleen]

I would appreciate it if you could confirm that this fix is valid and doesn't have any consequences that I might have missed.

Thanks

[tabalinas]

Yes, that's a tricky case. Actually, if we would do non-deep coping everything works fine. But we need it to support nested fields.

Your hotfix looks valid. While I don't see a proper fix for the moment w/o a breaking change.

[robertsLando]

Same problem here, I have fixed this by set an id on items and change the value of arrays in validator function of the field. Any other ideas?

//validator property of the field
validate: {
    validator: function(value, item) {
    var valid =value && value.length > 0;
    if(valid){
       var d = data.find(l => l._id == item._id);
       if(d) d.arrayProp = item.arrayProp;
       }
       return valid;
   },

//automatically add an id to items on insertion

,
insertItem: function(item) {
    if(!item._id) item._id = Math.random().toString(36).substr(2, 10);
    data.push(item);
 },

[davehayes]

I just got bit by this too. In my case this behavior of extend causes an inability to delete elements from an array. Would it be possible to add something like this...

var updatedItem = this._mergeObjects(updatingItem, editedItem);
...
_mergeObjects: function(ob1, ob2) {
    return $.extend(true, {}, ob1, ob2);
}

...? Then we API users can replace _mergeObjects with our own code. (As it is, I'm going to have to replace _updateRow.)