Grid content is not extending to full width

[rskbuvanSpectator]

Hi,

I usually provide grid widths & heights in percentage because my application should comply with fluid widths & heights relative to the available real estate.

After upgraded to version 3.2.2, the jqx-grid-header is occupying the full width but jqx-grid-content > contenttable is creating white space at the right-hand side.

Sample grid initialization as below,

$("#userSummaryGrid").jqxGrid(
{
	width: '100%',
	height:'100%',
	source: dataAdapter,
	theme: theme,
	showfilterrow: true,
	filterable: true,
	sortable: true,
	altrows: true,
	showfiltermenuitems:false,
	enabletooltips: true,
	rowsheight:33,
	columnsmenu: false,
	editable: true,
	selectionmode: 'none',
	columnsresize: true,
	columns: [
		{ text: 'First Name', editable: false, datafield: 'firstName',filtertype: 'textbox', width: "12%",minwidth: 115 },
		{ text: 'Last Name', editable: false, datafield: 'lastName',filtertype: 'textbox', width: "12%",minwidth: 115},
		{ text: 'User Id', editable: false, datafield: 'User Id',filtertype: 'textbox', width: "16%"},			  
		{ text: 'Status', editable: false, datafield: 'status',filtertype: 'checkedlist', cellsformat: dateFormat, width: "8%"},
		{ text: 'Authorization', editable: false, datafield: 'authoriser', filtertype: 'checkedlist', width: "8%"},
		{ text: 'Category', editable: false, datafield: 'admin', filtertype: 'checkedlist', width: "8%"},			  
		{ text: 'Last Action', editable: false, datafield: 'lastAction',filtertype: 'checkedlist', width: "8%",
		{ text: 'Updated By', editable: false, datafield: 'displayValue',filtertype: 'textbox', width: "8%"},
		{ text: 'Updated On', editable: false, datafield: 'updatedDate',filtertype: 'date', cellsformat: dateFormat,width: "12%"},
		{ text: 'Approval Status', editable: false, datafield: 'approved',filtertype: 'checkedlist', width: "8%", resizable: false}
	],
	ready: function () {
	}
});

Can anyone suggest me a solution?

Cheers,
Senthil

[Peter StoevKeymaster]

Hi Senthil,

If you experience some issue, then please share a sample which demonstrates an issue in http://jsfiddle.net.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mohamedazherParticipant]

Hi,

I am facing a similar issue, trying to set 100% width on the grid causes the scrollbar on the right to extend leaving whitespace between the columns and the scrollbar.

You can check this fiddle as an example.
http://jsfiddle.net/mohamedazher/3m476/

-Mohamed Azher

[Peter StoevKeymaster]

Hi Mohamed,

You have Fixed Columns Width. The “width” property of the columns specify their width. If you want a column to resize itself to the remaining available space, don’t set its width property and leave it to be automatic. Another approach is to use “%” for your column widths. See the updated version of your sample: http://jsfiddle.net/HhzE2/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mohamedazherParticipant]

Hi,

Thanks a lot, that makes sense!

-Mohamed Azher

[Author]

Posts