隐藏/显示Kendo网格滚动条

Question

隐藏/显示Kendo网格滚动条

14

我希望只有在必要时才显示我的剑道网格的滚动条。这是我的网格初始化：

@(Html.Kendo().Grid<UT.Repo.Core.up_HedgedCustomerLatestTradeListGet_Result>()
    .Name("lastPositionsGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.ACCOUNT).Title("Hesap").Width(70);
        columns.Bound(c => c.TICKET).Title("Emir");
        columns.Bound(c => c.SIDE).Title("Yön").Width(50);
        columns.Bound(c => c.STATE).Title("Durum").Width(65);
        columns.Bound(c => c.SYMBOL).Title("Sembol");
        columns.Bound(c => c.VOLUME).Title("Hacim").Width(65);
        columns.Bound(c => c.OPENPX).Title("Açılış");
        columns.Bound(c => c.CLOSEPX).Title("Kapanış");
        columns.Bound(c => c.P_L).Title("Kar Zarar").Width(75);
        columns.Bound(c => c.SL).Title("Zararı Durdur");
        columns.Bound(c => c.TP).Title("Karı Al");
        columns.Bound(c => c.TIME).Title("Zaman").ClientTemplate("#= kendo.toString(TIME, \"dd/MM/yyyy HH:mm:ss\") #").Width(160);
    })
    .Scrollable()
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .Events(events => events.DataBound("onLastPositionsGridDataBound"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sort => sort.Add("TIME").Descending())
        .Read(read => read.Action("HedgedCustomerLatestTradeListGet", "Home"))
    )
)

在数据绑定时，我试图设置滚动条的可见性：

function onLastPositionsGridDataBound(e) {
    var gridHeight = $("#lastPositionsGrid").outerHeight();
    var gridHeaderHeight = $("#lastPositionsGrid table:eq(0)").outerHeight();
    var gridBodyHeight = $("#lastPositionsGrid table:eq(1)").outerHeight();
    if (gridHeight < gridHeaderHeight + gridBodyHeight) { // show the scrollbar
        $("#lastPositionsGrid .k-grid-header").css('padding', '');
        $("#lastPositionsGrid .k-grid-header").css('padding-right', '17px');
        $("#lastPositionsGrid .k-grid-content").css('overflow-y','scroll');
    }
    else { // hide the scrollbar
        $("#lastPositionsGrid .k-grid-header").css('padding','0 !important');
        $("#lastPositionsGrid .k-grid-content").css('overflow-y', 'visible');
    }
}

隐藏滚动条的部分工作得很好，但显示滚动条的部分却没有。这是显示滚动条后的截图：

正如您所看到的，分隔标题和行的线没有对齐。我该如何修复它？

- anilca

我会给你一个简单的“黑客”答案。如果你有能够正确决定何时隐藏“滚动条”的代码，但不能正确决定何时显示“滚动条”的代码，那么解决方案是显而易见的。始终显示滚动条，然后运行你的代码来决定是否应该隐藏它。 - jerrylagrou

请告诉我我的回答是否对您有帮助。 - Rajshekar Reddy

5个回答

2

我刚刚修改了你的javascript中的两个部分，它就像魔法一样奏效。谢谢。

将值从17px更改为21px。因此，您必须找到正确的padding-right值。
将值从'0 !important'更改为'0px'。以修复标题在末尾不显示额外列的问题。

- Akshay G

这个版本在我的情况下没有隐藏滚动条。你做了其他的事情吗？ - xkcd

尝试不同的溢出值。overflow-y hidden 应该可以解决问题。 - Akshay G

你能找到解决问题的方法吗？如果可以的话，你是如何做到的？ - Akshay G

1

我会给你一个简单的“黑客”答案。如果您有代码可以正确地决定何时隐藏“滚动条”，但无法正确地决定何时显示“滚动条”，那么解决方案是显而易见的。始终显示滚动条，然后运行您的代码以确定是否应该隐藏它。

- jerrylagrou

嗨，骇客！谢谢你的答案，但问题不在于决定何时显示或隐藏滚动条。脚本可以正确地决定这一点。正如你所看到的，网格的数据源是通过ajax调用进行刷新的。因此，我需要几行代码来处理两种状态：从显示到隐藏和从隐藏到显示。 - xkcd

0

由于您手动设置了网格的滚动条，因此网格不知道该更改。因此，一旦显示或隐藏滚动条完成，您可以通过自动调整列来修复它。因此，在您的函数onLastPositionsGridDataBound中，在if和else之后设置/隐藏滚动条自适应列，因此请在if else之后放置此代码。

 var grid = $("#lastPositionsGrid").data("kendoGrid");
 for (var i = 0; i < grid.columns.length; i++) {
      grid.autoFitColumn(i);  //autofit each column.
 }

如果这有帮助，请告诉我。

- Rajshekar Reddy

不，这并不能解决问题。感谢您的回答。 - xkcd

0

作为一种替代方案，由于您可以控制 options.scrollable 属性，因此您可以在网格的 dataBound 上使用类似以下代码的内容：

dataBound: function (e) {
   if (this.dataSource.options.data.length > this.dataSource.pageSize()) {
                this.options.scrollable = true;                    
            }
        }

然后你可以像这样更新选项：grid.setOptions(grid.getOptions());

- CMartins

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ajai Krishnan R · Accepted Answer

这个方法可行，尝试使用“overflow:auto”。

function onLastPositionsGridDataBound(e) {
    var gridHeight = $("#lastPositionsGrid").outerHeight();
    var gridHeaderHeight = $("#lastPositionsGrid table:eq(0)").outerHeight();
    var gridBodyHeight = $("#lastPositionsGrid table:eq(1)").outerHeight();
    if (gridHeight < gridHeaderHeight + gridBodyHeight) { // show the scrollbar
        $("#lastPositionsGrid .k-grid-header").css('padding', '');
        $("#lastPositionsGrid .k-grid-header").css('padding-right', '17px');
        $("#lastPositionsGrid .k-grid-content").css('overflow-y','auto');
    }
    else { // hide the scrollbar
        $("#lastPositionsGrid .k-grid-header").css('padding','0 !important');
        $("#lastPositionsGrid .k-grid-content").css('overflow-y', 'auto');
    }
}