Editing an MVC 3 Razor Telerik grid using Ajax

Question

I'm trying to do an inline edit with a record in my grid.

Once I click on the Save button, my associated controller starts executing just fine.

However, I don't know how to get the data from the Model (which holds the grid data) into the Controller action. Can someone please help me out?

Here is the code for the View:

@model Telerik.Web.Mvc.GridModel<YeagerTech.YeagerTechWcfService.Customer>
@{
    ViewBag.Title = "Customer Index";
}
<h2>
    Customer Index</h2>
@(  Html.Telerik().Grid<YeagerTech.YeagerTechWcfService.Customer>(Model.Data)
      .Name("Customers")
            .DataKeys(dataKeys => dataKeys.Add(o => o.CustomerID)
                                            .RouteKey("CustomerID"))
                .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text).ImageHtmlAttributes(new { style = "margin-left:0" }))
      .Columns(columns =>
            {
                columns.Bound(o => o.CustomerID).Hidden(true);
                columns.Command(commands =>
                {
                    commands.Edit().ButtonType(GridButtonType.Text);
                }).Width(200).Title("Command");
                columns.Bound(o => o.Email).Width(200);
                columns.Bound(o => o.Company).Width(200);
                columns.Bound(o => o.FirstName).Width(100).Title("FName");
                columns.Bound(o => o.LastName).Width(100).Title("LName");
                columns.Bound(o => o.Address1).Width(200).Title("Addr1");
                columns.Bound(o => o.Address2).Width(100).Title("Addr2");
                columns.Bound(o => o.City).Width(100);
                columns.Bound(o => o.State).Width(40).Title("ST");
                columns.Bound(o => o.Zip).Width(60);
                //columns.Bound(o => o.HomePhone).Width(120);
                //columns.Bound(o => o.CellPhone).Width(120);
                //columns.Bound(o => o.Website).Width(100);
                //columns.Bound(o => o.IMAddress).Width(100);
                //columns.Bound(o => o.CreatedDate).Format("{0:MM/dd/yyyy}").ReadOnly(true).Width(120);
                //columns.Bound(o => o.UpdatedDate).Format("{0:MM/dd/yyyy}").ReadOnly(true).Width(120);
            }).DataBinding(dataBinding =>
                dataBinding.Ajax()
                        .Insert("_InsertAjaxEditing", "Customer")
                        .Update("_SaveAjaxEditing", "Customer"))
    .Editable(editing => editing.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
 )

Here is the code for the Controller:

[HttpPost]
        [GridAction]
        public ActionResult _SaveAjaxEditing()
        {
            YeagerTechWcfService.Customer cust = new YeagerTechWcfService.Customer();

            if (TryUpdateModel(cust))
            {   
                try
                {
                    db.EditCustomer(cust); // This is a WCF method which works fine...
                    TempData["ErrCode"] = "Customer successfully updated.";
                    return RedirectToAction("Index", "Home");
                }
                catch (Exception ex)
                {
                    TempData["ErrCode"] = "CustErr";
                    ViewBag.Error = ex.Message;
                    return View();
                }

            }
            else
                return View();
        }

After logically thinking about it, I simply passed the contents of the Model in as follows... public ActionResult _SaveAjaxEditing(YeagerTechWcfService.Customer cust) — sagesky36
If it worked for you, you can add it as an answer to your own question so it might help others. — Muhammad Adeel Zahid

Sam Sam · Accepted Answer · 2013-04-16T10:56:28

I think the data you get is the model which is binded to the grid, and one entity which you edit is sent back. the controller could be declared as below:

    [GridAction(EnableCustomBinding = true)]
    public ActionResult _SaveAjaxEditing(Customermodel, GridCommand command)

Editing an MVC 3 Razor Telerik grid using Ajax

1 Answers