Batch Editing Client-side API
The Batch Editing client-side API exposes a number of methods which provide more control over the editing process, let you get/set cell values and open cells for editing. You can see a list of the methods available with Batch Editing in Table 1.
To use these methods, you need a reference to the Batch Editing Manager object first. You can get it from the grid object:
var grid = $find("<%=RadGrid1.ClientID%>");
var batchEditingManager = grid.get_batchEditingManager();
The grid object is the first argument to all of its client-side handlers so you can use it without hardcoding IDs:
<ClientSettings>
<ClientEvents OnBatchEditOpened="OnBatchEditOpened" />
</ClientSettings>
</telerik:RadGrid>
<script>
function OnBatchEditOpened(sender, args) {
var batchEditingManager = sender.get_batchEditingManager();
}
</script>
Table 1: Batch Editing Client-side API methods
Name | Parameters | Return Type | Description |
---|---|---|---|
addNewRecord(tableView) | GridTableView | Adds a new record to the grid. | |
deleteRecord(tableView,row) | GridTableView, <tr> element | Removes the specified record from the table. | |
saveChanges(tableView) | GridTableView | Sends a request to the server to save the changes made in the specified GridTableView. | |
saveAllChanges | Sends a request to the server in order to save all changes made from the user so far. | ||
saveTableChanges(tableViews) | GridTableView[] | Sends a request to the server to save the changes for the GridTableViews passed in the arguments. The method expects an array of GridTableView objects. | |
cancelChanges(tableView) | GridTableView | Sends a request to the server to cancel all unsaved changes made so far. | |
openCellForEdit(cell) | <td> element | Opens the specified cell for editing. | |
openRowForEdit(row) | <tr> element | Opens the specified row for edit (opens all editable cells in the row for edit). | |
getCellValue(cell) | <td> element | string | Returns the value of the respective cell. |
changeCellValue(cell, newCellValue) | <td> element, value | Assigns a value to the respective cell. | |
get_currentlyEditedCell | <td> element | Returns the element of the currently edited cell. This method should be used when EditType is set to Cell. | |
get_currentlyEditedRow | <tr> element | Returns the element of the currently edited row. This method should be used when EditType is set to Row. | |
hasChanges(tableView) | GridTableView | boolean | Returns whether there are unsaved changes in the tableview. Similar to an IsDirty flag. |
When firing grid commands by using the fireCommand method some commands are detected, canceled and instead their corresponding batch editing client-side functions are called. Below a list of the handled commands:
Fired Command | Corresponding Batch Edit Command |
---|---|
Cancel, CancelAll | cancelChanges |
Delete | deleteRecord |
Edit | openRowForEdit |
InitInsert | addNewRecord |
PerformInsert, Update, UpdateEdited | saveChanges |
Sample use cases
Prevent editing of certain cells
Canceling the OnBatchEditOpening client-side event is a reliable way to prevent a cell from being edited if a certain condition is satisfied.
Sample description: Prevent editing the ShipName cell if the respective ShipCountry is "Brazil" or "France"
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px"
DataSourceID="SqlDataSource1"
AutoGenerateDeleteColumn="true"
AllowAutomaticInserts="true"
AllowAutomaticUpdates="true"
AllowAutomaticDeletes="true">
<ClientSettings>
<ClientEvents OnBatchEditOpening="onBatchOpening" />
</ClientSettings>
<MasterTableView EditMode="Batch" BatchEditingSettings-EditType="Cell" DataSourceID="SqlDataSource1" AutoGenerateColumns="true" CommandItemDisplay="Top"
DataKeyNames="OrderID">
</MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
InsertCommand="INSERT INTO [Orders] ([OrderDate], [Freight], [ShipName], [ShipCountry]) VALUES (@OrderDate, @Freight, @ShipName, @ShipCountry)"
SelectCommand="SELECT [OrderID], [OrderDate], [Freight], [ShipName], [ShipCountry] FROM [Orders]"
UpdateCommand="UPDATE [Orders] SET [OrderDate] = @OrderDate, [Freight] = @Freight, [ShipName] = @ShipName, [ShipCountry] = @ShipCountry WHERE [OrderID] = @OrderID"
DeleteCommand="DELETE FROM [Orders] WHERE [OrderID] = @OrderID"></asp:SqlDataSource>
function onBatchOpening(sender, args) {
var editedColumn = args.get_columnUniqueName();
if (editedColumn == "ShipName") {
var columnName = "ShipCountry";
var tableView = args.get_tableView();
var row = args.get_row();
//get the index of ShipCountry column and reach the respective cell in the current row
var columnIndex = tableView.getColumnByUniqueName(columnName).get_element().cellIndex;
var shipCountryValue = row.cells[columnIndex].innerText;
//cancel the event if the codition is satisfied
if (shipCountryValue == "Brazil" || shipCountryValue == "France") {
args.set_cancel(true);
}
}
}
This approach is only applicable with EditType is set to 'Cell' and cannot be used when EditType='Row'.
Additionally, you could subscribe to the OnBatchEditCellValueChanging event to access the new value before they are applied, and cancel the action if necessary. The OnBatchEditCellValueChanged event can be used to access the already changed value.
Save changes using external button
Sample description: Two Batch editing RadGrid Controls are placed on the same page. Save the changes to both RadGrids from external RadButton using the SaveTableChanges() method
<div style="float: left; display: inline-block; margin: 10px">
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="600px"
DataSourceID="SqlDataSource1"
AutoGenerateDeleteColumn="true"
AllowAutomaticInserts="true"
AllowAutomaticUpdates="true"
AllowAutomaticDeletes="true">
<ClientSettings ClientEvents-OnBatchEditOpening="onBatchOpening" />
<MasterTableView EditMode="Batch" BatchEditingSettings-EditType="Cell" DataSourceID="SqlDataSource1" AutoGenerateColumns="true" CommandItemDisplay="Top"
DataKeyNames="OrderID">
</MasterTableView>
</telerik:RadGrid>
</div>
<div style="float: left; display: inline-block; margin: 10px">
<telerik:RadGrid ID="RadGrid2" runat="server" AllowPaging="True" Width="600px"
DataSourceID="SqlDataSource2"
AutoGenerateDeleteColumn="true"
AllowAutomaticInserts="true"
AllowAutomaticUpdates="true"
AllowAutomaticDeletes="true">
<ClientSettings ClientEvents-OnBatchEditOpening="onBatchOpening" />
<MasterTableView EditMode="Batch" BatchEditingSettings-EditType="Cell" DataSourceID="SqlDataSource2"
AutoGenerateColumns="true" CommandItemDisplay="Top"
DataKeyNames="EmployeeID">
</MasterTableView>
</telerik:RadGrid>
</div>
<telerik:RadButton ID="RadButton1" runat="server" Text="SaveBothGridChanges" AutoPostBack="false" OnClientClicked="clientClick"></telerik:RadButton>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
InsertCommand="INSERT INTO [Orders] ([OrderDate], [Freight], [ShipName], [ShipCountry]) VALUES (@OrderDate, @Freight, @ShipName, @ShipCountry)"
SelectCommand="SELECT [OrderID], [OrderDate], [Freight], [ShipName], [ShipCountry] FROM [Orders]"
UpdateCommand="UPDATE [Orders] SET [OrderDate] = @OrderDate, [Freight] = @Freight, [ShipName] = @ShipName, [ShipCountry] = @ShipCountry WHERE [OrderID] = @OrderID"
DeleteCommand="DELETE FROM [Orders] WHERE [OrderID] = @OrderID"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
InsertCommand="INSERT INTO [Employees] ([HireDate], [Title], [FirstName], [LastName]) VALUES (@HireDate, @Title, @FirstName, @LastName)"
SelectCommand="SELECT [EmployeeID], [HireDate], [Title], [FirstName], [LastName] FROM [Employees]"
UpdateCommand="UPDATE [Employees] SET [HireDate] = @HireDate, [Title] = @Title, [FirstName] = @FirstName, [LastName] = @LastName WHERE [EmployeeID] = @EmployeeID"
DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = @EmployeeID"></asp:SqlDataSource>
function clientClick(sender, args) {
var grid1 = $find('<%= RadGrid1.ClientID%>');
var grid2 = $find('<%= RadGrid2.ClientID%>');
var masterTableView1 = grid1.get_masterTableView();
var masterTableView2 = grid2.get_masterTableView();
var tables = [];
tables.push(masterTableView1, masterTableView2);
var batchManager = grid2.get_batchEditingManager();
batchManager.saveTableChanges(tables);
}
A common scenario of multiple Batch editing RadGrids that need to be submited at once along with external user input, is described in the How to update batch edit grids from outside button and also save external user input knowledge-base article.