Grid Filter and Sorting not Updating the grid

6 posts, 0 answers
  1. Bulut
    Bulut avatar
    7 posts
    Member since:
    Sep 2018

    Posted 05 Sep 2018 Link to this post

    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.

  2. Georgi
    Admin
    Georgi avatar
    685 posts

    Posted 07 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Bulut
    Bulut avatar
    7 posts
    Member since:
    Sep 2018

    Posted 08 Sep 2018 Link to this post

    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.
  4. Georgi
    Admin
    Georgi avatar
    685 posts

    Posted 11 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Bulut
    Bulut avatar
    7 posts
    Member since:
    Sep 2018

    Posted 11 Sep 2018 in reply to Georgi Link to this post

    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.
  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 13 Sep 2018 Link to this post

    Hello Bulut,

    Please refer to the following help topic for detailed information about the AJAX binding of the Grid for ASP.NET Core:
    If further assistance is needed, please do not hesitate to contact us again.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top