Kendo grid posting the data back to controller as null

Question

When I try to post the entire kendo grid back , I am not receiving the object in the controller, it is coming as null. I have added a custom button on the tool bar and when I click on it , it should do a post back. The fiddler request shows the data being posted back but I am not able to receive it in controller?

This is captured from fiddler, the HTTP POST request

POST http://localhost:59457/api/data/SaveBill HTTP/1.1 Host: localhost:59457 Connection: keep-alive Content-Length: 24 Accept: application/json, text/plain, / Origin: http://localhost:59457 User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36 Content-Type: application/json;charset=UTF-8 Referer: http://localhost:59457/ Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.8

[{"Id":1,"Name":"John"}]

Code on my controller

  public IHttpActionResult SaveBillingGroupMap([FromBody]test models)
        {
            var x = HttpContext.Current.Request.InputStream;
            //var employees = this.DeserializeObject<IEnumerable<test>>("models");
            throw new NotImplementedException();
        }

  public class test
        {
            public int Id { get; set; }

            public string Name { get; set; }
}

Code on JS (angular)

     $scope.mockdata = new kendo.data.ObservableArray([{
            "Id": 1,
                "Name": "John"
                }, {
                "Id": 2,
                "Name": "Joe"
                }, {
                "Id": 3,
                "Name": "Jack"
                }]);

                    $scope.sportsGrid = new kendo.data.DataSource({
                    // data: $scope.mockdata,
                    transport: {
                        read: function (e) {
                            e.success($scope.mockdata);
                },
                    update: function (e) {
                                console.log("Update", e);
                                },
                                        destroy: function(e) {
                                console.log("Destroy", e);
                        },
                                    create: function(e) {
                        console.log("Create", e);
                    },
                                    parameterMap: function (options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {
                                        models: kendo.stringify(options.models)
                        };
                        }
                        }
                        },
                            batch: false,
                                            pageSize: 5,
                            change: function (e) {
                        console.log("change: " +e.action);
                        if (e.action === "remove") {
                                                    this.sync();
                                        }
                            // do something with e
                        },
                                schema: {
                                            model: {
                                    id: "Id",
                                    fields: {
                                    Id: {
                                        type: "number"
                                        },
                                        Name: {
                                        type: "string"
                                        }

                                    }
                                    }
                                        }
                                    });



   $scope.options = {
                sortable: true,
                    pageable: true,
                editable: true,
                toolbar: ["create", "cancel", {
                    text: "Custom"
            }],
                columns: [{
                field: "Id",
                    title: "ID"
        }, {
            field: "Name",
            title: "Name"
        }, {
                    command: ["destroy"],
                        title: " ",
                            width: "150px"
                        }],
                    edit: function(e) {
            if (e.model.Name == "Joe") {
                this.closeCell();
                }

        }

                };
    $("#sportsSetupGrid").on("click", ".k-grid-Custom", function (e) {
        var models = JSON.stringify($("#sportsSetupGrid").data().kendoGrid._data);


        $http({
        method: 'POST',
        url: 'api/data/SaveBill',
        data: models,
        contentType: "application/json",
            dataType:"JSON"

    });
            e.preventDefault()
            });

this is on html

     <div kendo-grid k-options="options" k-data-source="sportsGrid" id="sportsSetupGrid" ></div>

Amal Dev Amal Dev · Accepted Answer · 2016-08-17T06:39:42

You are calling the action method SaveBill in the javascript and your action method name in the controller is SaveBillingGroupMap. Correct this and it will the method in the controller

Kendo grid posting the data back to controller as null

1 Answers