Jquery 显示所有剑道网格页面大小

嗨，有什么方法可以让剑道网格的页面大小数组显示所有页面大小吗

这是我的密码

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

如何做到这一点

谢谢

像这样试试

使用

下拉菜单创建自定义工具栏

。在下拉菜单上更改并编写代码

查看

<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>

$（文档）.ready（函数（）{
var crudServiceBaseUrl=”http://demos.kendoui.com/service",
dataSource=新建kendo.data.dataSource({
运输：{
阅读：{
url:crudServiceBaseUrl+“/Products”，
数据类型：“jsonp”
},
更新：{
url:crudServiceBaseUrl+“/Products/Update”，
数据类型：“jsonp”
},
销毁：{
url:crudServiceBaseUrl+“/Products/Destroy”，
数据类型：“jsonp”
},
创建：{
url:crudServiceBaseUrl+“/Products/Create”，
数据类型：“jsonp”
},
parameterMap：功能（选项、操作）{
if（操作！=“读取”&&options.models）{
返回{models:kendo.stringify（options.models）}；
}
}
},
批次：对，
页面大小：1，
模式：{
型号：{
id:“产品id”，
字段：{
ProductID:{可编辑：false，可空：true}，
产品名称：{验证：{必需：true}，可编辑：false，}，
单价：{type:“Text”，验证：{required:true，min:1}，
中止：{type:“boolean”}，
UnitsInStock:{type:“number”，验证：{required:true，min:1}
}
}
}
});
var grid=$（“#grid”）.kendoGrid({
数据源：数据源，
工具栏：[
{
模板：$（“#模板”）.html（）
}],
可导航：是的，
可分页：{
页面大小：[15,20,25,50100]
}，身高：500，
栏目：[
“产品名称”，
{字段：“单价”，标题：“单价”，宽度：110}，
{字段：“单位库存”，标题：“库存单位”，宽度：110}，
{字段：“中断”，宽度：110}]，
});
$（“#grid”）.find（“.k-grid-toolbar”）.insertAfter（$（“#grid.k-grid-content”）；
$（'#category'）。更改（函数（）{
var值=$（this.val（）；
if（值！=null）
{
如果（值=“4”）
{
grid.data（“kendoGrid”）.dataSource.pageSize（grid.data（“kendoGrid”）.dataSource.data（）.length）；
}
其他的
{
grid.data（“kendoGrid”）.dataSource.pageSize（parseInt（value））；
}
}
});
});
按类别显示产品：
5.
10
20
全部展示

演示：

---

如果您有任何问题，请告诉我。

我不知道为什么所有答案看起来都这么复杂。 答案很简单，下面是我在真实项目中使用的代码的一部分：

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

在Asp.NETMVC（Razor或服务器端）中，您可以使用

Pageable

方法

pagesize

在真重载的默认值中，将页面大小设置为：5 10 20

如果需要自定义值，请使用IEnumerable

字符串集合

重载：

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

---

谢谢，我只是在寻找：）Kendo内置了对的支持。为什么这个例子不像Kendo ui数据网格部分的首页。显式创建数组作为字符串对我来说是有效的。