2012
06.22

Solving Ext.NET GridPanel AutoExpandColumn Horizontal Scrollbar Bug

Posted by / Category: Programming / Tag: ,  / Add Comment / 355 views

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!

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

 

Incoming Search Term

ext net how to edit gridpanel data and refresh, how to add horizontalscroller to EditorGridPanel using its listeners, horizontal scroll bar issue in editorgridpanel, gridpanel autoexpandcolumn all columns, grid ext net, extjs grid not scroll horizontal, extjs grid column width autoexpandcolumn, extjs form vertical scroll, ext net why gridpanel is showing horizontal scrollbar, ext net opinion, multiple autoexpandcolumn ext net

Advertise Here

 

No Comment

Add Your Comment

Your Comment