Post kendo dataSource (list of objects) to controller

1 Answer 411 Views
Grid
Jan-Frederik
Top achievements
Rank 1
Iron
Jan-Frederik asked on 05 Jul 2021, 02:05 PM | edited on 05 Jul 2021, 02:47 PM

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"

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 08 Jul 2021, 12:43 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Jan-Frederik
Top achievements
Rank 1
Iron
Answers by
Anton Mironov
Telerik team
Share this question
or