Asynchronous Delete Row Validation in Shield UI Grid

The Shield UI Grid is a powerful data visualization component, perfect for displaying tabular data. It supports plenty of advanced options, among which is editing - creation, updates and deletes of data items.

Shield UI Grid provides a built-in configuration for enabling user confirmation of each item row being deleted. This is an asynchronous operation which occurs on the client side. An example of how it can be set is shown below:

$("#grid1").shieldGrid({
    ...
    editing: {
        enabled: true,
        event: "doubleclick",
        type: "cell",
        confirmation: {
            "delete": {
                enabled: true,
                template: function (item) {
                    return "Delete row with ID = " + item.Id + "?";
                }
            }
        }
    }
    ...
});

Developers who want to perform asynchronous validation, such as one that includes a server-side request and processing, can easily implement it by handling the Grid's command event.

Before a row is being deleted, the Grid component will fire a "command" event with the "delete" command name. When that happens, it can be cancelled, which will stop the processing of the current delete operation, and an asynchronous process can be started.

When the asynchronous process completes, the previously cancelled delete command can be executed by calling the deleteRow() method of the Grid.

A complete example of how this can be implemented is shown below:

events: {
    command: function(e) {
        if (e.commandName == "delete") {
            var grid = this;
                  
            // cancel the delete command
            e.cancel = true;
                  
            // show loading indicator
            grid.loading(true);
                  
            // get the index of the row being deleted
            var rowIndex = e.rowIndex;                 
                  
            // perform some kind of asynchronous validation
            setTimeout(function() {
                // hide the loading indicator
                grid.loading(false);
                    
                // delete the row
                grid.deleteRow(rowIndex);
            }, 3000); // e.g. waits for 3 seconds
        }
    }              
}

More information about the command event and all available commands can be found here.