When using Kendo, I am encountering an issue where no data is being displayed and there is just a blank row. The grid is supposed to read from a controller method that returns JSON. I have confirmed that the controller method is indeed returning valid JSON, but the grid only shows the column titles without any actual data in the rows - just one blank row. Additionally, I am seeing a ReferenceError: kendo is not defined in the console, along with a Source map error stating that the request failed with status 404. Resource URL: http://localhost:56644/Content/css/bootstrap-reboot.css Source Map URL: bootstrap-reboot.css.map
public ActionResult GetProductsLists([DataSourceRequest]DataSourceRequest request )
{
var product = (from u in this.unitOfWork.Product.Get()
select new ProductViewModel
{
product_id = u.product_id,
product_name = u.product_name
});
DataSourceResult result = product.ToDataSourceResult(request);
var jsonResult = Json(result, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}
<div class="row">
<div class="col-12">
<div id="grid class="kendo-grid-custom">
@(Html.Kendo().Grid<ProductViewModel>()
.Name("gridProduct")
.Columns(columns =>
{
columns.Bound(c => c.product_id).Title("Product Id").Filterable(true);
columns.Bound(c => c.product_name).Title("Product Name").Filterable(true)
.HtmlAttributes(new { style = "height: 100%;" })
.TableHtmlAttributes(new { @class = "text-nowrap" })
.Scrollable()
.Sortable()
.Filterable()
.Resizable(resizable => resizable.Columns(true))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5)
.DataSource(dataSource => dataSource
.Ajax().Sort(x => x.Add("product_id").Ascending())
.Read(read => read.Action("GetProductList", "Product"))
.Model(m =>
{
m.Id(i => i.product_id);
}).PageSize("20"))
)
</div>
</div>
</div>