No horizontal scrollbar in datagrid

[hande89]

http://jquery-easyui.wikidot.com/forum/t-352646/datagrid-does-not-appear-horizontal-scrollbar

This bug is still there. I have exactly the same problem. No horizontal scrollbar is displayed when datagrid where width is fixed receives an empty data array. Tried the newest datagrid version from http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js but its not working.

[stworthy]

Here is the simple way to solve this issue. Extend a view and apply it to the datagrid.

Code:

var myview = $.extend({},$.fn.datagrid.defaults.view,{
	onAfterRender:function(target){
		$.fn.datagrid.defaults.view.onAfterRender.call(this,target);
		var dg = $(target);
		if (dg.datagrid('getRows').length == 0){
			setTimeout(function(){
				dg.datagrid('appendRow',{});
				dg.datagrid('options').finder.getTr(target, 0).css('height',0);
			},0)
		}
	}
});
$(function(){
	$('#dg').datagrid({
		view: myview,
		data:[]
	})
})

[hande89]

I have to use datagrid detail view. http://www.jeasyui.com/easyui/datagrid-detailview.js

If I apply your code there, the expand button is displayed even if no rows exist.


The scrollbar is also not displayed on treegrid with 0 nodes.

[stworthy]

If you are using 'detailview', please extend from detailview instead of extending from the default datagrid view.

Code:

var myview = $.extend({},detailview,{
	onAfterRender:function(target){
		detailview.onAfterRender.call(this,target);
		var dg = $(target);
		if (dg.datagrid('getRows').length == 0){
			setTimeout(function(){
				dg.datagrid('appendRow',{});
				dg.datagrid('options').finder.getTr(target, 0).css('height',0).find('*').css('height',0);
			},0)
		}
	}
});

[ryupanqui]

i have the same problem when the datagrid is empty. stworthy, are you planning to include this solution in the $.fn.datagrid.defaults.view as default behavior?

[omhardb]

I also have the same request. I need that datagrid have this behavior as default in the jeasyui library. Are you planning to incluide it in?

[stworthy]

The default behavior can be overridden as below:

Code:

(function($){
	var onAfterRender = $.fn.datagrid.defaults.view.onAfterRender;
	$.extend($.fn.datagrid.defaults.view, {
		onAfterRender:function(target){
			onAfterRender.call(this,target);
			var dg = $(target);
			if (dg.datagrid('getRows').length == 0){
				setTimeout(function(){
					dg.datagrid('appendRow',{});
					dg.datagrid('options').finder.getTr(target, 0).css('height',0).find('*').css('height',0);
				},0)
			}
		}
	});
})(jQuery);