Question

我的应用程序中有一个Kendo网格，我通过REST调用将数据绑定到它。当网格第一次加载时，按钮不会显示。以下是示例：

网格中有400多个项目，目前它配置为每页只显示50个项目。但问题是我无法看到访问第二页/下一页的选项。

当我每页更改项目时，第二页的选项可见。喜欢如果我从50 - 100更改选项。我能够看到其他页码。

这是第二个问题。页码以垂直方式而非水平方式显示。

我需要帮助解决以下问题：

当页面加载分页选项应按原样显示时。
分页编号应以水平方式显示，而不是垂直方式。

以下是我的代码段：

$scope.mainGridOptions = {
        editable: true,
        pageable: {
            pageSizes: [15,25,50,100]
        },
        navigatable: true,
        sortable: true,
        filterable: true,
        dataSource: {
            type: "odata",
            pageSize: 50,
            batch: false,
            requestEnd: function(e) {
                if (e.type != 'read')
                {
                    $('#grdItemizations').data('kendoGrid').dataSource.read();  
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number", editable: false },
                                         Title: { type: "string",editable: false }
                    }
                },
                data: function (data) {
                    return data.d && data.d.results ? data.d.results : [];
                }
            },
            transport: {
                parameterMap: function (data, type) {
                    if (type != "read") {
                        var strIfy = kendo.stringify({
                            "__metadata": type != "create" ? { "type": },
                            "Title": data.Title,
                            "Id": type != "create" ? data.ID : undefined
                        });
                        return strIfy;
                    }
                    return kendo.data.transports["odata"].parameterMap.apply(this, arguments);
                },
                read: {
                },
                update: {

                },
                create: {
                },
    error: function (e) {
        alert("Status: " + e.status + "; Error message: " + e.errorThrown);
    }           
            },    
        },
        columns: [ 
            { field: "Id", title: "ID" , width: "60px"},
            { field: "Title", title: "Analytic Inventory Description" , width: "220px"}
        ]
    }

任何提示，帮助都非常感激。

Answer 1

由于您尚未发布完整代码，因此可能存在其他问题。

首先，我怀疑在css方面有某些东西（缺少css，不正确版本的kendo css引用，murtiple css冲突），因为它处理网格的呈现。

然后我拉了demo并删除了这些css文件

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.mobile.min.css" />

并且令人惊讶地看到下面的图像结果有点类似我可以看到垂直格式的分页按钮。

请仔细检查css端的某些内容（通过查看viewsource页面检查对kendo grid css的引用）如果不解决问题请确保发布完整的代码

Kendo Grid分页按钮以垂直格式显示

1 个答案: