Editable Fields in Grid Details

[Starr]

Here is the situation. I have a table which contains columns of the following form: ItemTypeId, StringValue1, StringValue2, StringValue3, DecimalValue1, DecimalValue2, DecimalValue3, DateValue1, DateValue2, DateValue3, etc..etc...

Then I have a metadata table which maps certain fields to certain Item Types:
ItemTypeId: 1
FieldName: Description
FieldType: text
TargetField: StringValue1

What I want is for the declared fields to appear in the Detail Template for the Grid rows. I've tried to emulate the markup for the popup editor, and generated the following attempt at a proof of concept:

$(document).ready(function () {
    $("#mainGrid").kendoGrid({
        dataSource: itemSource,
        toolbar: ["save"],
        columns: [
            { field: "Id", title: "Id" },
            { field: "Description", title: "Description" }
        ],
        detailTemplate: kendo.template($("#details").html()),
        detailInit: detailInit,
        editable: true
    });
});

function detailInit(e) {
    var detailRow = e.detailRow;
    var container = e.detailRow.find(".k-edit-form-container");
    fieldSource.fetch(function () {
        fieldSource.filter({ field: "ItemTypeId", operator: "eq", value: e.data.Id });
        var data = this.view();
        for (var i = 0; i < data.length; i++) {
            var field = data[i];
            // Create Label
            $("<div class='k-edit-label'><label for='" + field.TargetField + "'>" + field.FieldName + "</label>").appendTo(container);
            // Create Data Entry Field
            var div = $("<div />");
            div.attr("data-container-for", field.TargetField);
            div.attr("class", "k-edit-field");
            div.appendTo(container);
            if (field.FieldType == "text") {
                var input = $("<input />");
                input.attr("name", field.TargetField);
                input.attr("type", "text");
                input.attr("class", "k-input k-textbox");
                input.attr("data-bind", "value:" + field.TargetField);
                input.appendTo(div);
            }
            if (field.FieldType == "decimal") {
                var input = $("<input />");
                input.attr("name", field.TargetField);
                input.attr("data-bind", "value:" + field.TargetField);
                input.appendTo(div);
                input.kendoNumericTextBox();
            }
        }
    });
}

However the details section does not seem to end up bound to the relevant fields. It correctly lists the controls that should contain the data for each item, but it neither shows the initial value in those fields, nor does it register edited values and save them when Save Changes is clicked.

What am I doing wrong here? Is what I am attempting to do feasible with the Kendo framework?

[Alexander Valchev]

Hello Starr,

If I understood correctly you would like to edit data in the details template of the Grid.
I believe that the main issue with your code is that the template is not bound to the DataSource's view (kendo.bind is never called).

A similar scenario, to the one that you are trying to configure, is demonstrated in this jsFiddle demo: http://jsfiddle.net/FYQ7E/
Please check the sample and let me know if you have any further questions.

Regards,
Alexander Valchev
Telerik

[Oscar]

Hi Alexander,
I've updated your sample http://jsfiddle.net/FYQ7E/2/ so as the user doesn't need to click the save button in the detail template  to update the originalModel.
I've changed editableModel variable to be directly originalModel.
I've also used a kendoDropdownList for country field.
The problem is when I select a country, all the detail templates of the grid collapse surprisingly.
How can I prevent this behavior?

Kind regards.
Oscar.

[Alexander Valchev]

Hello Oscar,

The behaviour occurs because the detail template is bound directly to the edited model.
As a result, as soon as the user changes the DropDownList value, the Grid's dataSource changes which causes the Grid to rebind.

The solution is not to bind the editors directly to the Grid's model. Actually the correct code persists in the page but is commented out.

editableModel = new Model(originalModel.toJSON());

For your convenience I updated the jsFiddle sample: http://jsfiddle.net/FYQ7E/3/

Regards,
Alexander Valchev
Telerik

[Oscar]

Hello Alexander,
Thanks for responding so soon.
The requirement is the user doesn't have to click the save button in every detail template to save his changes. The user already has a Save Changes button at the top of the page to update all the data changed in the grid.
Furthermore, in your example, if you expand three details templates (Nancy, Andrew and Janet) because you want to compare their countries and you click the save button in only one of them (Nancy), as you say, the grid rebinds and collapses all the detail templates (why?), making the user has to expand again the detail templates he has not collapsed (Andrew and Janet).

I want the detail templates collapse only when the user wants to (clicking the minus icon in the row) and save all the changes by clicking the Save Changes button at the top of the page.
How can I achive this? Any help will be appreciated.

Kind regards,
Oscar.

[Alexander Valchev]

Hello Oscar,

I am afraid that what you would like to achieve is not supported by Kendo Grid. The details rows are collapsed as soon as the user performs edit, because the Grid refreshes itself after dataSource change.

Pressing the save button in any of the detail forms updates the corresponding data item which again forces the grid to refresh.

The main idea is that in order to update the data you should make a change in the DataSource and as soon as you make this change, Grid will refresh and all expanded rows will collapse. The behavior cannot be prevented. My recommendation is to consider using one of the build-in edit modes.

Regards,
Alexander Valchev
Telerik

[s_guryev]

Hello, guys. Thank you for this thread.

Alexander, I have updated your jsfiddle: http://jsfiddle.net/313t2crx/

I have added "editable: true" and "batch:true" to the dataSource.

You said "Pressing the save button in any of the detail forms updates the corresponding data item which again forces the grid to refresh." but changing the value INSIDE THE COLUMN cause the dataItem update as well (because we see the new value in the detail row as well) but doesn't close the detail row. So my questions are:

1. What difference between input with data-bind in CELL and input with data-bind in DETAIL?

2. How to make the input in the DETAIL works the same way as the CELL one (doesn't close the detail row)

Thank you!

[s_guryev]

Also here is the new version of the jsfiddle with the 2015.3.930 Kendo version: http://jsfiddle.net/313t2crx/2/

It doesn't remain the cell in the edit mode on lost focus.

 

[s_guryev]

I see that editing via CELLs doesn't fire the DataBinding event (editor in the DETAIL does). But updates the underlying dataItem

[Alexander Valchev]

Hi Sergey,

Thank you for the question.

The Kendo Grid incell editing mode prevents data rebinding. This is part of the incell editing logic - the changes are saved and the grid is rebound only after the changes are saved manually by the user.

You cannot get this functionality out of the box in the detail template. Please use the workaround provided in my previous reply.

Regards,
Alexander Valchev
Telerik