Resizable Gridview columns using javascript

Question

I want to Resize Gridview columns using javascript. Below is an example.

Answer 1

I would recommend using jQuery if you want to do this yourself. You can grab the click event of the header row (or wherever you want), and then you can use the x/y of the mouse to drag a line. Once the mouse is released, you can troll through the table and reset the width of the 's.

Otherwise, there are several JavaScript table controls on the internet that you could use.

Answer 2

You can try open-source project ASP.NET CoolGridView control. It works well with IE 6/7/8, Firefox 3.0 / 3.5, Safari and Chrome. Supports resizable columns and fixed headers.

http://johnsobrepena.blogspot.com/2010/02/coolgridview-february-2010-release.html

Answer 3

I think this plugin does what you requested http://www.ita.es/jquery/jquery.grid.columnsizing.htm

Though I would suggest checking out this customizable jQuery based grid aswell http://www.trirand.com/blog/

Answer 4

The example you are refering to is using ExtJS it looks like. There's also jqGrid (an extension to jQueryUI), and others. If you are looking for an ASP.Net Ajax grid control there are several options from many different component vendors (Component One, Infragistics, DevXPress etc).

I'm only presuming here that you want a server-oriented Grid component because of the term "GridView" in the question. I would suggest searching for: "ASP.Net Ajax" grid control. This will give you results that may best suit your needs.