Solving Ext.NET GridPanel AutoExpandColumn Horizontal Scrollbar Bug

After upgrading to Ext.NET 1.4, I found out a weird bug with GridPanel. I have a GridPanel which is inside a Container. I set the Container’s layout to FitLayout because I want the GridPanel to occupy all the available space. To ensure that the width is fully used, I set the GridPanel’s AutoExpandColumn property to one of the column.

With that in mind, the GridPanel is expected not to have a horizontal bar. But somehow the horizontal scrollbar appears.

It gets worse when I scrolled it right until the end, the GridPanel’s content is now misaligned to its header.

This problem will not happen if I am not using the AutoExpandColumn property and set the columns width within the available space. I also found out that the horizontal scrollbar will disappear if I manually reduce the size of any column.

With that, I can positively identify that the bug lies in the way AutoExpandColumn works. To solve this, I could either dig deep to Ext.NET internals, or I just use a “duct tape solution”.

Due to time constraint, I’ll just use the “duct tape” solution for now. What we’re going to do is to reduce the column’s width after the data is loaded. I recommend to choose the column that is used as AutoExpandColumn as the target.

Assume that you already have the GridPanel, we will handle the Store’s Load event with fnResizeColumn function.

<ext:GridPanel ButtonAlign="Center"  
	ID="gv" runat="server" Header="false" 
	Border="false" AutoExpandColumn="Title">
	<Store>
		<ext:Store ID="ds" runat="server" RemoteSort="true" 
		UseIdConfirmation="true" AutoLoad="true">
			<Proxy>
				<!-- 
					..... SNIP .... 
				-->
			</Proxy>
			<Reader>
				<!-- 
					..... SNIP .... 
				-->
			</Reader>
			<BaseParams>
				<!-- 
					..... SNIP .... 
				-->
			</BaseParams>			
			<Listeners>				
				<Load Fn="fnResizeColumn" />
			</Listeners>
		</ext:Store>
	</Store>
	
	<!-- 
		..... SNIP .... 
	-->
	
</ext:GridPanel>

The fnResizeColumn method is quite simple.

var fnResizeColumn= function(obj) {
	var colModel = gv.getColumnModel();	
	//reduce the Column width by 50 pixels
	colModel.setColumnWidth(1, //zero-based column index
		colModel.getColumnWidth(1) - 50);            
	gv.doLayout();
}

There you go, fast and easy!

I hope it helps. Cheers!

Solving Ext.NET GridPanel AutoExpandColumn Horizontal Scrollbar Bug, 5.0 out of 5 based on 1 rating