This is a migrated thread and some comments may be shown as answers.

.cancelChanges(dataItem) does not update the grid UI

2 Answers 133 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Louis
Top achievements
Rank 1
Louis asked on 13 Jan 2014, 10:51 PM
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!

2 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 14 Jan 2014, 09:14 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Louis
Top achievements
Rank 1
answered on 14 Jan 2014, 08:29 PM
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>
Tags
Grid
Asked by
Louis
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Louis
Top achievements
Rank 1
Share this question
or