The ASP.NET Grid has a set of 18 properties for setting events that will be
executed on the client-side

• OnBeforeClientAdd
• OnBeforeClientCancelAdd
• OnBeforeClientInsert
• OnBeforeClientEdit
• OnBeforeClientCancelEdit
• OnBeforeClientUpdate
• OnBeforeClientDelete
• OnClientAdd
• OnClientCancelAdd
• OnClientInsert
• OnClientEdit
• OnClientCancelEdit
• OnClientUpdate
• OnClientDelete
• OnClientSelect
• OnClientDblClick
• OnClientPopulateControls
• OnClientCallback

Setting the events

For each client-side event that you want to handle, you need to specify a javascript
function that will be executed when the event is triggered.

<obout:Grid id="grid1" runat="server">
        <ClientSideEvents
 OnBeforeClientAdd="onBeforeClientAdd"
 OnBeforeClientCancelAdd="onBeforeClientCancelAdd"
 OnBeforeClientInsert="onBeforeClientInsert"
 OnBeforeClientEdit="onBeforeClientEdit"
 OnBeforeClientCancelEdit="onBeforeClientCancelEdit"
 OnBeforeClientUpdate="onBeforeClientUpdate"
 OnBeforeClientDelete="onBeforeClientDelete"
 OnClientAdd="onClientAdd"
 OnClientCancelAdd="onClientCancelAdd"
 OnClientInsert="onClientInsert"
 OnClientEdit="onClientEdit"
 OnClientCancelEdit="onClientCancelEdit"
 OnClientUpdate="onClientUpdate"
 OnClientDelete="onClientDelete"        
 OnClientSelect="onClientSelect"
 OnClientDblClick="onClientDblClick"
 OnClientPopulateControls="onClientPopulateControls"
 OnClientCallback="onClientCallback" />
</obout:Grid>

Add/Edit/Delete Records


These events have only one argument of type Object.This object contains all the data for the record which is added/inserted/edited/updated/deleted.To access its members, you need to use the names of the data fields specified for each column (e.g. record.CompanyName)

The OnBeforeClientXXXX events are executed before the actual action takes place. These events are the best place to make client-side validation (e.g. if the user filled all the fields, if the fields have the correct type) or to require a confirmation from the user. If these functions return false the action will be cancelled.

function onBeforeClientInsert(record) {       
        if(confirm("Are you sure you want to insert this new record for " + record.ShipName + "?") == false) {
                return false;
        }
        
        return true;
}
function onBeforeClientUpdate(record) {       
        if(confirm("Are you sure you want to update this record " + record.ShipName + "?") == false) {
                return false;
        }
        
        return true;
}
function onBeforeClientDelete(record) {       
        if(confirm("Are you sure you want to delete the record with the ID " + record.OrderID + "?") == false) {
                 return false;
        }
                
        return true;
}

The OnClientXXXX events are executed after the event takes place (after the database is updated).
These events can be used for example to show a message to the user that the action was completed successfully.

function onClientInsert(record) {     
        alert("A new order was created for " + record.ShipName + ".");  
}
function onClientUpdate(record) {     
        alert("The order with ID " + record.OrderID + " (for " + record.ShipName + ") was modified.");
}
function onClientDelete(record) {     
        alert("The order with ID " + record.OrderID + " (for " + record.ShipName + ") was deleted.");
}

The OnClientSelect event is executed after a record is selected (or when more records are selected). The argument of this event is an Array of objects representing all the records that were just selected:

function onClientSelect(arrSelectedRecords) {
    for(var i=0; i<arrSelectedRecords.length;i++) {
        var record = arrSelectedRecords[i];
        sMessage += record.OrderID + " --- " + record.ShipName + " --- "
         + record.ShipCity + " --- " + record.ShipCountry + "\n";
    }
    alert(sMessage);
}

The OnClientPopulateControls event is executed when the controls used for add/edit are populated with data.
This event can be used to set default values for the newly added record, or to modify the existing data
that will be loaded into the controls for edit.

The event has two arguments: an object containing all the data which will be used to populate the controls
and a string paramter indicating whether an add or edit action takes place.

The function must return the object containing the modified data - this data
will be loaded into the controls for add/edit.

function onClientPopulateControls(record, type) {
    if(type == "add") {
        // default values for add
        record.ShipName = "Default Name";
        record.ShipCity = "Default City";
        record.ShipCountry = "Default Country";
    } else {
        // apply changes to the values for the edit controls
        if(record.ShipCountry == "") {
            record.ShipCountry = "USA";
        }
    }

    return record;
}

The OnClientDblClick event is executed when a record is dobule-clicked.
The event receives only one parameter - the index of the double-clicked record

function onClientDblClick(iRecordIndex) {    
    alert("The record with the index " + iRecordIndex + " was double-clicked.");
}

The OnClientCallback event is executed when a callback takes place.

function onClientCallback() {    
    alert("A callback occured");
}

See also the Events Documentation