KendoUI Grid deferred delete


In previous posts I showed how to locally manage (create, update and remove) a JSON array using Kendo UI Grid.
In the post, I removed rows from the Grid immediately (even that you could cancel the remove if you did not sync changes).
Some people asked me on how to do not remove rows from the grid until you actually sync changes, here I will show you how to do it…

Kendo UI Grid deferred delete

Step1: mark row for deletion

Previously, we defined our custom delete command as a grid.removeRow of selected rows.

// Custom grid command : delete
$(".k-grid-delete-selected").bind("click", function (ev) {
    var selected = grid.select();
    if (selected && selected.length > 0) {
        grid.removeRow(grid.select());
    }
});

Instead of removing it, we will mark as pending on being deleted with

// Custom grid command : delete
$(".k-grid-delete-selected").bind("click", function (ev) {
    var selected = grid.select();
    if (selected && selected.length > 0) {
        grid.select().addClass("ob-marked-to-delete");
    }
});

And I will visually mark it with a yellowish text color:

.ob-marked-to-delete {
    color: #ff6347 !important;
}

Step 2: remove it

Now, we have to change sync function for remove pending deletions.

// Custom grid command : sync
$(".k-grid-sync-changes").bind("click", function (ev) {
    // Delete marked cells
    $(".ob-marked-to-delete").each(function(idx, elem) {
        grid.removeRow(elem);
    });
    // Now save data
    entries = stocksDataSource.data();
    saveData(entries);
    stocksDataSource.success(entries);
});

NOTE: I don’t need to modify cancel command for reseting marks since they are automatically reset while refreshing the table.

Step 3: final styling

When I select one record and mark it to delete, I get something like:

Where we see that the record is marked (yellowish text color) but the first column in that row does not have the style. To fix this I will change the selector for my CSS style

.ob-marked-to-delete > td {
    color: #daa520!important;
}

Saying to do not apply the style to the row BUT to the different cells of that row getting:

Step 4: toggle mark to delete

Even that I might remove the marks by canceling pending actions, it is nicer being able to cancel just the mark and not loosing other pending actions.
For getting this we will replace addClass by toggleClass:

// Custom grid command : delete
$(".k-grid-delete-selected").bind("click", function (ev) {
    var selected = grid.select();
    if (selected && selected.length > 0) {
        grid.select().toggleClass("ob-marked-to-delete");
    }
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s