Recently added data is not showing after saving

[Kumar Bharat]

Hi,

My search page showing list of employee in a grid and I want inline operation of grid.

My issue is :

Recently added data is not showing after "Save Changes" button clicked (It shows a copy of 1st record).
but  new data is appears after refresh button is clicked.

"Save change"  action is adding data perfectly.

Screenshot is attached 

Please see my code

cshtml
--------------------
@model TelerikMvc5App.ViewModel.EmployeeViewModel

@(Html.Kendo().Grid<TelerikMvc5App.ViewModel.EmployeeViewModel>()
    .Name("gridEmployee")
    .Columns(columns =>
    {
        columns.Bound(p => p.EmployeeId);
        columns.Bound(p => p.EmployeeName).Width(140);
        columns.Command(command => command.Destroy()).Width(110);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
    .Navigatable()
    .Filterable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(p => p.EmployeeId))
            .Create("CreateEmp", "Employee", new { Area = "Employee" })
            .Read("SearchEmp", "Employee", new { Area = "Employee" })
            .Update("SaveEmp", "Employee", new { Area = "Employee" })
            .Destroy("DeleteEmp", "Employee", new { Area = "Employee" })
    )
)

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>


Controller
---------------------------------

 public static List<EmployeeViewModel> empList = new List<EmployeeViewModel>();


private List<EmployeeViewModel> GetAllEmployees()
        {           
            empList.Add(new EmployeeViewModel() { EmployeeId = 1, EmployeeName = "Kumar" });
            empList.Add(new EmployeeViewModel() { EmployeeId = 2, EmployeeName = "Jaysankar" });
            empList.Add(new EmployeeViewModel() { EmployeeId = 3, EmployeeName = "Sathish" });
            empList.Add(new EmployeeViewModel() { EmployeeId = 4, EmployeeName = "Koushik" });
            empList.Add(new EmployeeViewModel() { EmployeeId = 5, EmployeeName = "Ramesh" });            
            return empList;
        }

public ActionResult Search()
        {
            if (empList.Count == 0)
            {
                GetAllEmployees();
            }
            return View();
        }

 public ActionResult SearchEmp([DataSourceRequest]DataSourceRequest request)
        {
            return Json(empList.ToDataSourceResult(request));
        }

 [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult CreateEmp([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<EmployeeViewModel> emps)
        {
            foreach (EmployeeViewModel emp in emps)
            {               
                empList.Add(emp);
            }
        return Json(empList.ToDataSourceResult(request));
        }

 [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult SaveEmp([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<EmployeeViewModel> emps)
        {  
                foreach EmployeeViewModel emp in emps)
                {
                    // some code
                }            }
            return Json(empList.ToDataSourceResult(request));
        }

 [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult DeleteEmp([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<EmployeeViewModel> emps)
        {
            if (emps.Any())
            {
                foreach (EmployeeViewModel emp in emps)
                {
                    var item = empList.First(x => x.EmployeeId == emp.EmployeeId);
                    empList.Remove(item);
                }
            }            
            return Json(empList.ToDataSourceResult(request));
        }

--------------------------------------------------


Thanks
Kumar

[Alexander Popov]

Hello Kumar,

This behavior could be observed in case the Model's ID (in this case EmployeeId) is populated during the item creation. Basically, the Grid's DataSource checks whether the ID is different from the default value (zero, unless specified otherwise) and if it is - it treats the item as new and sends it to the Create method, otherwise it sends it to the Update method. Usually the IDs are assigned on the server side, so I would recommend setting the EmployeeId column as not editable. Passing the ModelState to the ToDataSourceResult is also recommended, for example: 

return Json(empList.ToDataSourceResult(request, ModelState));

Regards,
Alexander Popov
Telerik