Grid Filter and Sorting not Updating the grid

[Bulut]

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.

[Georgi]

Hello Bulut,

I noticed that the dataSource is configured for server operations but the operations are not handled.

The Kendo.UI.Mvc.dll includes the ToDataSourceResult which will page, filter, sort, or group your data using the information provided by the grid. You can either use the ToDataSourceResult method or handle the requests manually.

The ToDataSourceResult method accepts a DataSourceRequest parameter which contains information about page, sort, group, and filter.

e.g.

        [AdminAntiForgery]
        public IActionResult PortList([DataSourceRequest]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(model.ToDataSourceResult(command));
        }

Regards,
Georgi
Progress Telerik

[Bulut]

Do you have kendo.mvc nuget package for ASP.NET Core 2.1 and EF Core 2.1? The one I found is not going to work for my project.

[Georgi]

Hello Bulut,

Our latest Telerik UI for ASP.Net Core nuget package (2018.2.620) is compatible with Core 2.1.

Are you facing any issues using it?


Regards,
Georgi
Progress Telerik

[Bulut]

yes. How can I use [DataSourceRequest] in my controller? only working option is Kendo.MVC but it is not compatible with my project. having problem with model bindings.

[Konstantin Dikov]

Hello Bulut,

Please refer to the following help topic for detailed information about the AJAX binding of the Grid for ASP.NET Core:

• https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/binding/ajax-binding

If further assistance is needed, please do not hesitate to contact us again.


Regards,
Konstantin Dikov
Progress Telerik