Telerik blogs

New Batch Editing Functionality Brings the User Experience of Telerik’s Grid for ASP.NET AJAX Closer to Excel

by Antonio Stoilkov
May 31, 2013 Release 0 Comments


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.

What is batch editing?

Batch editing is a new type of inline editing which brings the editing experience of RadGrid closer to this of Excel. Upon a click/double-click (whatever the developer specifies), the user will be able to open the cell for editing and edit as many cells as they like. By hitting the Save button just once, all their changes will be preserved.

Getting started

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.

Using templates

We have done our best to make everything automatic without the need for additional JavaScript code. If GridTemplateColumn is created and the EditItemTemplate is specified and one edit control is placed in the template, the grid will automatically find the control and get/set values from\to it. In rare cases when there are multiple edit controls in the template and control over them is required, the RadGrid exposes four client-side events for manual control over the editors.

Using manual CRUD operations

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.

How to integrate batch editing and data visualization

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.

RadGrid Batch Editing and Chart integration
The implementation is straightforward and easy to implement. The RadGrid and RadHtmlChart are bound with the same data source and the batch editing functionality is turned on. The main client-side code involved is in updating the chart by detecting changes in the numeric text box as shown below.  In the KeyDown event the numeric value is taken and provided to the updateChart function which loops through the chart data source and sets the ProductPrice value. Additionally, for better look and feel when selecting a row the associated chart item will pop out. You could take a look at the main JavaScript functions below and if you are interested in the whole implementation you could download the source code from here.

function OnKeyDown(numericElement, e)
{
    var dataItem = $find($telerik.$(numericElement).closest("tr")[0].id);
    var id = parseInt(dataItem.getDataKeyValue("Id"));
    setTimeout(function ()
    {
        var productPrice = $find(numericElement.id).get_textBoxValue();
        updateChart(id, productPrice);
    });
}
 
function RowSelected(sender, args)
{
    var dataItem = args.get_gridDataItem();
    var id = parseInt(dataItem.getDataKeyValue("Id"));
    updateChart(id);
}
 
function updateChart(id, productPrice)
{
    productPrice = parseInt(productPrice);
    var htmlChart = $find("<%= RadHtmlChart1.ClientID %>");
    var dataSource = $telerik.$.parseJSON(htmlChart.get_dataSourceJSON());
    for (var i = 0; i < dataSource.length; i++)
    {
        dataSource[i].IsExploded = false;
        if (dataSource[i].Id === id)
        {
            dataSource[i].IsExploded = true;
            if (productPrice && productPrice !== 0)
            {
                dataSource[i].ProductPrice = productPrice;
                break;
            }
        }
    }
    htmlChart.set_dataSource(dataSource);
    htmlChart.set_transitions(false);
    htmlChart.repaint();
}

 

How do you like it?

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. 

ASP.NET, Chart, Excel, Grid, Web Forms
About the Author

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.

Related Posts

Web React

Getting Started with the KendoReact PivotGrid

Comments

Comments are disabled in preview mode.