如何在 kendogrid 上禁用分页

Posted 2023-05-07

【中文标题】如何在 kendogrid 上禁用分页

【英文标题】：How to disable paging on a kendogrid

【发布时间】：2013-08-06 19:58:12

【问题描述】：

我们使用的是剑道网格。我在我的 cshtml 文件和我的 js 文件中创建了一个表，我将它绑定到数据。我的问题是网格分页不会消失。我需要页面上的所有项目，因为我们预计不会有太多负载。我尝试删除 pageable 属性并尝试标记pageable: false。但是我还是看到grid在一页中只显示了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);

【问题讨论】：

您是否尝试将可滚动设置为 true？

是的。尝试了 Scrollable True 和 False 。我仍然看到分页发生。

【参考方案1】：

我在 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();
        );

【讨论】：

我找到了剑道论坛 convo - telerik.com/forums/how-to-disable-paging-on-a-kendogrid

应该写成inboxGrid.dataSource.total()。

【参考方案2】：

使用：

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();