Batch editing for details grid

[Reece]

Hi,

I'm having trouble getting saveChanges() to work correctly when both my main grid and detail grid consist of related, editable data.

I have data coming back from an API that looks something like this:

var originalDataset =
[
    {
    "id" : "uuid1",
    "editableParentField" : "someParentValue",
    "nonEditableParentField" : "someParentValue",
    "children" : [
                    {
                        "editableChildField" : "someChildValue",
                        "nonEditableChildField" : "someChildValue"
                    },
                    {
                        "editableChildField" : "someChildValue",
                        "nonEditableChildField" : "someChildValue"
                    }
                ]
    },
    {
    "id" : "uuid2",
    "editableParentField" : "someParentValue",
    "nonEditableParentField" : "someParentValue",
    "children" : [
                    {
                        "editableChildField" : "someChildValue",
                        "nonEditableChildField" : "someChildValue"
                    }
                ]
    }
]

I need to display the parent fields in my main grid and each of the children in the detail grid for each row. 

The data is retrieved prior to my grid instantiation and stored in an ObservableArray, later used to create the DataSource for my grid. 
I wasn't sure how to preserve the editable properties when using a Node definition for a HierarchicalDataSource and so I have a Model defined similarly to this:

var ParentObject =
        kendo.data.Model.define({
            id: "id",
            fields: {
                    "editableParentField" : { type: "string", editable: true},
                    "nonEditableParentField" : { type: "string", editable: false}
           }
        });

var ChildObject=
        kendo.data.Model.define({
            fields: {
                    "editableChildField" : { type: "string", editable: true},
                    "nonEditableChildField" : { type: "string", editable: false}
           }
        });

Given that I can't define an Array of ChildObjects in my ParentObject definition (this may be the root cause for my issue), I'm using the following approach to produce my DataSource's data (I'm using Angular):

$scope.observableArray = new kendo.data.ObservableArray([]);

angular.forEach(originalDataset, function(value, key){
        var parentObject = new ParentObject(value);
        var children = [];
        angular.forEach(originalDataset.children, function(value, key){
            var childObject = new ChildObject(value);
            children.push(childObject);
        }
        parentObject.set("children", children); // ParentObject now has an array of ChildObjects.
        $scope.observableArray.push(parentObject);
});

My main grid then uses $scope.observableArray as its DataSource's data, and the detail grid uses "dataItem.children" - this works fine in terms of displaying my data with the correct editable fields but I'm having the following troubles with the editing itself:

1) Cells in my detail grid are automatically saved on edit, rather than staging batches (this is actually fine in my case but still unexpected I think).
2) If I begin editing a row in the main grid, I then see the batch editing functionality for that row's detail rows. However, saveChanges on the detail grid does not work.
3) If I edit a row in the main grid in isolation, I get batch editing functionality, however saveChanges does not work.

In both cases where I say "saveChanges doesn't work," I get the following error:

Uncaught TypeError: Cannot read property 'editableParentField' of undefined.

I believe this is to do with my Model definition and the hacky approach for creating my ChildObjects, so if you could advise on the best approach for data of this structure in order to use batch editing correctly that would be great.

Thanks,

Reece

[Alexander Popov]

Hi Reece,

The Grid does not support editing hierarchical data coming from a single DataSource. Since the scenario is not supported, all approaches would be more or less hacky and would require certain amount of custom code. The behavior you experience is somewhat expected, because it is the parent Grid's DataSource that tracks the changes. If you use separate DataSources for the child Grids, then their items will no longer be observed by the parent Grid, so you'd need either a custom function that synchronizes them (see example) or use a remote service instead.

Regards,
Alexander Popov
Telerik