使用拖放列重新排序时的水平自动滚动仅适用一次

时间:2019-07-12 12:07:04

标签: kendo-ui kendo-grid

我有一个Kendo UI网格,其中可能有很多列,因此我启用了水平滚动以允许显示所有列。

我需要能够对列进行重新排序,并且正在使用拖放功能。

这在第一次工作时效果很好,因为可以将选定的列拖动到末尾,并且网格会自动滚动,但是一旦放下,自动滚动将不再对我拖动的任何其他列起作用。

我搜索了Kendo文档和论坛,但没有找到解决该问题的方法。

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

    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>

</head>
<body>

    <div id="example" style='width:400px;'>
        <div id="grid"></div>

        <script>
            $(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        },
                        schema: {
                            model: {
                                fields: {
                                    OrderID: { type: "number" },
                                    ShipCountry: { type: "string" },
                                    ShipCity: { type: "string" },
                                    ShipName: { type: "string" },
                                    OrderDate: { type: "date" },
                                    ShippedDate: {type: "date" }
                                }
                            }
                        },
                        pageSize: 15
                    },
                    height: 550,                    
                    reorderable: true,  
                    scrollable:true,
                    columns: [
                        {
                            field: "OrderDate",
                            title: "Order Date",
                            width: 120,
                            format: "{0:MM/dd/yyyy}"
                        },
                        {
                            field: "ShipCountry",
                            title: "Ship Country",
                            width: 120
                        },
                        {
                            field: "ShipCity",
                            title: "Ship City",
                            width: 120
                        },
                        {
                            field: "ShipName",
                            title: "Ship Name",
                            width: 120
                        },
                        {
                            field: "ShippedDate",
                            title: "Shipped Date",
                            format: "{0:MM/dd/yyyy}",
                            width: 200
                        },
                        {
                            field: "OrderID",
                            title: "ID",
                            width: 80
                        }
                    ]
                });
            });
        </script>
    </div>
</body>
</html>

任何人都有解决此问题的想法吗?

谢谢

1 个答案:

答案 0 :(得分:0)

为澄清您的意思,水平滚动不再有效吗?当我使用Kendo的演示时,在拖放重新排序后,垂直滚动似乎可以正常工作。听起来您好像已经发现了一个错误,应该将其提交给Telerik的支持通知单,以查看他们是否已解决此问题。

如果您可以发布代码,那也将有所帮助。看来您刚刚发布了Kendo Demo代码,但这并不能真正帮助我解决代码的问题。