logo标签列表

Kendo Ui 网格锁定列。

kendo-uitelerikkendo-grid
3

有没有办法将Kendo UI网格的最后一列锁定到最右边？我希望始终让行动作按钮对用户可见，将其锁定在左侧感觉有些奇怪。

我认为这取决于您决定在哪里定义此列，您能否提供一些代码示例？ - Stefano Magistri
1个回答
1
请在您的页面中添加以下代码片段。
<style>
    .k-grid-content-locked {
        float: right;
    }

    .k-grid-header-locked {
        float: right;
    }
</style>

完整演示：

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/frozen-columns">
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />

    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
        <div id="grid"></div>

        <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        },
                        schema: {
                            model: {
                                fields: {
                                    OrderID: { type: "number" },
                                    ShipCountry: { type: "string" },
                                    ShipName: { type: "string" },
                                    ShipCity: { type: "string" },
                                    ShipAddress: { type: "string" }
                                }
                            }
                        },
                        pageSize: 30
                    },
                    height: 540,
                    sortable: true,
                    reorderable: true,
                    groupable: true,
                    resizable: true,
                    filterable: true,
                    columnMenu: true,
                    pageable: true,
                    columns: [{
                        field: "OrderID",
                        title: "Order ID",
                        width: 150
                    }, {
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: 300
                    }, {
                        field: "ShipCity",
                        title: "Ship City",
                        width: 300
                    }, {
                        field: "ShipName",
                        title: "Ship Name",

                        width: 300
                    }, {
                        field: "ShipAddress",
                        locked: true,
                        width: 400
                    }
                    ]
                });
            });
        </script>
    </div>
    <style>
        .k-grid-content-locked {
            float: right;
        }

        .k-grid-header-locked {
            float: right;
        }
    </style>

</body>
</html>

如果以上解决方案无法解决问题，则请将"float: right;"替换为"float: right !important;"。
1
这在分组方面效果不佳，分组标题也会在右侧。 - GôTô
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接