Telerik Extensions for ASP.NET MVC

Version Q2 2012, released 06/07/2012

Batch Editing

About this example ASPXRazor

This example shows the cell editting mode combined with batch updates. To enter edit mode just click a cell.

To enable cell editing with batch updatesyou need to do the following:

  1. Set the edit mode to GridEditMode.InCell: 
    <%= Html.Telerik().Grid<EditableProduct>()
        .Name("Grid")
        .Editable(editing => editing.Mode(GridEditMode.InCell))
%>
  2. Add "Insert" and "Submit changes" commands to the grid toolbar: 
    <%= Html.Telerik().Grid<EditableProduct>()
        .Name("Grid")
        .ToolBar(commands => {
            commands.Insert();
            commands.SubmitChanges();
        })
        
        .Editable(editing => editing.Mode(GridEditMode.InCell))
%>
  3. Specify an action method which will handle the batch update request (batch updates are NOT supported in server binding mode): 
    <%= Html.Telerik().Grid<EditableProduct>()
        .Name("Grid")
        .DataKeys(keys => 
        {
            keys.Add(p => p.ProductID);
        })
        .ToolBar(commands => {
            commands.Insert();
            commands.SubmitChanges();
        })
        .DataBinding(dataBinding =>
            dataBinding.Ajax()
                .Select("_SelectBatchEditing", "Grid")
                .Update("_SaveBatchEditing", "Grid")
        )
        .Editable(editing => editing.Mode(GridEditMode.InCell))
%>
  4. Implement the batch update in the specified controller method: 
    public ActionResult _SaveBatchEditing([Bind(Prefix = "inserted")]IEnumerable<EditableProduct> insertedProducts,
            [Bind(Prefix = "updated")]IEnumerable<EditableProduct> updatedProducts, 
            [Bind(Prefix = "deleted")]IEnumerable<EditableProduct> deletedProducts)
{
    if (insertedProducts != null)
    {
        foreach (var product in insertedProducts)
        {
            // perform insert
        }
    }

    if (updatedProducts != null)
    {
        foreach (var product in updatedProducts)
        {
            //perform update
        }
    }

    if (deletedProducts != null)
    {
        foreach (var product in deletedProducts)
        {
            //perform update
        }
    }
    
    return View(new GridModel(SessionProductRepository.All()));
}

Interested in HTML5 and mobile-powered ASP.NET MVC apps?

Experience the next generation UI and framework for ASP.NET MVC development by downloading trial evaluation copy of Kendo UI Complete for ASP.NET MVC. Jumpstart your development with the available learning resources.

The differences between Telerik MVC Extensions and Kendo UI Complete for ASP.NET MVC, and their licensing models are explained here and here.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Other Demos: