Change Grids Datasource to display JSON from Controller ActionResult

[Philipp]

Hi,

I'm having some trouble to change my Kendo Grid´s DataSource to display some
JSON data retrieved by my controller. My controller function looks like:

public ActionResult GetNewData([DataSourceRequest] DataSourceRequest request)
{
    List<MyModel> myList = GetDataFromSomewhere();
    return Json(myList, "text/html", Encoding.UTF8, JsonRequestBehavior.AllowGet);
    //return Json(myList.ToDataSourceResult(request), "text/html",
                              //Encoding.UTF8,  JsonRequestBehavior.AllowGet);
}

Also tried with return type of [string, JsonResult].
My Grid´s Definition was done using HTMLHelper and looks like:

@(Html.Kendo().Grid<MyModel>()
    .Columns(c => c.Bound(m => m.Description).Title("Description"))
    .DataSource(ds => ds
    .Ajax().ServerOperation(false)
.Model(m => m.Id(s => s.Description)))
.Name("MyGrid")
.Selectable()
.Sortable())

Maybe I'm still thinking the wrong way, but my final goal would be to have two
Grids on-screen.

The Change-Event of the first Grid would trigger some JS-Function including the
Ajax-Block below to re-read  some dependent data into the second grid.

$.ajax({
    contentType: "json",
    url: '@Url.Action("GetNewData", "Home")',
    method: 'GET',
    success: function (d) {
         var g = $("#MyGrid").data("kendoGrid");
        //var data = [{"Description":"Desc1"},
       //                      {"Description":"Desc2"},
       //                      {"Description":"Desc3"},
       //                      {"Description":"Desc4"}];

       g.dataSource = new kendo.data.DataSource({ data: d });
       g.dataSource.read();
       g.refresh();
       alert("Data:" + d); // Displays excactly the same string as stored in ´data´
       }
});

The Json-Data-Array displayed in the last alert looks fine (exactly the same string as stored in ´data´):

[{"Description":"Desc1"},
 {"Description":"Desc2"},
 {"Description":"Desc3"},
 {"Description":"Desc4"}];

When I then launch it for 

g.dataSource = new kendo.data.DataSource({ data: d });

the Grid keeps empty but doing it with my local data array of ´data´ it represents the data:

g.dataSource = new kendo.data.DataSource({ data: data });

I'm still struggeling to find a working combination of providing parameters for the DataSource. Any help would be highly appreciated.

Many thanks in advance.



 

[Vladimir Iliev]

Hi Philipp,

 
I would suggest to use the Read action of the Grid for reading data from the server. Also you can set the AutoBind option to false in order to disable the initial load of data. Then you can call the Grid dataSource read method to bind the grid. Please check the example below:

Grid definition:

@(Html.Kendo().Grid<MyModel>()
    .Columns(c => c.Bound(m => m.Description).Title("Description"))
    .DataSource(ds => ds
        .Ajax()
        .ServerOperation(false)
        .Model(m => m.Id(s => s.Description))
        //define the Read action
        .Read("GetNewData", "Home")
    )
.Name("MyGrid")
.Selectable()
//set the AutoBind option to false
.AutoBind(false)
.Sortable())

JavaScript to to read the data from the server:

var grid = $("#MyGrid").data("kendoGrid");
grid.dataSource.read();

For more information about how to configure the Grid for Ajax binding you can check this article.

Kind Regards,
Vladimir Iliev
the Telerik team

[Philipp]

Hi Vladimir,

that was excatly what I was looking for.
It works like a dream :-)

Many thanks and kind regards
Philipp