隐藏/显示剑道网格​​滚动条

Posted 2023-05-07

【中文标题】隐藏/显示剑道网格​​滚动条

【英文标题】：Hiding / Showing Kendo grid scrollbar

【发布时间】：2016-06-12 05:47:23

【问题描述】：

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

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

隐藏滚动条的部分可以很好地工作，但显示滚动条的部分却不行。这是显示滚动条后的屏幕截图：

如您所见，将标题中的单元格分开的线条和行不适合。我该如何解决？

【问题讨论】：

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

如果我的回答对您有帮助，请告诉我。

【参考方案1】：

这会起作用，总是尝试自动溢出。

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

【讨论】：

是的，这就是要走的路。但是，一行 CSS 不会使整个功能变得不必要吗？ #lastPositionsGrid .k-grid-content overflow: auto

在 CSS 中是最小的

但这并不能解决问题。请看我添加的截图。我得到了同样的结果

【参考方案2】：

我刚刚在你的 javascript 中更改了两件事，它就像魅力一样。谢谢

将值从 17px 更改为 21px。所以基本上你必须找到合适的 padding-right 值。

将值从 '0 !important' 更改为 '0px'。修复标题以在末尾不显示额外的列。

【讨论】：

这个版本在我的例子中没有隐藏滚动条。你还做了别的吗？

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

您能否找到解决问题的方法。如果是，你是怎么做到的？

【参考方案3】：

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

【讨论】：

黑客你好！感谢您的回答，但问题不在于决定何时显示或隐藏滚动条。脚本正确地决定了这一点。如您所见，网格的数据源由 ajax 调用刷新。所以我需要为这两种状态写几行代码：显示到隐藏，隐藏到显示。

【参考方案4】：

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

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

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

【讨论】：

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