.cancelChanges(dataItem) does not update the grid UI

[Louis]

I'm implementing single row undo functionality (rather than cancelling all changes made in the grid). I have an image that will be clicked to trigger the undo:

columns.Template(@<text></text>).ClientTemplate("<img class='undoButton' style='width:16px;' src='Content/images/undo.png' />").Width(32);

Then some JavaScript that attaches the functionality to the img:

<script type="text/javascript">
        // Undo functionality
        $('#activity-grid').on('click', '.undoButton', function (e) {
            e.preventDefault();

            //alert('undo');

            var grid = $('#activity-grid').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));

            dataItem.dirty = false;

            grid.dataSource.cancelChanges(dataItem); // works

            //grid.refresh(); // only way to show the changes in the UI
        });
</script>

The bolded line clears the changes, but the grid is not updated unless I call the line that is commented out (grid.refresh()).

The problem is that calling .refresh clears the other rows' "dirty" indicator, which is problematic. Is there a way to refresh the UI for a single row? I thought by calling cancelChanges(dataItem), it would do that automatically for me.


Thank you!

[Rosen]

Hi Louis,

Indeed, the design behavior of cancelChanges method when a model instance is provided, is to not trigger the change event of the DataSource. Therefore, in order to achieve the functionality in question you will need to manually update the row content. Here you can find a simple implementation of such approach.

Regards,
Rosen
Telerik

[Louis]

This worked really well! Here is my updated JavaScript:

<script type="text/javascript">
        // Undo functionality
        $('#activity-grid').on('click', '.undoButton', function (e) {
            e.preventDefault();

            var grid = $("#activity-grid").data("kendoGrid");
            var dataItem = grid.dataItem($(this).closest('tr'));

            var model = grid.dataSource.get(dataItem.DocumentGuid);

            grid.dataSource.cancelChanges(model);

            var row = grid.items().filter("[data-uid=" + dataItem.uid + "]");

            renderRow(grid, row, model);
        });

        function renderRow(grid, row, model) {
            var template = row.hasClass("k-alt") ? grid.altRowTemplate : grid.rowTemplate;
            var tmp = $(template(model));
            row.replaceWith(tmp);
        }
    </script>