Unable to set Kendo UI Grid DataSource - ajax

Question

I'm making an addition to a working Kendo UI grid to allow it to update based on an id passed in from a textbox. I'm calling my controller from the ajax, and everything works as expected until I try and create the kendo.data.DataSource() for my grid inside of the ajax success. The result looks as expected but anything I do to assign it to the data source does not seem to work. The data shows nothing and the grid comes up empty.
The model expected by the grid does match the one in my controller. I've looked at other questions and the kendo ui docs but I can't seem to figure out what I'm doing wrong... any help will be appreciated.
Ajax:
$.ajax({
type: "POST",
url: '#Url.Action("Search")',
data: JSON.stringify({ id: id }),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
var grid = $("#Grid").data("kendoGrid");
var data = new kendo.data.DataSource(result);
grid.dataSource.data(data);
grid.refresh();
}
});
Controller:
public ActionResult Search([DataSourceRequest]DataSourceRequest request, string id)
{
IEnumerable<SearchModel> data = GetData(id);
return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

Answer 1

You are using the ToDataSourceResult() extension method on the server so you need to using the Data property of result to assign to the data property of the DataSource object you are creating on the client. Also, you should use the setDataSource method of the grid not grid.dataSource.data(). Lastly, you want to call the read() method of the dataSource grid property, not grid.Refresh().
$.ajax({
type: "POST",
url: '#Url.Action("Search")',
data: JSON.stringify({ id: id }),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
var grid = $("#Grid").data("kendoGrid");
var dataSource = new kendo.data.DataSource({
data: result.Data
});
grid.setDataSource(dataSource);
grid.dataSource.read();
}
});

Answer 2

You are creating the DataSource incorrectly. Assuming the result of your AJAX call returns an array, you must then wrap it in an object with a data property that holds the array of data.
$.ajax({
// ...
success: function (result) {
var grid = $("#Grid").getKendoGrid();
var data = new kendo.data.DataSource({ data: result });
grid.dataSource.data(data);
grid.refresh();
}
});
The following is an alternative way to create a DataSource and allows passing in an array (unwrapped), a DataSource configuration object, or even a preexisting DataSource object.
var data = kendo.data.DataSource.create(obj);
This approach is preferable b/c it is more flexible.
I hope that helps!