Kendo grid change indicator and cancel not working

Question

I'm new to Kendo and the Kendo grid but I'm trying to learn how to use the master detail Kendo grid where the detail grid is supposed to support batch editing. The data is available in a local JavaScript object.

This jsFiddle demonstrates the problems I'm seeing.

Here's how the grid is being created - see the jsFiddle for the complete snippet -

$("#grid").kendoGrid({
    dataSource: items,
    detailInit: createDetail,
    columns: [
        { field: "Item", width: "200px" },
    ]
});

function createDetail(e) {
    $("<div/>")
        .appendTo(e.detailCell)
        .kendoGrid({
            dataSource: {
                batch:true,
                transport: {
                    read: function (options) {
                        options.success(e.data.SubItems);
                    }
                }
            },
            editable:true,
            pageable:true,
            toolbar: ["save", "cancel"],
            columns: [
                { field: "SubItem", title: "Sub Item", width: 200 },
                { field: "Heading1", title: "Heading 1", width: 100 }
            ]
        });
}

When you edit an item in the grid and click to the next cell, the details grid automatically collapses not matter where I click, even in an adjacent cell. When I open it again, I don't see the change indicator in the cell (red notch) but the new value is there. If I were to hook up the save to an ajax call, Kendo sends the right detail item(s) that were edited.
Nothing happens when I click cancel changes.

How do I get the grid to not collapse and see the change indicators ?

How do I get canceling of changes to work correctly ?

[Update] - Further investigation reveals that if I use an older Kendo version 2011.3.1129 , this works as expected. But if I use the newer 2012.3.1114, it doesn't. Dont know if this is a bug or a change in behavior.

Deepak Deepak · Accepted Answer · 2013-04-16T17:10:51

After much effort, I found that the cause seems to be that the master grid is rebinding automatically causing the behavior I observed. I was able to get around this by handling the dataBinding event in the master grid and within that, checking if any of the detail datasources were dirty and if so, calling preventDefault.

Here are relevant code snippets :

    dataBinding: function (e) {
               if (masterGrid.AreChangesPending()) {
                   e.preventDefault();
               } 
    }

    AreChangesPending : function () {
        var pendingChanges = false;
        // I gave each detail div an id so that I can get a "handle" to it 
        $('div[id^="detail_"]').each(function (index) {
            var dsrc = $(this).data("kendoGrid").dataSource;
            $.each(dsrc._data, function () {
                if (this.dirty == true || this.isNew()) {
                    pendingChanges = true;
                }
            });

            // For some reason, Kendo did not detect new rows in the isNew() 
            // call above, hence the check below
            if (dsrc._data.length != dsrc._total) {
                pendingChanges = true;
            }
        });

        return pendingChanges;
    }

Kendo grid change indicator and cancel not working

1 Answers