Kendo grid scrollable making vertical scroll not appear if not needed.

[MK]

I would like the grid to not display the vertical scroll bar if there is not enough information in the grid to warrant it being there. So that the vertical scroll will work like the horizontal scroll which is set to auto. I think that this behavior should be added to the kendo grid and included in a upcoming release.

I was able to do this by extending the Grid widget. Which sets the (".k-grid-content").css("overflow-y", "auto") and either adds or removes the padding on the (".k-grid-header") depending on if the scroll is there or not.

See code below:

$(function () {
	MyGrid = kendo.ui.Grid.extend({
		element: null,
		_rightPaddingHeader: 0,
		options: {
			name: "MyGrid"
		},
		init: function (element, options) {
			var that = this;
			kendo.ui.Grid.prototype.init.apply(that, [element, options]);
			that.element = $(element);
 
			that.bind("dataBound", that._dataBound);
 
			//hide the scrollbar if not needed.
			that._rightPaddingHeader = $(element).find(".k-grid-header").css("padding-right");
			$(element).find(".k-grid-content").css("overflow-y", "auto");
			that._setScrollBars(that);
		},
		//fired when data is bound to the grid.
		_dataBound: function () {
			var that = this;
			that._setScrollBars(that);
		},
 
		_setScrollBars: function (grid) {
			//found with webkit browsers need to hide and show inorder for style changes to take efect :( 
			$(grid.element).find(".k-grid-header").hide();
			if ($(grid.element).find(".k-grid-content").hasScrollBarVertical()) {
				$(grid.element).find(".k-grid-header").css("padding-right", grid._rightPaddingHeader);
			}
			else {
				$(grid.element).find(".k-grid-header").css("padding-right", "0px");
			}
 
			$(grid.element).find(".k-grid-header").show();
		}
	});
	kendo.ui.plugin(MyGrid);
});

//Function to check is a element has a Vertical scrollbar.
(function ($) {
	$.fn.hasScrollBarVertical = function () {
		var results = true;
		//for IE and FF do it this way
		 if (this.scrollHeight  != undefined) {
			 results = this.scrollHeight > this.clientHeight;
		 }
		else {
			 // else for webkit do it like this.
			results = this.get(0).scrollHeight > this.get(0).clientHeight;
		}
		return results;
		
	};
})(jQuery);
 

[Roger]

I want exactly this behavior, so I tried to use the sample MyGrid as provided.
But when I do, I get a run time error  "Uncaught RangeError: Maximum call stack size exceeded" when trying to apply the grid to an element.

It wasn't shown,in the post, but it appears that the extended version provided is meant to take over the kendoGrid function.
That is, i continue to apply the grid like so:
   $('#gridelem').kendoGrid(config);
and i should get an instance of "MyGrid", right?
Except for that recursion problem.

Is there some other way that one is supposed to consume this extended MyGrid widget?

Thanks
roger

[MK]

Roger, I did some further testing and found a few areas where the initial code needed to be enhanced because it wasn't working in Safari See updated code. Also made the check for scrollbars into a jquery plug-in so it could be used elsewhere in my application.

When you extend one of the kendo widgets you ref it with the name that is provide for your new widget. example:  kendoMyGrid. Here is some code to use the sample.
- Note the scrollbar initially appears.
- After you delete a few rows it is removed and the padding in the header is adjusted.

//markup
<div id="test-grid" style="height: 175px;width:300px"></div>
//js
var tDataSource = {
data: [
                        { test: '3P' },
                        { test: 'AAH' },
                        { test: 'AAP' },
                        { test: 'AAD' },
                        { test: 'ATA' },
                        { test: 'BLW' },
                        { test: 'SUM' },
                        { test: 'PWL' }
                ],
schema: {
model: {
fields: {
test: { type: "string" }
}
}
},
pageSize: 10
};
var cols = [
{ field: 'test', title: 'Available data'},
{ command: "destroy", title: "&nbsp;", width: 110 }
                           ];

var tGrid = $("#test-grid").kendoMyGrid({
		dataSource: tDataSource,
		columns: cols,
		pageable: false,
		editable: true,
		scrollable: true,
		dataBound: function () {
		} 		
	}).data('kendoMyGrid');

[Roger]

Thanks.

I see that one of the updates you made seems to be including 
    options: {
                name: "MyGrid"
    },

But now, it fails with   Uncaught TypeError: Object [object Object] has no method 'hasScrollBarVertical', at this line:
   if ($(grid.element).find(".k-grid-content").hasScrollBarVertical()) 

Thanks.

[Roger]

I changed the _setScrollbars method to be like so:

        _setScrollBars: function (grid) {
            //found with webkit browsers need to hide and show inorder for style changes to take efect :( 
            var gh = $(grid.element).find(".k-grid-header"),
                gc = $(grid.element).find(".k-grid-content")[0],
                scrollbarVisible = gc.clientWidth - gc.offsetWidth;
            gh.hide();
            gh.css("padding-right", scrollbarVisible ? grid._rightPaddingHeader : '0px');
            gh.show();
        }

and that seems to do the trick.

[shailesh]

Hi I want to get the sub grid of detail grid to be scrollable on x direction its wasn't working on sub grid.
Please help me.
Shailesh.

[Chris]

There is still no out-of-the-box support for an auto vertical scrollbar mode in v2014.2.903.

The good news is that MK's code still works, with a bit more code in case the grid has locked columns:

var hwrap = grid.lockedHeader ? $(grid.element).find(".k-grid-header-wrap") : null;
if ($(grid.element).find(".k-grid-content").hasScrollBarVertical()) {
    $(grid.element).find(".k-grid-header").css("padding-right", grid._rightPaddingHeader);
    if (hwrap) {
        var w = parseInt(hwrap.css('width')) -  parseInt(grid._rightPaddingHeader);
        hwrap.css({'width': w + 'px', 'padding-right': '0px'});
    }
} else {
    $(grid.element).find(".k-grid-header").css("padding-right", "0px");
    if (hwrap)
        hwrap.css('padding-right', grid._rightPaddingHeader);
}

I added the code involving "hwrap", the rest is from MK's post.

[Chris]

The code in my previous post is incorrect. Instead the following code should be added to MK's code, to handle a grid with locked columns:

if (kgrid.lockedHeader) {
    var w_rpad = parseInt(grid._rightPaddingHeader);
    var hwrap = grid.element.find(".k-grid-header-wrap");
    var w_hwrap = hwrap.width();
    var w_hlock = grid.element.find(".k-grid-header-locked").width();
    var w_hdr = grid.element.find(".k-grid-header").width();
    var showVSB = grid.element.find(".k-grid-content").hasScrollBarVertical();
    if (showVSB) {
        if (w_hlock + w_hwrap > w_hdr) {
            hwrap.css('width', (w_hwrap - w_rpad) + 'px');
        }
    } else {
        if (w_hlock + w_hwrap + w_rpad < w_hdr) {
            hwrap.css('width', (w_hwrap + w_rpad) + 'px');
        }
    }
}