Evaluating easyui so still new to this...
I have a page that uses a layout where the center panel contains a data grid. As long as I don't include anything above that layout, all the rows in the data grid are displayed. However, I have other pages where I need to have the layout and data grid in a tab panel. Above the layout is a panel that holds several menu buttons. When I do this, the last few rows of the data grid are not viewable. The scroll bar, if it appears, does not scroll far enough to display all the rows. The data grid does know the correct number of entries, it just doesn't show those last rows.
I also run into this with a tree and a treegrid as well. If I have any panels or anything for that matter, above them, the last few nodes/rows are cut off. I'm clearly missing something here...
Here is how I have the html setup.
<body>
<br>
<span style="font-weight: bold;">DETAIL STATEMENT:</span>
<span id='FileName'></span>
<br>
<br>
<div id="tabPanel" class="easyui-tabs" data-options="plain:true,border:false,fit:true">
<div id="Summary_tab" title="Summary" >
<div class="easyui-panel" >
<div id="Summary_toolbar"></div>
</div>
<div id="Summary_layout" class="easyui-layout" data-options="fit:true">
<div data-options="region:'center',fit:false,border:false,plain:true,split:false">
<div id="Summary_datagrid" ></div>
</div>
<div data-options="region:'west',title:'Asset Instance Types',split:false,collapsed:false,collapsible:true" style="width:200px;">
<table style="width:200px">
<!-- some simple text goes here. Removed for clarity. -->
</table>
</div>
</div> <!-- Summary_layout -->
</div> <!-- Summary tab -->
The summary datagrid is setup in javascript here:
// Setup the datagrid for the Summary tab.
$('#Summary_datagrid').datagrid({
url: FilePropertiesUrl,
method: 'get',
//title: // Not sure what to put here, if anything?
fit: true,
//width: 700,
//height: 250,
height: 'auto',
fitColumns: false,
singleSelect: true,
striped: true,
pagination: true,
pagePosition: 'top',
pageList: [10,20,30,40,50,100],
pageSize: 10,
layout: ['list','sep','first','prev','next','last','refresh','manual','links','info'],
loadMsg: 'Accessing Bank',
rownumbers: true,
frozenColumns: [[]], // Important to clear if other views used it.
columns: [
[{
field: 'Name',
title: 'Property',
sortable: false
},
{
field: 'Value',
title: 'Value',
sortable: false
}
]
],
onRowContextMenu: function(e,index,row) {
e.preventDefault();
},
sortName: 'Name',
sortOrder: 'asc',
onLoadSuccess: function() { // Says it has a data parameter but...
log.debug("Data successfully loaded.");
stopBusySpinner();
},
onLoadError: function() {
log.error("Data failed to load in the grid.");
stopBusySpinner();
}
});
I've tried many different permutations of properties but the only way I can get all the rows to be displayed is to remove the tabs and the panel that hold the menu buttons.
Can someone point me in the right direction?
Thanks in advance!
Bruce