EasyUI Forum
April 29, 2024, 12:00:27 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > fitColumns:true with rowNumber and/or detailview shows horizontal scrollbar
Pages: [1]
« previous next »
  Print  
Author Topic: fitColumns:true with rowNumber and/or detailview shows horizontal scrollbar  (Read 10458 times)
Juan Antonio Martínez
Jr. Member
**
Posts: 68



View Profile
« on: June 11, 2016, 01:14:23 AM »
Hi all!

Manual says that method fitCoulumns shoult be used to prevent horizontal scrolling... but when I set rownumbers to 'true', or set view to 'detailview', these extra columns are not included as part of datagrid and as result, horizontal scrollbar appears

What can I do to disable completely either horizontal or vertical scrollbars in datagrid ¿Perhaps setting scrollbarsize to zero?

(using easyui 1.4.2)

Thanks in advance
Juan Antonio
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #1 on: June 11, 2016, 03:33:24 PM »
Please show an example or a live link to demonstrate your issue.
Logged
Juan Antonio Martínez
Jr. Member
**
Posts: 68



View Profile
« Reply #2 on: June 11, 2016, 11:55:32 PM »
Aside note:
When using absolute values instead of percentages in 'width' field options, method fitColumns works as expected: no horizontal scrollbar and fields expanded to fit available width

From your sample tests. Just set rownumbers to true/false to see horizontal scrollbar behaviour
Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/demo/demo.css">
<script type="text/javascript" src="../lib/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
</head>
<body>

	<div id="myWindow" class="easyui-window" style="width: 600px; height: 200px" data-options="resizable:true">
	
		<table id="dg" class="easyui-datagrid"
			data-options="singleSelect:false,
				url:'../lib/jquery-easyui-1.4.2/demo/layout/datagrid_data1.json',
				method:'get',
				fit:true,
				fitColumns:true,
				rownumbers:true">
			<thead>
				<tr>
					<th data-options="field:'itemid',width:'10%'">Item ID</th>
					<th data-options="field:'productid',width:'15%'">Product</th>
					<th data-options="field:'listprice',width:'10%',align:'right'">List Price</th>
					<th data-options="field:'unitcost',width:'15%',align:'right'">Unit	Cost</th>
					<th data-options="field:'attr1',width:'30%'">Attribute</th>
					<th data-options="field:'status',width:'20%',align:'center'">Status</th>
				</tr>
			</thead>
		</table>
	
	</div>
	
</body>
</html>
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #3 on: June 12, 2016, 08:56:08 AM »
Please try to add this code to the page.
Code:
<script type="text/javascript">
(function($){
	function fitColumns(target){
		var state = $.data(target, 'datagrid');
		var opts = state.options;
		var dc = state.dc;
		var header = dc.view2.children('div.datagrid-header');
		dc.body2.css('overflow-x', '');
		var rownumberWidth = opts.rownumbers ? dc.header1.find('.datagrid-header-rownumber').parent().outerWidth() : 0;
		
		setGroupWidth();
		setPercentWidth();
		fillWidth();
		setGroupWidth(true);
		
		if (header.width() >= header.find('table').width()){
			dc.body2.css('overflow-x', 'hidden');
		}
		
		function fillWidth(){
			if (!opts.fitColumns){return;}
			if (!state.leftWidth){state.leftWidth = 0;}
			
			var fieldWidths = 0;
			var cc = [];
			var fields = $(target).datagrid('getColumnFields', false);
			for(var i=0; i<fields.length; i++){
				var col = $(target).datagrid('getColumnOption', fields[i]);
				if (canResize(col)){
					fieldWidths += col.width;
					cc.push({field:col.field, col:col, addingWidth:0});
				}
			}
			if (!fieldWidths){return;}
			cc[cc.length-1].addingWidth -= state.leftWidth;
			
			var headerInner = header.children('div.datagrid-header-inner').show();
			var leftWidth = header.width() - header.find('table').width() - opts.scrollbarSize + state.leftWidth;
			var rate = leftWidth / fieldWidths;
			if (!opts.showHeader){headerInner.hide();}
			for(var i=0; i<cc.length; i++){
				var c = cc[i];
				var width = parseInt(c.col.width * rate);
				c.addingWidth += width;
				leftWidth -= width;
			}
			cc[cc.length-1].addingWidth += leftWidth;
			for(var i=0; i<cc.length; i++){
				var c = cc[i];
				if (c.col.boxWidth + c.addingWidth > 0){
					c.col.boxWidth += c.addingWidth;
					c.col.width += c.addingWidth;
				}
			}
			state.leftWidth = leftWidth;
			
			// fixColumnSize(target);
			$(target).datagrid('fixColumnSize');
		}
		function setPercentWidth(){
			var changed = false;
			var fields = $(target).datagrid('getColumnFields',true).concat($(target).datagrid('getColumnFields',false));
			$.map(fields, function(field){
				var col = $(target).datagrid('getColumnOption', field);
				if (String(col.width||'').indexOf('%') >= 0){
					var width = $.parser.parseValue('width',col.width,dc.view,opts.scrollbarSize+rownumberWidth) - col.deltaWidth;
					if (width > 0){
						col.boxWidth = width;
						changed = true;
					}
				}
			});
			if (changed){
				// fixColumnSize(target);
				$(target).datagrid('fixColumnSize');
			}
		}
		function setGroupWidth(fit){
			var groups = dc.header1.add(dc.header2).find('.datagrid-cell-group');
			if (groups.length){
				groups.each(function(){
					$(this)._outerWidth(fit ? $(this).parent().width() : 10);
				});
				if (fit){
					setBodySize(target);
				}
			}
		}
		function canResize(col){
			if (String(col.width||'').indexOf('%') >= 0){return false;}
			if (!col.hidden && !col.checkbox && !col.auto && !col.fixed){return true;}
		}
	}

	$.extend($.fn.datagrid.methods, {
		fitColumns: function(jq){
			return jq.each(function(){
				fitColumns(this);
			});
		}
	});
})(jQuery);
</script>
Logged
Juan Antonio Martínez
Jr. Member
**
Posts: 68



View Profile
« Reply #4 on: June 12, 2016, 09:19:30 AM »
!Fine!
Thanks for yout time.
Cheers

Juan Antonio
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!