So when I load a table after it has been created using this code.
<!--<table class="easyui-datagrid" title="DataGrid" style="width:700px;height:250px" id='NodeidConstraints' data-options="
url:'./scripts/constraintsbynodeid.php?nodeid=AEC',
fit:true,
title:'Constraint List by Nodeid',
toolbar:'#nodetoolbar',
onClickRow:onClickNodeidConstraints,
fitColumns:true
">
<thead>
<tr>
<th data-options="field:'constraintname',title:'Constraint Name',width:250,align:'left', sortable:true"></th>
<th data-options="field:'factor',title:'Factor',width:35,align:'right',styler:stylefunction3, sortable:true"></th>
<th data-options="field:'tradedate',title:'Last Date',width:65,align:'left',styler:stylefunction3, sortable:true"></th>
</tr>
</thead>
</table>-->
with toolbar
<div id="nodetoolbar">
<label>Nodeid : </label>
<input type="text" id='nodeid_cb'>
</div>
when I use the nodeid_cb on select and reload with new url. the headers squished together and the column widths were jacked up.
If I switch to a div and create the table programatically
$('#NodeidConstraints').datagrid({
fit:true,
title:'Constraint List by Nodeid',
toolbar:'#nodetoolbar',
onClickRow:onClickNodeidConstraints,
url:'./scripts/constraintsbynodeid.php?nodeid=AEC',
columns:[[
{field:'constraintname',title:'Constraint Name',width:250,align:'left', sortable:true},
{field:'factor',title:'Factor',width:35,align:'right',styler:stylefunction3, sortable:true},
{field:'tradedate',title:'Last Date',width:65,align:'left',styler:stylefunction3, sortable:true}
]],
onLoadSuccess:function(){
}
});
Then I don't have any issues with headers squishing up next to each other. and the column widths are correctly placed.
So I have worked around this, but it is definitely a pretty annoying bug
here is what it looks like. check out the headers. yuk
