 Show Posts
|
|
Pages: [1]
|
|
2
|
General Category / EasyUI for jQuery / Datagrid horizontal scrolling for many columns (fitColumns:true)
|
on: February 27, 2014, 11:39:06 PM
|
I have a datagrid with lots of columns using fit:true and fitColumns:true to fill the entire available space and prevent horizontal scrolling. See http://www.jeasyui.com/forum/index.php?topic=2947.msg6525#msg6525 for details - I am using auto-width columns and a fixed width (empty) last column to workaround another issue and I am using noWrap:true (otherwise content is wrapped even when there is enough space). When there are to many columns to display and the autosized content doesn't fit, my expectation would have been that the datagrid DOES show a horizontal scrollbar - or at least shrinks the width of the columns so much, that all of them fit in the available spae. Otherwise there is no way to get to see the last columns. Well, it doesn't  . The last columns are hidden from view (looks like overflow = hidden). |
|
|
|
|
3
|
General Category / Bug Report / Re: Column size in Datagrid w/ detailView width
|
on: February 18, 2014, 11:45:26 PM
|
Hmm, so my first atempt was to just give the last column a width. The problem then is, that a right aligned column looks really weird this way if there's a lot of space (all table content together on the left except for the last column, which is "alone" on the right). My final solution (a rather hackish one) is to introduce another empty no-titled fillup-column with width:1 which takes up the remaining space. But that looks best for all cases. Edit: for anyone using this approach as well: you have to give the fillup-column a "field" value of a nonexisting field in the data, otherwise the column will not be drawn. Thanks a lot anyway, at least now I understand why  |
|
|
|
|
4
|
General Category / Bug Report / Column size in Datagrid w/ detailView width
|
on: February 18, 2014, 07:59:03 AM
|
Hi there, i've got another problem with column sizing in data grid. What I try to do is have a grid that fills the page (fit: true) and its columns resizing in respect to their content and (in sum) taking up all the width of the grid (fitColumns:true). What I experience is that the columns DO autosize, but if the overall size of the content is to small, the last column does NOT expand to the full width of the grid. This is not a problem in itself, but when I expand the detail content, it only takes up the space up to the right border of the last column (and not, as one would expect, to the full width of the grid). I'm not really sure whats the bug here - either the last column not taking up the whole space or the detail content not taking up the whole space. But in combination its really weird for almost-empty tables but large detail contents. Here's a demo: <html>
<head>
<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/datagrid-detailview.js"></script>
</head>
<body>
<table id="LABEL_14429ec4362" ></table>
<script>
$(function() {
$('#LABEL_14429ec4362').datagrid({
data: [{"OID":"3652351","LABEL":"LABEL1"},{"OID":"3652352","LABEL":"LABEL2"},{"OID":"3652353","LABEL":"LABEL3"},{"OID":"3652354","LABEL":"LABEL4"},{"OID":"3652355","LABEL":"LABEL5"},{"OID":"3652356","LABEL":"LABEL6"},{"OID":"3652357","LABEL":"LABEL7"},{"OID":"3652358","LABEL":"LABEL8"},{"OID":"3652359","LABEL":"LABEL9"},{"OID":"3652360","LABEL":"LABEL10"}],
fit: true,
fitColumns: true,
view: detailview,
detailFormatter: function(index, row) {
return "<div>Some text here which is overly long and would normaly take up all the space up to the right. Some text here which is overly long and would normaly take up all the space up to the right. Some text here which is overly long and would normaly take up all the space up to the right. Some text here which is overly long and would normaly take up all the space up to the right.</div>";
},
columns:[ [
{
title: 'Style',
field:'LABEL'
},
{
title: 'OID',
field:'OID'
},
]]
});
});
</script>
</body>
</html>
|
|
|
|
|
8
|
General Category / Bug Report / Combogrid header column width
|
on: December 04, 2013, 02:15:02 AM
|
The header columns in a combo grid initially have a wrong size (very small) when no width is given in the column definition (with fitColumns = true). After a reload data or when using the pagination controls the header columns are resized to fit the content correctly. This can be shown with the combogrid demo ( http://jeasyui.com/demo/main/index.php?plugin=ComboGrid&theme=default&dir=ltr&pitem=) by removing the width attributes as follows: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="easyui.css">
<link rel="stylesheet" type="text/css" href="icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<select class="easyui-combogrid" style="width:400px" data-options="
panelWidth: 500,
idField: 'itemid',
textField: 'productname',
url: 'datagrid_data1.json',
method: 'get',
showFooter: true,
columns: [[
{field:'itemid',title:'Item ID'},
{field:'productname',title:'Product'},
{field:'listprice',title:'List Price',align:'right'},
{field:'unitcost',title:'Unit Cost',align:'right'},
{field:'attr1',title:'Attribute'},
{field:'status',title:'Status',align:'center'}
]],
fitColumns: true
">
</select>
</body>
</html>
|
|
|
|
|
