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?

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?

• javascript
• jquery
• css
• kendo-ui
• kendo-grid

• I'll give you a simple 'hacker' answer. If you have code that can correctly decide when to hide 'the scroll bar', but can't correctly decide when to show 'the scroll bar' the solution is obvious. Always show the scroll-bar, THEN run your code to decide if you should hide it. – jerrylagrou Commented Mar 4, 2016 at 16:29
• Let me know if my answer helps you. – Rajshekar Reddy Commented Mar 10, 2016 at 2:17

5 Answers 5

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

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.

I'll give you a simple 'hacker' answer. If you have code that can correctly decide when to hide 'the scroll bar', but can't correctly decide when to show 'the scroll bar' the solution is obvious. Always show the scroll-bar, THEN run your code to decide if you should hide it.

Since you are manually setting the scroll bar to the grid, The grid has no idea about that change. So you can fix it by just autoFit the column once you are done with showing or hiding the scroll bar. So inside your function onLastPositionsGridDataBound after your if and else to set / hide the scroll bar autoFit the columns, So place this code after the if else.

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

Let me know if this helps.

As an alternative, since you can control the options.scrollable property you can use something like this on your grid dataBound:

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

Then you can update the options like this: grid.setOptions(grid.getOptions());