The preview of the list data seem to fine. The problem starts when i go on the edit mode of the ListView and try to alter some values.
When changing a value on a field of the ListView and click somewhere outside of the field the expandable row collapses. This creates the problem that i do not manage to press on the "Save" button and call my own function.
I have created a jsFiddle Example of this problem. To reproduce it do the following steps:
1) Expand one of the rows
2) Press on "Edit" button
3) Change the "Product Name" field value
4) Press outside the input area.
As you will notice the row immediately collapses.
Thank you in advance
7 Answers, 1 is accepted
This post will summarize the behavior reported in this and the other forum thread.
The behavior you observe in both cases is due to the fact that the Grid and the ListView widgets share same model. When the model field is changed the Grid will refresh itself which will cause the expanded row to collapse on click of the `Cancel` button and on blur after change in the edit template.
Here is a sample fiddle that demonstrates how to overcome this behavior: http://jsfiddle.net/P62Vy/
Nikolay Rusev
the Telerik team

Could you please give me some further detail why the following lines are needed in the 'save' method ?
if (this.editable.end()) {
data.splice(data.indexOf(codeDetailData), 1, e.model);
}
this.editable.end() - will trigger validation check and will return `true` if validation pass or `false` if not. We are thinking of changing the way `save` event is triggered, so that you will not have to have this line. But this is how it will work with current ListView implementation.
data.splice(data.indexOf(codeDetailData), 1, e.model) - splice is a ObservableArray method that will replace the original model from the Grid with updated one from the ListView. This will trigger refresh of the Grid and it will show the newly saved data.
Hope that makes sense.
Nikolay Rusev
the Telerik team

I've same same scenario but different issue.
I'm using Edit template in Grid. I can click edit on multiple rows to enline editing.
Once I click Save button, it is collapsing all other rows which I have upadted yet. I need to collapse only edited rows and not other.
Please suggest.
--Thanks,
RP
We are not sure how to replicate this. Can you create a jsbin/jsfiddle example that illustrates the behavior?
Regards,Nikolay Rusev
Telerik

I've a requirement where I'm using GRID control
I can click edit on multiple rows, like below.
Edit --> (Row 1)
'
'
<SAVE> <Cancel>
(Row 2)
(Row 3)
Edit --> (Row 4)
'
'
<SAVE> <Cancel>
(Row 5)
Now say I open two rows out of 5 for editing and if I click Row 1 SAVE button for saving changes
my expectation is GRID should save Row changes and close Row 1 edit mode.
But actually GRID is refreshing and closing all other open rows (Row 1 and Row 4 as well)
--Thanks,
RP
The Grid doesn't support editing multiple rows at the same time. When the user clicks the `Save` button of the edit form it will cause DataSource.change event to trigger which will refresh(repaint) the whole grid and all edit forms will be closed.
It is what happens in the jsfiddle example in this thread.
Nikolay Rusev
Telerik