Inline Editing is not working in Kendo MVC

Below is my .cshtml

@using Kendo.Mvc.UI
@model IEnumerable<WebApplication1.Models.DemoViewModel>   

@{
    Layout = null;
    ViewBag.Title = "Home Page";
}

<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.aspnetmvc.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />


<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="PageContentHeading">
                <h3>
                    <span>Select the company to view the document sharing area</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            @(Html.Kendo().Grid<WebApplication1.Models.DemoViewModel>()
                  .Name("SiteDetail")
                  .Columns(columns =>
                  {
                      columns.Bound(p => p.name).Title("Name");
                      columns.Bound(p => p.gender).Title("Gender");
                      columns.Bound(p => p.designation).Title("Designation");
                      columns.Bound(p => p.department).Title("Department");
                      columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250).Title("Action");                      
                  })
                  .ToolBar(toolbar =>
                  {
                      toolbar.Template(@<text>
                <div class="toolbar">
                    <div class="row">
                        <div class="col-md-4" style="float:right;">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
                                <input type="text" class="form-control" id='FieldFilter' placeholder="Search by Company Details">
                            </div>
                        </div>
                    </div>
                </div>
                    </text>);
                  })
                              .Navigatable()
                              .Pageable()
                              .Editable(editable => editable.Mode(GridEditMode.InLine))
                              .Sortable()
                              .Filterable()
                              .Resizable(resize => resize.Columns(true))
                              .Scrollable()
                              .DataSource(dataSource => dataSource // Configure the grid data source
                              .Ajax()
                              .PageSize(10)                             
                              .Read(read => read.Action("EditingInline_Read", "Home"))
                              .Update(update => update.Action("EditingInline_Update", "Home"))
                              .Destroy(destroy=> destroy.Action("EditingInline_Destroy", "Home")
                              .Model(model =>{ model.Id(x => x.id);})                             
                               )
            )
        </div>
    </div>
    </div>

Below is my controller

public ActionResult EditingInline_Read([DataSourceRequest]DataSourceRequest request)
{

    List<TestDemo> _tst = new List<TestDemo>();
    _tst.Add(new TestDemo { name = "ddd", gender = "ffs", designation = "ff", department = "fdf" });
    _tst.Add(new TestDemo { name = "ddd1", gender = "ffs1", designation = "ff1", department = "fdf1" });

    DemoViewModel model = new DemoViewModel();
    model.Testlist = _tst.AsEnumerable().Select(x => x);
    DataSourceResult result = model.Testlist.ToDataSourceResult(request);
    return Json(result, JsonRequestBehavior.AllowGet);
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, DemoViewModel product)
{
    if (product != null && ModelState.IsValid)
    {
        //productService.Update(product);
    }            
    return Json(new[] { product }.ToDataSourceResult(request, ModelState));
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Destroy([DataSourceRequest] DataSourceRequest request, DemoViewModel product)
{
    if (product != null)
    {
        //productService.Destroy(product);
    }

    return Json(new[] { product }.ToDataSourceResult(request, ModelState));
}

EditingInline_Read is being hit by debugger but Update and Destroy are not being hit by debugger. Can someone suggest what is the approach for update and Delete in Kendo grid. I have seen workaround also to remove [AcceptVerbs(HttpVerbs.Post)] but still this does not work for me.

My observations :

EditingInline_Read() -> DataSourceResult result = model.Testlist.ToDataSourceResult(request);

The above code will convert List<TestDemo> as result, not DemoViewModel.Please debug this code and check the result.

In the view you used DemoViewModel: @(Html.Kendo().Grid<WebApplication1.Models.DemoViewModel>()

And still you have the correct column bindings!

columns.Bound(p => p.name).Title("Name"); columns.Bound(p => p.gender).Title("Gender") .....

So I think Name,Gender are also available in DemoViewModel.

GridView shows each object in at list(DataSource) as row.And call Update and destroy methods for the single object only.

Possible Solution :

Change the Binding of GridView to TestDemo.

Change Update and Destroy methods that accepts object of type TestDemo.

I hop this will help you.