Скрытие/отображение полосы прокрутки сетки Kendo

Я хочу показать свою полосу прокрутки сетки кендо, только если это необходимо. Вот моя инициализация сетки:

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

Ответ 2

Я только что изменил две вещи в вашем javascript, и это сработало как шарм. Благодаря

Изменение значения от 17px до 21px. Поэтому в основном вы должны найти правильное значение padding-right.
Изменение значения от '0 !important' до '0px'. Чтобы исправить заголовок, чтобы не показывать дополнительный столбец в конце.

Ответ 3

Я дам вам простой ответ "хакер". Если у вас есть код, который может правильно решить, когда скрывать "полосу прокрутки", но не может правильно решить, когда показывать "полосу прокрутки", это решение очевидно. Всегда показывайте полосу прокрутки, затем запустите свой код, чтобы решить, следует ли его скрыть.

Ответ 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.
 }

Сообщите мне, если это поможет.