Following the tendencies for improved web experience we at Telerik are pushing more and more operations to be performed on the client. Now with the Q2 2013 Beta release we have turned our Grid for ASP.NET AJAX into client-side editing machine bringing improved performance and better user experience with the new Batch Editing feature. The fun comes when you see the functionality in action and try to customize by integrating grid editing and data visualization but before that let’s go through the main use cases.
I should admit – the best part is turning the feature on. The only thing you need to do is set the GridTableView.EditMode to Batch. It supports automatic operations so you could easily switch it with your current editing mode. If you need more customization over the behavior you could always use the GridTableView.BatchEditingSettings.
Performing manual operations using batch editing is similar to the current code that you would use. Subscribe to RadGrid UpdateComamnd, DeleteCommand, InsertCommand commands or use the new GridBatchEditingCommand where you could get all commands at once that have been performed on the client. If you choose to not use the new event you will need to cast the CommandArgument property to GridBatchEditingEventArgument and use the NewValues, OldValues hash tables properties to perform CRUD operations.
Batch editing enables advanced editing functionalities to be developed purely on the client without performing a postback. The implementation that we will go through shows how real time data visualization using Telerik’s ASP.NET Chart based on HTML5 integrates with RadGrid’s editing capabilities. The idea is to dynamically refresh the chart during changes in the product price.
dataItem = $find($telerik.$(numericElement).closest(
id = parseInt(dataItem.getDataKeyValue(
productPrice = $find(numericElement.id).get_textBoxValue();
dataItem = args.get_gridDataItem();
productPrice = parseInt(productPrice);
htmlChart = $find(
"<%= RadHtmlChart1.ClientID %>"
dataSource = $telerik.$.parseJSON(htmlChart.get_dataSourceJSON());
i = 0; i < dataSource.length; i++)
(dataSource[i].Id === id)
(productPrice && productPrice !== 0)
dataSource[i].ProductPrice = productPrice;
This feature is still in Beta and we are open to your feedback to make the feature better for our official release in mid-June. Comment below or share your insights in the Beta forums. You can download the Beta to play with the new feature or check it out on the Beta demos.
Antonio Stoilkov is passionate about sports and loves to learn new things regardless if it is about the next quantum computer advancement or a new keyboard shortcut.
Subscribe to be the first to get our expert-written articles and tutorials for developers!