Telerik Extensions for ASP.NET MVC

This help topic discusses the cell editing mode of Telerik Grid for ASP.NET MVC.

This topic contains the following sections.

Introduction

Cell editing mode introduced with the Q1 2011 release of Telerik Extensions for ASP.NET MVC. It allows the user to edit data in a way similar to popular spreadsheet programs - double clicking a cell puts it in edit mode. Clicking outside the cell accepts the new value. All modified grid records are updated (saved, inserted or deleted) in a single batch (request to the server) when the "Save changes" button is clicked.

Cell Mode

Configuration

To enable cell editing mode you need to perform the following steps:
  1. Set the edit mode to GridEditMode.InCell:
    CopySetting the EditMode to InCell
    <%= Html.Telerik().Grid<Customer>()
            .Name("Grid")
            .DataKeys(keys => keys.Add(c => c.CustomerID))
            .Editable(editing => editing.Mode(GridEditMode.InCell))
    %>
  2. Add "Insert" and "Submit changes" commands to the grid toolbar:
    CopyAdding a Submit changes command
    <%= Html.Telerik().Grid<Customer>()
            .Name("Grid")
            .DataKeys(keys => keys.Add(c => c.CustomerID))
            .Editable(editing => editing.Mode(GridEditMode.InCell))
            .ToolBar(commands => 
            {
                commands.Insert();
                commands.SubmitChanges();
            })
    %>
  3. Specify an action method which will handle the batch update request:
    CopySpecifying Update action method
    <%= Html.Telerik().Grid<Customer>()
            .Name("Grid")
            .DataKeys(keys => keys.Add(c => c.CustomerID))
            .Editable(editing => editing.Mode(GridEditMode.InCell))
            .ToolBar(commands => 
            {
                commands.Insert();
                commands.SubmitChanges();
            })
            .DataBinding(dataBinding =>
                dataBinding.Ajax()
                    .Select("Select", "Home")
                    .Update("Update", "Home")
            )        
    %>
    Important
    Cell edit mode is supported only in Ajax binding scenarios. The grid will throw an exception if invalid combination of settings is specified.
  4. Implement the batch update in the specified controller method:
    CopyImplementing batch update in the action method
    [GridAction]
    public ActionResult Update(IEnumerable<Customer> inserted, IEnumerable<Customer> updated, IEnumerable<Customer> deleted)
    {
        if (inserted != null)
        {
            foreach (var customer in inserted)
            {
                // Insert the customer
            }
        }
    
        if (updated != null)
        {
            foreach (var customer in updated)
            {
                // Update the customer
            }
        }
    
        if (deleted != null)
        {
            foreach (var customer in deleted)
            {
                // Delete the customer
            }
        }
    
        IEnumerable<Customer> customers; 
        // Get the current list of customers and return it back to the grid
    
        return View(new GridModel(customers));
    }
    Note
    By default the grid expects the parameters of the action method to be named "inserted", "updated" and "deleted". If you want to change those names you can use the Bind attribute:
    CopyUsing different action method parameter names
    [GridAction]
    public ActionResult Update([Bind(Prefix = "inserted")]IEnumerable<Customer> insertedCustomers, 
        [Bind(Prefix = "updated")]IEnumerable<Customer> updatedCustomers, 
        [Bind(Prefix = "deleted")]IEnumerable<Customer> deletedCustomers)
    {
        // Implementation
    }