How to send object to controller from Kendo Grid dataSource?

Question

I have a kendo grid and its using a kendo dataSource, I am not used to using the kendo dataSource, to do inline editing, typically I would never do inline editing but I was requested to do so.

My dataSource is as follows

function PriceLookupGridDataSource() {
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "../KendoGridTesting/GetThePriceLookupGrid",
                dataType: "json"
            },
            update: {
                url: function(item) {
                    console.log(item);
                    return "../KendoGridTesting/PassAnObject?myObj=" + item; 
                }
            }
        },
        schema: {
            model: {
                id: "MaterialTypeID",
                fields: {
                    VendorID: { type: "number" },
                    VendorName: { type: "string" },
                    Description: { type: "string" },
                    MaterialTypeID: { type: "number" },
                    MaterialType: { type: "string" },
                    ServicePrice: { type: "string" },
                    SellUOM: { type: "string" },
                    Cost: { type: "string" },
                    PurchaseUOM: { type: "string" }
                }
            }
        },
        batch: false,
        pageSize: 20
    });

    return dataSource;
}

The controller method that is used for the transport update is

[HttpPost]
public void PassAnObject(PriceLookupGrid myObj)
{
    ...
}

The object is

Object {VendorID: 26, VendorName: "ACME STONE MASONRY", Description: "Special Stone Quote", MaterialTypeID: 35, MaterialType: "Cladding"…}

and the PriceLookupGrid data class is

public class PriceLookupGrid
    {
        public int VendorID { get; set; }
        public string VendorName { get; set; }
        public string Description { get; set; }
        public int MaterialTypeID { get; set; }
        public string MaterialType { get; set; }
        public string NewPrice { get; set; }
        public string RemodelPrice { get; set; }
        public string ServicePrice { get; set; }
        public string SellUOM { get; set; }
        public string Cost { get; set; }
        public string PurchaseUOM { get; set; }
    }

When I try to pass this over to my controller I get an error

GET http://localhost:51193/KendoGridTesting/PassAnObject?id=[object%20Object]&V….0000&ServicePrice=0.0000++++&SellUOM=Each&Cost=0.0000&PurchaseUOM=EachBBB 404 (Not Found)

Its passing the "item" over as seperate parameters and I don't want that happening.

Any idea's?

Answer 1

Your Action is decorated with [HttpPost], as it should be, but your error message indicates that you're doing a GET. You need Kendo to POST the data, instead:

update: {
    url: "../KendoGridTesting/PassAnObject",
    type: "post" 
}

Answer 2

That is because item is an object, as you can see in your console. You can't just concat it in an url string. You to parse it. It haves an property called models with all changed(or dirty) rows of your grid which would be sent to the server.

In order to make ASP.Net MVC to bind your data into your Model, you have to send the date like:

../KendoGridTesting/PassAnObject?VendorID=1&VendorName=...

A simple way to "parse" your data into an url is this:

var model = {VendorID: 26, VendorName: "ACME STONE MASONRY", Description: "Special Stone Quote", MaterialTypeID: 35, MaterialType: "Cladding"};

function modelToUrlParams(model) {
  var params = [];
  
  Object.keys(model).forEach(key => params.push(key + "=" + model[key]));
  
  return encodeURI("?" + params.join("&"));
};

var myUrl = "../KendoGridTesting/PassAnObject" + modelToUrlParams(model);

console.log("Final Url", myUrl);