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>
