Hiding / Showing Kendo grid scrollbar

Question

I want to show my kendo grid's scrollbar only if it's necessary. Here is my grid initialization:

@(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"))
    )
)

On data bound I'm trying to set visibility of scrollbar:

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

The part that hides the scrollbar does its work nicely but the part that shows the scrollbar does not. Here is a screenshot after showing the scrollbar:

As you see the lines those separate the cells in header and the rows does not fit. How can I fix it?

Answer 1

this will work, try overflow auto always.

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

Answer 2

I just changed two things in your javascript and it worked like charm. Thanks

1. Changing the value from 17px to 21px. So basically you have to find the right value of padding-right.

2. Changing the value from '0 !important' to '0px'. To fix the header to not show an extra column at the end.