Title: fitColumns:true with rowNumber and/or detailview shows horizontal scrollbar
Post by: Juan Antonio Martínez 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
Title: Re: fitColumns:true with rowNumber and/or detailview shows horizontal scrollbar
Post by: jarry on June 11, 2016, 03:33:24 PM
Please show an example or a live link to demonstrate your issue.
Title: Re: fitColumns:true with rowNumber and/or detailview shows horizontal scrollbar
Post by: Juan Antonio Martínez 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 <!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>
Title: Re: fitColumns:true with rowNumber and/or detailview shows horizontal scrollbar
Post by: jarry on June 12, 2016, 08:56:08 AM
Please try to add this code to the page. <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>
Title: Re: fitColumns:true with rowNumber and/or detailview shows horizontal scrollbar
Post by: Juan Antonio Martínez on June 12, 2016, 09:19:30 AM
!Fine! Thanks for yout time. Cheers
Juan Antonio
|