That helped some. Now I can specify a 100% width for the table, the content shows up (instead of the blank panel), and the content grows/shrinks when the panel resizes.
However I still have a few issues:
(1) The text in the table is not wrapping. Instead, it is just getting cut off, even though I specified "nowrap: false".
(2) If the content won't fit inside the panel width even AFTER wrapping, it should stretch to the minimum width that will fit the content, and should show a horizontal scrollbar in the panel. I tried setting "fitColumns: false", but when I do that, the table content doesn't show up at all -- just the header row shows.
(3) The rows are not alternating background color, although I set "striped: true".
I must be misunderstanding the settings. Could you look at my settings and tell me what I can do to make the content wrap, show a horizontal scrollbar if necessary, and alternate row colors?
I really appreciate your help!
<script type="text/javascript">
$(document).ready(function() {
$('#test-datagrid').datagrid({
fitColumns: true,
striped: true,
nowrap: false,
sortName: 'released',
sortOrder: 'desc',
width: '100%',
columns:[[
{field: 'checknum', title: 'Check Number', width: 110, sortable: true, resizable: true, align: 'left'},
{field: 'status', title: 'Status', width: 60, align: 'center'},
{field: 'period', title: 'Period', width: 140, align: 'right'},
{field: 'total', title: 'Total', width: 100, align: 'right'},
{field: 'date', title: 'Date', width: 110, align: 'right'},
{field: 'released', title: 'Released', width: 140, align: 'right'}
]]
});
});
</script>