Kendo Grid has an in-built hierarchical feature for displaying master detail records. Sometimes, we need to edit the detail line item in the expand view itself. When we change the template for the detail grid and place HTML form to update detail line item - as soon as we change a single property for a line item, Kendo Grid’s default behavior gets triggered and the whole grid re-binds and sets to collapsed view. To get a good look at the problem, go to this link:

http://trykendoui.telerik.com/uguV

I tried to resolve this problem with the List View but the refresh problem persisted, and so did I. After a bit of coding I worked up a simple but effective solution that I would like to share here. I started off by using a normal Kendo Table template binding method, and deployed a simple trick to behave it as a hierarchical grid.

Let’s walk through the solution step-by-step.

STEP 1: Create a sample hierarchical data source as shown below

 

 

Here, we have user’s static data along with contact details. As you can see in this snippet, one user can have multiple contact details. We will now create a data source using this data.

 

Note: Here I’ve added IsExpanded property to both models i.e. parent and child items, to enable the expand/collapse feature. I’ll explain its usage in forthcoming steps. For now, just add these properties which of course are irrelevant to our database/storage. Set their default values to false.
Here, the displayed view is bound with the “users” array rather than userDataSource. So now, Kendo will maintain two copies. The original copy is stored in userDataSource.

 

STEP 2: Create HTML template for the parent Item (User Details)

Here, name of user is displayed with Details link, to show details. It’ll toggle the contact details of that particular user.

 

STEP 3: Create HTML template for child Item (Contact Details)

When the details are expanded, all contact details for that person are displayed. You can go to Dojo sample link to check this. We have one “Edit” button displayed on each contact detail. When you click on this button, the details open in edit mode. You can view the code snippet for child item template below: 

 

As you can see, there are two Rows, one row is visible and at the same time the other is invisible. In effect, we have toggled rows. The toggling is possible with IsExpanded property that is set with the toggleExpand function of view model.

Code snippet for this function is as below:

 

This function is a common toggle function for both parent and child level items.

STEP 4: Define a function to update the actual data source

 

The page will display as below:

When we click on “Edit”, the contact details are opened in edit mode. If we click on “Save”, the original data source is updated. If cancelled, the change is replaced by value from the original data source.
Below you can see the code for Update:

When user changes the data and clicks on “Save”, the actual data source is updated. The above code contains function for the same.
The main advantage over here is, as it’s not a grid or list view, we have effectively avoided a re-bind from taking place. As a result, the state of expand/collapse remains as it is. 
When a change is saved, only a particular item will collapse rather than all the rows.
Click on below link to access the complete working sample:

http://trykendoui.telerik.com/ITUd