如何在kendogrid上禁用分页

时间:2013-08-05 23:39:35

标签: kendo-ui kendo-grid

我们正在使用Kendo网格。我在我的cshtml文件和我的js文件中创建了一个表,我将它绑定到数据。我的问题是网格分页不会消失。我需要页面上的所有项目,因为我们预计不会有太多负载。我尝试删除pageable属性,然后尝试标记pageable: false。但我仍然看到网格在一个页面中只显示10个项目并给出了分页。

通过使用this.pager.element.hide(),我们可以隐藏寻呼机,但由于寻呼机被隐藏但寻呼仍在进行,因此无法解决问题。所以,现在,从第11个元素开始的元素出现在页面上,但我们无法导航到它。

这是现有的代码。我删除了表中不相关的列。 .CSHTML文件:

 <table style="width: 100%;" class='list-entity' id='inboxItems'>
                <thead>
                    <tr>
                        <th data-field='Actions' class="iconCell" style='width: 1%'>&nbsp;</th>
                       <### THERE ARE MORE COLUMNS HERE AND THOSE HAVE CORRESPONDING COLUMNS IN SETTINGS ###>      
                    </tr>
                </thead>
            </table>

JS文件:

    var settings = {
        kendosettings: {
            dataSource: {
                data: requestItemsList,
                schema: {
                    // required if get method will be used
                    model: {
                        id: "StepApproverKey"
                    }
                },
                group: [
                    {
                        field: "GroupByAttribute",
                        dir: "asc",
                        aggregates:
                        [
                            { field: "GroupByAttribute", aggregate: "count" }]
                    }]
            },
            sort: { field: "SubmittedOn", dir: "desc" },
            sortable: true,
            pageable: false,
            scrollable: false,
            columns: [
                {
                    field: "Actions",
                    title: "Actions",
                    template: kendo.template($("#inboxrowEditTemplate").html())
                },
                { field: "StepApproverKey", hidden: true },
                {
                    field: "GroupByAttribute",
                    hidden: true,
                    groupHeaderTemplate: kendo.template($("#inboxrowgroupHeaderTemplate").html()),
                    headerAttributes: {
                        style: "width: 100%"
                    }
                }
            ],
            selectable: "row",
        }
    };
    $('#inboxItems').pdi().displaygrid(settings);

2 个答案:

答案 0 :(得分:6)

我在Kendo论坛上发布了这个,似乎我们解决它的唯一方法是动态设置网格的页面大小然后隐藏寻呼机。在我们的例子中,由于我们希望单个加载的所有项目,我们将其设置为发送到客户端的列表的长度。下面是我使用的代码,它正在运行。

var inboxGrid = $('#inboxItems').data("kendoGrid");
inboxGrid.dataSource.pageSize(<NUMBER OF ITEMS IN THE LIST>);
inboxGrid.refresh();
inboxGrid.bind("dataBound", function () {
                this.pager.element.hide();
        });

答案 1 :(得分:0)

使用:

inboxGrid.bind("dataBound", function () {
            this.pager.element.hide();
    });

对我不起作用。也许是因为我正在使用Razor和MVC来显示网格,或者也许是因为我们使用Bootstrap作为CSS,我不知道。但所以我这样做了,而不是:

var inboxGrid = $('#inboxItems').data("kendoGrid");
inboxGrid.dataSource.pageSize(inboxGrid.dataSource.total());
inboxGrid.refresh();
$('[class*="k-pager-nav"]').hide();