Print Page - Dynamic Table/Column Width Resizing

Good day,

I'd like my table to resize according to the browser's viewport width. The default behavior is that the table takes on whichever width is available on load time, but then never resizes again.

I've tried setting fit="true". This makes the table dynamically resize, but it also makes it not display any records. Only the header & toolbar are shown. The api call to fetch json data is successfully made, but the records aren't loaded into the datagrid. There's nothing to be shown because the grid's html does not contain the records.

Also, I am trying to get fitColumns to work. From other forum threads, I have learned that you've got to set the width on columns in order for fitColumns to work. I don't understand why, because the whole idea of fitColumns is that it fits the columns automatically.

Anyway, I'm experimenting with it. When I show only 3 columns that have width:1 (because width:0 doesn't work well), the datagrid does a decent job of making them occupy (almost) the whole available width of the browser viewport. When I do this with more columns, at some point the entire fitColumns functionality just stops working. The columns only take up less than half of the viewport and they aren't even wide enough to display the data they contain.

When I set width:100 on all the columns, they are spread out across the viewport pretty well, with a little bit of space to spare on the right side. When I stretch the browser and reload, again the columns take up the whole space. But because I've set the width, the columns aren't really autofitting at all. The column with IDs is far too wide. The column with lengthy email addresses isn't showing all of its data without being manually widened.

When dynamically resizing, columns should take on widths that is proportional to the length of the data they contain. Not setting any width so far works the best. But, according to the documentation, not setting a width will cause worse performance. And I can notice this when rejecting/accepting 1 record change in only 6 records.

So why do I have to set width to get fitColumns to do anything? And can I set the width to be min/max/auto?

What's the best strategy here for getting the datagrid and the columns to resize dynamically and correctly when the user changes the browser viewport?

My code:

Code:

<table id="dgAccounts" class="easyui-datagrid" title="Accounts"
		multiSort="true"
		rownumbers="true"
		pagination="true"
		fitColumns="true"
		fit="false"
		data-options="
			toolbar:'#tbAccounts',
			singleSelect:true,
			remoteSort:true,
			collapsible:true,
			url:'api/admin/EasyUI_GetAccounts',
			method:'post',
			onClickCell: window.AdminAccounts2.onClickCell,
			onEndEdit: window.AdminAccounts2.onEndEdit
		">
	<thead>
		<tr>
			<th data-options="field:'id',halign:'center',sortable:true,width:100">ID</th>
			<th data-options="field:'email',halign:'center',sortable:true,editor:{type:'textbox'},width:100">Email</th>
			<th data-options="field:'username',halign:'center',sortable:true,editor:{type:'textbox'},width:100">Username</th>
			<th data-options="field:'role',halign:'center',sortable:true,formatter:window.AdminAccounts2.formatterRole,width:100,
				editor:{
					type:'combobox',
					options:{
						valueField:'role',
						textField:'roleName',
						method:'get',
						url:'api/admin/EnumValuesNames_Role',
						required:true
					}
				}">Role</th>
			<th data-options="field:'firstName',halign:'center',sortable:true,editor:{type:'textbox'},width:100">First Name</th>
			<th data-options="field:'lastName',halign:'center',sortable:true,editor:{type:'textbox'},width:100">Last Name</th>
			<th data-options="field:'address',halign:'center',sortable:true,editor:{type:'textbox'},width:100">Address</th>
			<th data-options="field:'zipcode',halign:'center',sortable:true,editor:{type:'textbox'},width:100">Zipcode</th>
			<th data-options="field:'phone',halign:'center',sortable:true,editor:{type:'textbox'},width:100">Phone</th>
			<th data-options="field:'company',halign:'center',sortable:true,editor:{type:'textbox'},width:100">Company</th>
			<th data-options="field:'verified',halign:'center',sortable:true,width:100">Verified</th>
			<th data-options="field:'createdOn',halign:'center',sortable:true,width:100">Created On</th>
			<th data-options="field:'modifiedOn',halign:'center',sortable:true,width:100">Modified On</th>
		</tr>
	</thead>
</table>

<div id="tbAccounts" style="height:auto">
	<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="window.AdminAccounts2.append()">Append</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="window.AdminAccounts2.removeit()">Remove</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="window.AdminAccounts2.accept()">Accept</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="window.AdminAccounts2.reject()">Reject</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="window.AdminAccounts2.getChanges()">GetChanges</a>
</div>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Jay27 on November 03, 2018, 10:24:06 AM