In my web app I created a class DataSourceResult
/// <summary>
/// DataSource result
/// </summary>
public class DataSourceResult
{
/// <summary>
/// Extra data
/// </summary>
public object ExtraData { get; set; }
/// <summary>
/// Data
/// </summary>
public IEnumerable Data { get; set; }
/// <summary>
/// Errors
/// </summary>
public object Errors { get; set; }
/// <summary>
/// Total records
/// </summary>
public int Total { get; set; }
}
and in my controller
[HttpPost]
[AdminAntiForgery]
public IActionResult PortList(DataSourceRequest command)
{
if (!_permissionService.Authorize(StandardPermissionProvider.ManageVendors))
return AccessDeniedKendoGridJson();
var ports = _worldPortIndexService.GetAllPorts(pageIndex: command.Page - 1, pageSize: command.PageSize);
var model = ports.Select(p =>
{
var store = _worldPortIndexService.GetPortById(p.Id);
return new PortMainModel
{
Id = p.Id,
PortName = p.PortName,
UNLOCODE = p.UNLOCODE,
Country = p.Country,
LatDec = p.LatDec,
LonDec = p.LonDec
};
}).ToList();
return Json(new DataSourceResult
{
Data = model,
Total = ports.TotalCount
});
}
and my view script is
$(document).ready(function() {
$("#ports-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("PortList", "PortGuideAdmin"))",
type: "POST",
dataType: "json",
data: addAntiForgeryToken
},
destroy: {
url: "@Html.Raw(Url.Action("Delete", "PortGuideAdmin"))",
type: "POST",
dataType: "json",
data: addAntiForgeryToken
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id"
}
},
requestEnd: function (e) {
if (e.type == "update") {
this.read();
}
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: @(defaultGridPageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [@(gridPageSizes)],
@await Html.PartialAsync("_GridPagerMessages")
},
editable: {
confirmation: "@T("Admin.Common.DeleteConfirmation")",
mode: "inline"
},
scrollable: false,
columns: [{
field: "Id",
headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
width: 50
}, {
field: "PortName",
width: 200,
title: "Port Name"
}, {
field: "UNLOCODE",
width: 100,
title: "UNLO CODE"
},{
field: "Country",
width: 200,
title: "Country"
}, {
field: "LatDec",
width: 100,
title: "Latitude"
},{
field: "LonDec",
width: 100,
title: "Longitude"
}, {
field: "Id",
title: "@T("Admin.Common.Edit")",
width: 100,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
template: '<a class="btn btn-default" href="Edit/#=Id#"><i class="fa fa-pencil"></i>@T("Admin.Common.Edit")</a>'
}]
});
});
when I turn filterable and sortable true filter and sorting is not updating my grid.Grid views list fine. all other functions are working except filtering and sorting.