Freezing Columns In Cgridview

Is there a way to freeze columns in the CGridView widget? Ideally, I’d like to freeze the first 3-4 columns.


what means??

lol … I never heard the term "freeze columns" before would you dare to explain

Yes, I “dare” to explain :)

Open up a google spreadsheet - go to the "View" menu, and you can see the first two entries "Freeze Rows" and "Freeze Columns" (it is also available in Excel). What it does is that it keeps the column (or row) in place, when you scroll. So if you have 50 columns, you can put the identifying column as the first one (name, id etc) and keep it in place - which makes reading of the table easier.

Another example is here - demos . telerik . com/kendo-ui/grid/frozen-columns

(remove the spaces in the link, I can’t add links as my account is new)

okay genius that is not the right term to describe fixed columns/header/sidebar

if thats what you trying to achieve you can do it in css

.grid-view .items {

	position: relative;


.grid-view thead {

	position: absolute;

	width: 100%;

	display: table;


note: i did not test the code change it accordingly

It is the right term - used by MS Excel, Google spreadsheets, other JS libraries (kendo UI etc) etc - I’m not sure why you keep saying this, even after I gave you links to check.

Thank you for the code - I’ll try it out on Monday when I get to work.

That won’t work for freezing the columns, that will only make the head fixed. Freezing the head or just one column is quite easy, however you might want to consider using a jquery/js plugin because you are freezing multiple columns. To get accurate widths/heights if your table is responsive… you would need a way to calculate them and you’d have to get real creative with straight css (don’t even know if it’s possible w/o some js/jquery). You could do something like:

position:absolute ;





but that could get messy quickly.

here are some links i found quickly



Also, it is called freeze panes, freeze columns, freeze header, freeze multiple columns in any spreadsheet program i.e. MS Excel, Google Docs, Open Office. In web tables it’s call either fixed column / row/head or freeze columns/rows/ panes/header they are synonymous with each other.

I’ve used handsontable before, but the current project is Yii - there are too many places where CGridview is used, and I don’t have the option of changing it. I was looking for a Yii plugin, that can help me do it.

I’ll look into the other links that you listed - thank you

Although late with the reply, the following works. Hope it helps others.



    position: relative;

    background-color: lightgrey;

    color: black;





	$(window).scroll(function () {

	    if(window.scrollX>110) //110 is the amount of scroll after which the cols should stick


	    	left  = $(window).scrollLeft()-80; //80 is the margin from left of fixed columns

	    	no_columns_to_stick = 4 //stick first 4 columns

	    	$('table td:nth-child(-n+'+no_columns_to_stick+')').each(function(){







	    	$('table td:nth-child(-n+'+no_columns_to_stick+')').each(function(){