Skip to content

Commit d5cf33f

Browse files
github-actions[bot]KB Bot
github-actions[bot]
and
KB Bot
authored
Added new kb article grid-instant-cell-update-batch-edit (#612)
Co-authored-by: KB Bot <[email protected]>
1 parent 6b08cb3 commit d5cf33f

File tree

1 file changed

+202
-0
lines changed

1 file changed

+202
-0
lines changed

‎knowledge-base/grid-instant-cell-update-batch-edit.md

+202
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
title: Implementing Instant Cell Update in RadGrid Batch Edit Mode
3+
description: This article demonstrates how to configure Telerik's RadGrid for ASP.NET AJAX to update cells immediately upon losing focus without requiring a manual save action.
4+
type: how-to
5+
page_title: How to Enable Instant Cell Updates in RadGrid with Batch Editing
6+
slug: grid-instant-cell-update-batch-edit
7+
tags: radgrid, asp.net ajax, batch edit, cell update, onbatcheditcellvaluechanged, client-side api
8+
res_type: kb
9+
ticketid: 1668183
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>RadGrid for ASP.NET AJAX</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>All</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
When working with the [RadGrid](https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/overview) component in batch edit mode, there's a requirement to update data immediately after a cell loses focus without the need for pressing a "save" button. This behavior closely resembles how changes are handled in spreadsheet software, providing a more seamless experience for users who wish to edit grid data.
30+
31+
This KB article also answers the following questions:
32+
33+
- How can I update a cell in RadGrid without clicking save?
34+
- Is it possible to auto-save changes in RadGrid batch edit mode on cell blur?
35+
- How to use the OnBatchEditCellValueChanged event to save changes immediately in RadGrid?
36+
37+
## Solution
38+
39+
To achieve immediate cell updates in the RadGrid's batch edit mode upon losing focus, utilize the `OnBatchEditCellValueChanged` client-side event in conjunction with the Batch Editing Client-side API. This setup allows for automatic saving of changes without additional user interaction.
40+
41+
Define the RadGrid with Batch Editing enabled and specify the `OnBatchEditCellValueChanged` event:
42+
43+
````ASP.NET
44+
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource" OnBatchEditCommand="RadGrid1_BatchEditCommand">
45+
<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID" CommandItemDisplay="Top" EditMode="Batch">
46+
<BatchEditingSettings HighlightDeletedRows="true" EditType="Cell" />
47+
<Columns>
48+
<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
49+
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
50+
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
51+
</telerik:GridBoundColumn>
52+
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
53+
FilterControlAltText="Filter Freight column" HeaderText="Freight"
54+
SortExpression="Freight" UniqueName="Freight">
55+
</telerik:GridNumericColumn>
56+
<telerik:GridBoundColumn DataField="ShipName"
57+
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
58+
SortExpression="ShipName" UniqueName="ShipName">
59+
</telerik:GridBoundColumn>
60+
<telerik:GridBoundColumn DataField="ShipCountry"
61+
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
62+
SortExpression="ShipCountry" UniqueName="ShipCountry">
63+
</telerik:GridBoundColumn>
64+
</Columns>
65+
</MasterTableView>
66+
<ClientSettings>
67+
<ClientEvents OnBatchEditCellValueChanged="onBatchEditCellValueChanged" />
68+
</ClientSettings>
69+
</telerik:RadGrid>
70+
````
71+
72+
Implement the `onBatchEditCellValueChanged` JavaScript function to save changes immediately:
73+
74+
````JavaScript
75+
function onBatchEditCellValueChanged(sender, args) {
76+
let batchEditingManager = sender.get_batchEditingManager();
77+
batchEditingManager.saveAllChanges();
78+
}
79+
````
80+
81+
Implement server-side logic for handling data operations such as insert, update, and delete within the `RadGrid1_BatchEditCommand` event handler.
82+
83+
````C#
84+
#region Datasource stored in Session
85+
public DataTable SessionDataSource
86+
{
87+
get
88+
{
89+
string sessionKey = "SessionDataSource";
90+
91+
DataTable dt = Session[sessionKey] as DataTable;
92+
93+
if (dt == null || !IsPostBack)
94+
{
95+
dt = new DataTable();
96+
97+
dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
98+
dt.Columns.Add(new DataColumn("Freight", typeof(decimal)));
99+
dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
100+
dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));
101+
102+
dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };
103+
104+
for (int i = 0; i < 20; i++)
105+
{
106+
int index = i + 1;
107+
108+
DataRow row = dt.NewRow();
109+
110+
row["OrderID"] = index;
111+
row["Freight"] = index * 0.1 + index * 0.01;
112+
row["ShipName"] = "Name " + index;
113+
row["ShipCountry"] = "Country " + index;
114+
115+
dt.Rows.Add(row);
116+
}
117+
118+
Session[sessionKey] = dt;
119+
}
120+
return dt;
121+
}
122+
}
123+
#endregion
124+
125+
#region Data-binding
126+
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
127+
{
128+
(sender as RadGrid).DataSource = SessionDataSource;
129+
}
130+
#endregion
131+
132+
#region Insert/Update/Delete operations
133+
134+
protected void RadGrid1_BatchEditCommand(object sender, GridBatchEditingEventArgs e)
135+
{
136+
foreach (GridBatchEditingCommand command in e.Commands)
137+
{
138+
Hashtable oldValues = command.OldValues;
139+
Hashtable newValues = command.NewValues;
140+
141+
if (command.Type == GridBatchEditingCommandType.Insert)
142+
{
143+
newValues["OrderID"] = CreateNewOrderId();
144+
145+
DataRow rowToCreate = SessionDataSource.NewRow();
146+
147+
foreach (string key in newValues.Keys)
148+
{
149+
rowToCreate[key] = newValues[key];
150+
}
151+
152+
SessionDataSource.Rows.Add(rowToCreate);
153+
}
154+
else if (command.Type == GridBatchEditingCommandType.Update)
155+
{
156+
DataRow rowToUpdate = GetRowById((int)newValues["OrderID"]);
157+
158+
foreach (string key in newValues.Keys)
159+
{
160+
rowToUpdate[key] = newValues[key];
161+
}
162+
}
163+
else if (command.Type == GridBatchEditingCommandType.Delete)
164+
{
165+
DataRow rowToDelete = GetRowById((int)newValues["OrderID"]);
166+
167+
if (rowToDelete != null)
168+
{
169+
SessionDataSource.Rows.Remove(rowToDelete);
170+
}
171+
}
172+
}
173+
}
174+
#endregion
175+
176+
#region Helper Methods
177+
private int CreateNewOrderId()
178+
{
179+
int orderId = 1;
180+
181+
if (SessionDataSource.Rows.Count > 0)
182+
{
183+
orderId = (int)SessionDataSource.Select("OrderID = MAX(OrderID)").FirstOrDefault()["OrderID"] + 1;
184+
}
185+
186+
return orderId;
187+
}
188+
189+
private DataRow GetRowById(int orderId)
190+
{
191+
return SessionDataSource.Select(string.Format("OrderID='{0}'", orderId)).FirstOrDefault();
192+
}
193+
#endregion
194+
````
195+
196+
By following these steps, the RadGrid component will update and save cell changes immediately when the user navigates away from the editing cell, enhancing the data entry process by eliminating the need to manually trigger a save operation.
197+
198+
## See Also
199+
200+
- [RadGrid Batch Editing Overview](https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/overview)
201+
- [RadGrid Batch Editing Client-side API](https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/client-side-api)
202+
- [RadGrid Client-side Programming Overview](https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/overview)

0 commit comments

Comments
 (0)