无法在ken​​do网格中按页面大小显示记录

时间:2014-08-25 09:42:04

标签: asp.net-mvc-4 kendo-grid

我想在剑道网格中执行过滤,排序和记录,但它无法正常工作。

这是我的观点页面:

<script>
                $(document).ready(function () {
                    $("#categories-grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: {
                                    url: "@Html.Raw(Url.Action("categoriesList", "Admin"))",
                                    type: "POST",
                                    dataType: "json",
                                    data: '',
                                }
                            },
                            schema: {
                                data: "Data",
                                total: "Total",
                                errors: "Errors"
                            },
                            error: function(e) {
                                display_kendoui_grid_error(e);
                                // Cancel the changes
                                this.cancelChanges();
                            },
                            pageSize: 2,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        pageable: {
                            refresh: true,
                            pageSizes: [10,20,30]
                        },
                        editable: {
                            confirmation: false,
                            mode: "inline"
                        },
                        scrollable: false,
                        columns: [{
                            field: "CategoryName",
                            title: "CategoryName",
                            width: 100
                        }, {
                            field: "CategoryId",
                            title: "Edit",
                            width: 100,
                            template: '<a href="/Admin/ViewCategoryDetails?categoryId=#=CategoryId#&categoryName=#=CategoryName#">Edit</a>'
                        }]
                    });

                });

            </script>

这是我的控制器端http post action:

[HttpPost]
        public ActionResult categoriesList(DataSourceRequest command)
        {
            Categories categoriesBal = new Categories();
            List<CategoryModel> categoriesList = new List<CategoryModel>();
            var category = GetCategory();

            ViewBag.Category = GetCategory();
            List<Category> categoryDetails = categoriesBal.fetchCategory();//here i am fetching categoryid,name            
            var gridModel = new DataSourceResult
            {
                Data = categoryDetails.Select(x =>
                {
                    var categoryModel = new CategoryModel();
                    categoryModel.CategoryId = x.CategoryId;
                    categoryModel.CategoryName = x.Name;                        
                    return categoryModel;
                }),
                Total = categoryDetails.Count
            };
            return Json(gridModel);

        }

这是我的DataSourceRequest类

public class DataSourceRequest
    {
        public int Page { get; set; }

        public int PageSize { get; set; }

        public DataSourceRequest()
        {
            this.Page = 1;
            this.PageSize = 10;
        }
    }

这是我的分类型号:

 public class CategoryModel
    {
        public int CategoryId { get; set; }
        public string CategoryName { get; set; }
        public int frequency { get; set; }

        public virtual ICollection<SubcategoryModel> subCategory { get; set; }
    }

我有 12类。当我设置每页项目数据为2 时,它会显示所有记录。

任何机构都能告诉我代码中的问题以及如何执行排序和过滤?

2 个答案:

答案 0 :(得分:0)

使用this project中的 KendoGridMvcRequest 类,而不是使用自定义 DataSourceRequest 类,此类正确映射分页,排序和过滤。

也可以nuget

请参阅此link了解演示。

答案 1 :(得分:0)

更改架构以充当功能

schema: {
   data: function(response) {
    return response.Data ; 
   }
   total: function(response) {
     return response.Total; 
   }
},

并可分页到

pageable: {
 refresh: true,
 pageSizes: [2,10,20,30]
},

并且在您的代码中看不到使用DataSourceRequest,因为您不会从读取中发送pageSize。发送DataSourceRequest的对象并仅返回DataSourceRequest中指定的内容。在这种情况下只有两个记录

transport: {
            read: function (options) {

               var commandOBJ=[{
                    Page: 1, // Once the first two item is loaded and you click for the next page you will have the page in "options" (should be like options.page)
                    PageSize:2 
                }];

                $.ajax({
                    url:"@Html.Raw(Url.Action("categoriesList", "Admin"))",
                    data: { command: bookmarkID },
                    dataType: "json",
                    cache: false,
                    success: function (result) {
                        options.success(result);
                    },
                    error: function (result) {
                        options.error(result);
                    }
                });
            }
        }

现在从您的操作categoriesList检查命令并相应地发送数据。并且您的阅读操作可以是GET而不是POST。希望这有助于