.cancelChanges(dataItem) does not update the grid UI

3 posts, 0 answers
  1. Louis
    Louis  avatar
    14 posts
    Member since:
    Mar 2011

    Posted 13 Jan 2014 Link to this post

    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. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 14 Jan 2014 Link to this post

    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!
  3. Louis
    Louis  avatar
    14 posts
    Member since:
    Mar 2011

    Posted 14 Jan 2014 Link to this post

    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>
Back to Top