Fixed Header Row

[subMember]

Hi,

I have a grid that has 100% width and height to fit the dontainer div. The container div has its own scroll bar if it does not fit the screen. I want to have the grid’s header to be fixed as a reference for the user. How can I achieve this. I see the demo sample have fixed header and grid has its own scroll bar. I removed the height of 100% and still can not see the header as fixed. Please guide me how do I have the header row fixed with grid of 100% height and width.

$(‘GridId’).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
source: dataAdapter,
theme: ThemeName,
/* the status image is 76px height… */
rowsheight: Names.GridRowHeight,
autoheight: true,
altrows: true,
sortable: false,
selectionmode: ‘singlerow’,
columns: [
{ text: ‘Name’, datafield: Names,width: 9, sortable: false },
{ text: ‘Status’, datafield: Status, renderer: columnrenderer, width: 125 }
]
});

[Peter StoevKeymaster]

Hi,

When autoheight is true, then the Grid’s height = sum of all rows height and it will not display vertical scrollbar. So in such scenario, you cannot have a fixed header as the scrolling is performed by the browser, not by the Grid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[subMember]

Thanks for the reply. It fixed the issue as per my expectation of the fixed header. Now the grid header is fixed on scrolling after removing autoheight = true. However it introduced two new issues.

1. I have a first column with the width of 9 as specified in the code sample above. On resizing the browser from min to max and vice versa the rest of the cells in other columns get shifted to the right. This did not happen when I had autoheight set to true. I even tried to cleared the datafield value to display blank. The cells from 2nd colums shifts to the right on resizing. The only way to fix this issue was to increase the width of the column to 25. Anything less than that value shifts the cell. But my requirement is to have a very slim column with the width of 9. How can I achieve this?

2. Upon resizing the window from max to min and again from min to max the grid vertical scroll bar area becomes a blank space when there is no need for scroll bar in the maximized size. If the refresh the page then the blank space goes away. How do I fix that?

I truly appreciate your help. Thanks again!

[Peter StoevKeymaster]

Hi,

1. The minwidth of the column is 25. If you want to set it to 9, then you should set the minwidth to 9, too.
2. Please, send a sample which demonstrates the behavior so we can see it. In addition, make sure that you use ver. 2.9

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[subMember]

Thanks for the suggestion.

1. I tried to set the min-width:9px!important; for the .jqx-grid-header and .jqx-grid-column-header. But it does not override.

It seems like this.minwidth is a private property of the jqxGridColumn in the javasript and not exposed as a property to set. If I dont want to modify the Jqx Javascript for maintanance purposes, how do I set this value in our external javascript? Please suggest!

2.I will prepare a sample to demonstrate the second issue and post it.

[Peter StoevKeymaster]

Hi,

– What I meant is to set the “minwidth” property of the Grid’s column during the initialization i.e where you initialize the Grid’s columns array.
– I do not suggest you to make any CSS changes in the jqx.base.css. If you want to change Colors or Fonts, create a new Stylesheet and apply it in the way demonstrated in the Help Docs and Theme Builder.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts