[Solved] Angular Kendo grid inline Edit

[Anita]

Hi,

I have an MVC project with Angular at the front end, and I am trying to edit a raw inline. Please can you advice me what I am doing wrong here?

Here is the code.

Index. cshtml

<div ng-controller="EmpCtrl">
    <div kendo-grid k-data-source="emps"
         k-selectable="'row'"
         k-filterable="true"
         k-sortable="true"
         k-editable="'inline'"
         k-pageable='{ "pageSize": 5, "refresh": true, "pageSizes": true }'
         k-columns='[
    { "field": "FirstName", "title": "First Name"},
    { "field": "LastName", "title": "Last Name"},
    { "field": "Country", "title": "Country"},
  { "field": "City", "title": "City"},
    { "field": "Title", "title": "Title" },
  { command: ["edit","destroy"], title: " ", width: "200px" }
  ]'>
    </div>
</div>

App.js
var app = angular.module("KendoDemo", ["kendo.directives"]);
app.controller("EmpCtrl", ['$scope',  function ($scope) {
   
    $scope.emps = new kendo.data.DataSource({
        transport: {
            read: {
                url: "Home/GetEmployees",
                dataType: "json"
            },
            update: {
                url: "Home/EditEmployee",
                dataType: "json"
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) };
                }
            }
        }, pageSize: 5,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: false },
                    FirstName: { validation: { required: true } },
                    LastName: { validation: { required: true } },
                    Country: { validation: { required: true } },
                    City: { validation: { required: true } },
                    Title: { validation: { required: true } }
                }
            }
        }
       
    });
}]);

Home Controller

public ActionResult GetEmployees()
      {
          var emp = _db.People.ToList();
          return Json(emp, JsonRequestBehavior.AllowGet);
      }

[HttpPost]
        public ActionResult EditEmployee(Person emp)
        {
            var p = _db.People.FirstOrDefault(d => d.Id == emp.Id);
            p.FirstName = emp.FirstName;
            p.LastName = emp.LastName;
            p.Title = emp.Title;
            p.City = emp.City;
            p.Country = emp.Country;
            _db.SaveChanges();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }


Many thanks,
Anita


  

[Anita]

The grid populates the data. But the edit functionality doesn't work. 

Thanks,

[Anita]

The parameter in EditEmployee function is null. I have tried using the models from 'parameterMap' and that doesn't work either.

Can anyone help please??



 public ActionResult EditEmployee(string models)
        {
            Person emp = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<Person>(models);
            var p = _db.People.FirstOrDefault(d => d.Id == emp.Id);
            p.FirstName = emp.FirstName;
            p.LastName = emp.LastName;
            p.Title = emp.Title;
            p.City = emp.City;
            p.Country = emp.Country;
            _db.SaveChanges();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }

[Boyan Dimitrov]

Hello,

Please try to stringify the entire object that is returned by the parameterMap function as shown in this article. 

Regards,
Boyan Dimitrov
Telerik