Grid Not populating in kendoGrid - asp.net-mvc

Question

I am using MVC 4 and kendo UI for grid population. But the grid is not populating correctly.
this is my View :
<script type="text/javascript">
$.ajax({
url: '#Url.Action("Employee_Read", "UserSummary")',
type: 'GET',
dataType: "json",
Async: true,
success: function (data, textStatus, xhr) {
var dataloc = data;
var element = $("#grid4").kendoGrid({
dataSource: {
data: dataloc,
schema: {
model: {
fields: {
userDetailsId: { type: "number", editable: false },
name: { type: "string", editable: false },
roleId: { type: "string", editable: false },
emailId: { type: "string", editable: false }
}
}
}
}
});
}
});
</script>
Conroller ;
[HttpGet]
public ActionResult Employee_Read([DataSourceRequest]DataSourceRequest request)
{
using (var emp = new MockProjectAkarshEntities1())
{
IQueryable<tbl_UserDetails> userDetails = emp.tbl_UserDetails;
DataSourceResult result = userDetails.ToDataSourceResult(request);
return Json(result,JsonRequestBehavior.AllowGet);
}
In the output I am getting something like "[object][object]" and no of rows in the table returned from database.the skeleton of grid is coming but not the data. I am new to MVC and kendo. Please help me out.

Answer 1

The data you received should be started with {"Data": So simply change your code from var dataloc = data; to var dataloc = data.Data; just confirm it by visiting UserSummary/Employee_Read.
You can also set the dataSource later on like this (if you prefer at some stage)
<script type="text/javascript">
$.ajax({
url: '#Url.Action("Employee_Read", "UserSummary")',
type: 'GET',
dataType: "json",
Async: true,
success: function (data, textStatus, xhr) {
var dataloc = data.Data;
var element = $("#grid4").kendoGrid({
dataSource: {
// data: dataloc,
schema: {
model: {
fields: {
userDetailsId: { type: "number", editable: false },
name: { type: "string", editable: false },
roleId: { type: "string", editable: false },
emailId: { type: "string", editable: false }
}
}
}
}
});
// create data source using the data received
var ds = new kendo.data.DataSource({
data: dataloc
});
$('#grid4').data('kendoGrid').setDataSource(ds);
}
});
</script>