Record doesn't show in grid of Kendo UI MVC - model-view-controller

Question

I use this code for grid Kendo UI, But it doesn't show data in the grid. I trace code, it's right, only doesn't show record in grid. I don't know how to solve this problem.
public JsonResult GridData()
{
var products = new List<Product>();
for (var i = 1; i <= 100; i++)
{
products.Add(new Product { Id = i, Name = "Product " + i });
}
return Json(products, JsonRequestBehavior.AllowGet);
}
public class Product
{
public int Id { set; get; }
public string Name { set; get; }
}
<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.common.core.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/kendo/jquery.min.js"></script>
<script src="~/Scripts/kendo/kendo.web.min.js"></script>
<script src="~/Scripts/kendo/kendo.all.min.js"></script>
<div id="report-grid"></div>
<script type="text/javascript">
$(function () {
var productsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/Home/GridData/',
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET'
},
parameterMap: function (options) {
return kendo.stringify(options);
}
},
schema: {
data: "Data",
total: "Total",
model: {
fields: {
"Id": { type: "number" }, //تعیین نوع فیلد برای جستجوی پویا مهم است
"Name": { type: "string" },
"IsAvailable": { type: "boolean" },
"Price": { type: "number" }
}
}
},
error: function (e) {
alert(e.errorThrown.stack);
},
pageSize: 5,
sort: { field: "Id", dir: "desc" },
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
$("#report-grid").kendoGrid({
dataSource: productsDataSource,
autoBind: true,
scrollable: false,
pageable: true,
sortable: true,
filterable: true,
reorderable: true,
columnMenu: true,
columns: [
{ field: "Id", title: "شماره", width: "130px" },
{ field: "Name", title: "نام محصول" },
{
field: "IsAvailable", title: "موجود است",
template: '<input type="checkbox" #= IsAvailable ? checked="checked" : "" # disabled="disabled" ></input>'
},
{ field: "Price", title: "قیمت", format: "{0:c}" }
]
});
});
</script>

Answer 1

Please try with the below code snippet.
<script type="text/javascript">
$(function () {
var productsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/Home/GridData',
dataType: "json"
},
parameterMap: function (options) {
return kendo.stringify(options);
}
},
schema: {
model: {
fields: {
"Id": { type: "number" },
"Name": { type: "string" }
}
}
},
error: function (e) {
alert(e.errorThrown.stack);
},
pageSize: 5,
sort: { field: "Id", dir: "desc" },
//serverPaging: true,
//serverFiltering: true,
//serverSorting: true
});
$("#report-grid").kendoGrid({
dataSource: productsDataSource,
autoBind: true,
scrollable: false,
pageable: true,
sortable: true,
filterable: true,
reorderable: true,
columnMenu: true,
columns: [
{ field: "Id", title: "شماره", width: "130px" },
{ field: "Name", title: "نام محصول" }
]
});
});
</script>
Let me know if any concern.