Is there a way to freeze columns in the CGridView widget? Ideally, I’d like to freeze the first 3-4 columns.
Is there a way to freeze columns in the CGridView widget? Ideally, I’d like to freeze the first 3-4 columns.
hi
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 ;
left:0
Then
position:absolute
left:50px;
but that could get messy quickly.
here are some links i found quickly
http://handsontable…demo/fixed.html
http://www.imaputz.com/cssStuff/bulletVersion.htm
lhttp://jsfiddle.net/emn13/YMvk9/
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.
<style>
.stick-relative{
position: relative;
background-color: lightgrey;
color: black;
}
</sytle>
<script>
$(document).ready(function(){
$(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(){
$(this).addClass('stick-relative');
$(this).css('left',left);
});
}
else
{
$('table td:nth-child(-n+'+no_columns_to_stick+')').each(function(){
$(this).removeClass('stick-relative');
});
}
});
});
</script>
Thanks
Imran