以 Kendo Grid 页面大小显示全部

Posted

技术标签:

【中文标题】以 Kendo Grid 页面大小显示全部【英文标题】:Show All in Kendo Grid page sizes 【发布时间】:2014-10-12 06:48:27 【问题描述】:

您好,有什么方法可以在 Kendo Grid 的 Page Sizes 数组中显示全部?

这是我的代码

$("#mygrid").kendoGrid(
            sortable: true,
            pageable: 
            pageSizes: [15,20,25,50,100,Show All]
     ,

如何做到这一点?

谢谢

【问题讨论】:

【参考方案1】:

我不确定为什么所有答案看起来都如此复杂。 答案很简单,这是我在实际项目中使用的部分代码:

 pageable: 
            pageSize: 10,
            pageSizes: [10, 25, 50, 100, "All"],
            messages: 
                itemsPerPage: "vendors",
                display: "0-1 from 2 vendors",
                empty: "No data",
                allPages: "Show All"
            
        

【讨论】:

【参考方案2】:

在 Asp.Net MVC(Razor 或服务器端)中,您可以使用 Pageable 方法 PageSizes 在 ture 重载的默认值中,将页面大小设置为:5 10 20

如果您需要自定义值,请使用 IEnumerable string collection 重载:

.Pageable(pageable => pageable.PageSizes(new string[]  "5", "10", "15", "20", "All" )

【讨论】:

明确地将数组创建为字符串对我有用。【参考方案3】:

这样试试

使用DropDown创建自定义工具栏。在下拉更改中编写您的代码。

查看

<div id="grid">
</div>

脚本

<script type="text/javascript">
    $(document).ready(function () 

        var crudServiceBaseUrl = "http://demos.kendoui.com/service",
                        dataSource = new kendo.data.DataSource(
                            transport: 
                                read: 
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                ,
                                update: 
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                ,
                                destroy: 
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                ,
                                create: 
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                ,
                                parameterMap: function (options, operation) 
                                    if (operation !== "read" && options.models) 
                                        return  models: kendo.stringify(options.models) ;
                                    
                                
                            ,
                            batch: true,
                            pageSize: 1,
                            schema: 
                                model: 
                                    id: "ProductID",
                                    fields: 
                                        ProductID:  editable: false, nullable: true ,
                                        ProductName:  validation:  required: true,editable: false, ,
                                        UnitPrice:  type: "Text", validation:  required: true, min: 1 ,
                                        Discontinued:  type: "boolean" ,
                                        UnitsInStock:  type: "number", validation:  required: true, min: 1 
                                    
                                
                            
                        );

            var grid=   $("#grid").kendoGrid(
                            dataSource: dataSource,
                            toolbar: [
                                
                                    template: $("#template").html()
                                ],
                                navigatable: true,
                                pageable: 
                                pageSizes: [15,20,25,50,100]
                                ,height:500,
                                columns: [
                                    "ProductName",
                                    field: "UnitPrice", title: "Unit Price", width: 110 ,
                                     field: "UnitsInStock", title: "Units In Stock", width: 110 ,
                                     field: "Discontinued", width: 110 ],
                        );

                $("#grid").find(".k-grid-toolbar").insertAfter($("#grid .k-grid-content"));

                $('#category').change(function()
                    var value = $(this).val();
                    if(value != null)
                    
                        if(value == "4")
                        
                        grid.data("kendoGrid").dataSource.pageSize(grid.data("kendoGrid").dataSource.data().length);
                        
                        else
                        
                        grid.data("kendoGrid").dataSource.pageSize(parseInt(value));
                        
                    

                );
    );
</script>
<script type="text/x-kendo-template" id="template">
    <div class="toolbar">
        <label class="category-label" for="category">Show products by category:</label>
        <select id="category" style="width: 80px">
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="4">Show All</option>
</select>
    </div>
</script>

演示:http://jsfiddle.net/mgdnE/163/

如果您有任何疑问,请告诉我。

【讨论】:

谢谢,我只找这个:) Kendo 已内置支持pagesize 'all'。 为什么这个例子不像剑道ui数据网格部分的首页。

以上是关于以 Kendo Grid 页面大小显示全部的主要内容,如果未能解决你的问题,请参考以下文章

如何提高kendo ui grid在页面的渲染速度

在容器 Kendo 窗口调整大小时动态更改 Kendo Grid 行的高度

如何在 Kendo UI Grid 中为不同的页面设置不同的页面大小

Kendo Grid按行数自动调整大小

.NET后台数据列表怎样显示全部的条数

kendo ui grid 动态控制某属性