Post kendo dataSource (list of objects) to controller

[Jan-Frederik]

I have a kendo grid and in the create action, I want to post back the content of another grid's data source to a razor pages server.

@(Html.Kendo().Grid<EntityModel>()
        .Name("mainGrid")
        .DataSource(ds => ds.Ajax()
            .Read(r => r.Url("/Index?handler=ReadEntity")) 
            .Create(c => c.Url("/Index?handler=CreateEntity").Data("getData"))         
            .Model(m => m.Id(id => id.EntityID))
    )
)

function getData() {
    var otherModels = $("#otherGrid").data("kendoGrid").dataSource.data();
    var temp = $.extend(true, {}, kendo.antiForgeryTokens(), { otherModels: otherModels });
    return temp;
}
The result looks like this
temp
otherModels
0
Name: xyz ...
 
The action:
public JsonResult OnPostCreateEntity(List<OtherViewModel> otherModels, [DataSourceRequest] DataSourceRequest request, EntityViewModel entityModel) //otherModels is empty
This works fine for collections of simple objects like integers, but in this case, an exception is thrown:
"Cannot read property 'field' of undefined"

[Anton Mironov]

Hello Jan-Frederik,

Thank you for the code snippets and details provided.

In order to achieve the desired behavior I prepared the following approach(added is a custom button for the example):

1. Use the "Click" Event of the Kendo UI Button(feel free to use another event as per the needs of your application).
2. In the Event handler, get the dataSource of the Kendo UI Grid.
3. Stringify the dataSource.
4. Build and execute an Ajax request for sending the data to an Action Method in the Controller.
5. Receive the needed data in an Action Method of the Controller.

Here is an example of the implementation:

// The Event handler:

    function onClick() {
        var grid = $("#grid").data("kendoGrid");

		// Get the dataSource of the Grid
        var dataSource = grid.dataSource;

		// Parse the data of the dataSource to JSON format
        var rows = JSON.stringify({ 'rows': dataSource.data().toJSON() });

		// Building and execution the Ajax request
        $.ajax({
            url: "/Grid/GetGridInfo",
            data: rows,
            dataType: "json",
            type: "POST",
            contentType: 'application/json;'
        });
    }

// Action Method in the Controller:

        public void GetGridInfo(List<OrderViewModel> rows)
        {

        }

Attached is a sample project that I prepared for the case. It includes the approach above.

Make the needed tests locally with the attached project and let me know if further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Stoyan]

If someone experiences issues with the serialization of the Payload on the server-side to a List of OrderViewModel instances, try the following approach which sends the Payload as Form Data to the server:

// The Event handler:

    function onClick() {
        var grid = $("#grid").data("kendoGrid");

		// Get the dataSource of the Grid
        var dataSource = grid.dataSource;

		// Parse the data of the dataSource to JSON format
        var rows = { 'rows': dataSource.data().toJSON() };

		// Building and execution the Ajax request
        $.ajax({
            url: "/Grid/GetGridInfo",
            data: rows,
            dataType: "json",
            type: "POST",
            //contentType: 'application/json;'
        });
    }

// Action Method in the Controller:

        public void GetGridInfo([FromForm] List<OrderViewModel> rows)
        {

        }