[Solved] How to do editing on grid expanded template tab view

[Johnson Leong]

Hi:
Do you have example on how to do editing on grid templating in your example detail template where the Contact tab data is from the same datasource and when editing is enabled and when user changed the data on the tab form, how can the save button will do the saving for the grid including the customer tab form data changed.

Also the field template of setting null to blank is not carrying over to the tab templated form data?


Thanks,

[Lee]

We also have the same problem.  Is it possible to use editable fields on a template?  I can't seem to find any documentation on this.

Regards

Mark

[Good]

we have the same problem

[Iliana Dyankova]

Hi guys,

The editing behavior of detail template in Kendo UI Grid is not supported out of the box. As a workaround I would suggest to hook up to the client event of the "Save" button and set the new values of the model. For example: 

detailRow.find(".employee-details > input[type='button']").click(function() {

    var ds = $(this).closest(".k-grid").data("kendoGrid").dataSource;

    //retrieve the input values
    var firstNameValue = detailRow.find(".employee-details>input[name=FirstName]").val();
    var lastNameValue = detailRow.find(".employee-details>input[name=LastName]").val();
    var countryValue = detailRow.find(".employee-details>input[name=Country]").val();

    //use set method to change the corresponding values of the model
    //in that way the record will be marked as dirty
    model.set("FirstName", firstNameValue);
    model.set("LastName", lastNameValue );
    model.set("Country", countryValue );

});

This way the corresponding dataSource records will be marked as "dirty"  i.e. with changes and when you later call the dataSource.sync() they will be submitted to the server. The button could be appended to the grid as a toolbar command or to be external button. 

toolbar: [{ text:"Save Changes", className: "grid-save-changes"}]

$(".grid-save-changes").click(function() {
    $("#grid").data("kendoGrid").dataSource.sync();
});

For convenience I created a small jsFiddle example that uses the aforementioned approach. Please have in mind that this sample does not have an update transport configuration and will not actually submit the updates to the server.

I hope this helps. 

Regards,
Iliana Nikolova
the Telerik team

[Chaojin]

My work requires me to implement the edit feature as discussed in this thread. The small jsFiddler sample given at the end gives me a good start. However, I have a question. In the sample, if there are multiple rows expanded and modified, only the row the save button located at will be saved. Also, all the other expanded rows will be collapsed without saving. My question is: Is it possible that only the row the save button located at get closed and all the other expanded rows remain expanded so that the user can get a chance to save them one by one?

[Petur Subev]

Hello Chaojin,

The forum thread is pretty old, I updated the version and change the approach to use the MVVM binding instead. 

However each time the value is changed the Grid is redrawn which requires a small hack to re-open the detail tab again (however the other tabs will become collapsed).

I hope this helps.

http://jsbin.com/Agux/2/edit

Kind Regards,
Petur Subev
Telerik

[Chaojin]

Hi Petur,

Thank you so much for responding to my question. I appreciate your help. The first thing I want to make sure is with this new version, can it achieve the feature I am asking? The reason I am asking is that in the sample, I can't find the "Save" button and also I can't make the fields for the "Contact Information" editable. So I don't know whether it can achieve the feature or not.

The reason we are not using the MVVM binding is two reasons. The first is performance when loading the detail row. We have 9 tabs on the detail row. Each tab has many fields. The next is there is one tab, the fields are not directly from the grid row. Therefore we do not want to bind to Kendo controls in the detail row template directly when the detail row is initialized. We will only put html tags in the detail row template. Only when the user click on one tab, then the html tags will be converted to Kendo controls. Does this make sense?

So my question remains the same, is it possible to open multiple detail rows and have them modified. When the "Save" button is click, only the detail row the "Save" button located should be closed. The other open detail rows should remain open. Since this is a quite critical feature to the user's use experience, this is first priority. If it only work in the MVVM version, that is fine. I sacrifice the detail row loading performance and try to include all fields for all tabs in the grid. Please advise.

[Petur Subev]

Hello Chaojin,

I do not see any problems with what you are trying to achieve. You can skip using the MVVM and handle it manually - update just the model for that detailRow. The sample Iliana shared is quite the same. 
What exactly is the problem that you face, what do you mean by 'I can't find the Save button'?

Check carefully the methods of the dataSource/Grid that should be of help here:

http://docs.kendoui.com/api/web/grid#methods-dataItem

http://docs.kendoui.com/api/framework/datasource#methods-sync

http://docs.kendoui.com/api/web/grid#methods-collapseRow

and jQuery methods such as:

http://api.jquery.com/closest/

http://api.jquery.com/on/

If you still struggle modify the JSBin/ JsFiddle example and share it so we can advise you further.

Kind Regards,
Petur Subev
Telerik

[Chaojin]

Hi Petur,

I appreciate the response.

In Iliana's sample, there is a "Save" button inside the "Contact Information" tab of the detail row. Will you please go to the sample and so you can see what I mean? First, open multiple detail rows, then modify them, then click one of the "Save" button to see what happens. The result is: When one click the "Save" button, only the detail row the "Save" button located at get saved. All open detail rows get closed. All the changes of the other detail rows will lose. What I want to achieve: Only the detail row the "Save" button located at get closed while the other detail rows should stay open. Can you modify the sample so it can achieve what I need?

Thanks,
Chaojin

[Petur Subev]

Hello Chaojin,

Thank you for clarifying what you are trying to achieve, however I am afraid it is not possible. Each time the dataSourcе is synchronized the Grid will be rebound which means that all detail cells will be closed.

http://docs.kendoui.com/api/framework/datasource#methods-sync
 

Kind Regards,
Petur Subev
Telerik

[Cory]

If you already have a reference to the masterRow, why is it necessary to build up the row selector?