Hi,
I am using MVC 3 and Infragistic Grid for showing data.
@(Html .Infragistics() .Grid<Measurement>(Model.Measures) .ID("wbGrid")
.AutoGenerateColumns(true)
.Features(features => { features.Paging().PageSize(50).TotalRecordsCount(measurements.Count); features.Resizing(); })
.Height("400px")
.DataBind()
.Render() )
I have records with over 100 columns. I want the columns to increase width as per the text.
But the columns are getting shrinked. Here is screenshot for reference https://www.dropbox.com/s/5n1588q23swarvj/igGrid_Column_Width_Issue.png
I am stuck. Please respond as quickly as possible.
By default igGrid renders table with style: "table-layout: fixed" and in this mode it is not possible to achieve auto column width. Following are the steps which you need to execute in order to achieve auto column width:
1.Set table-layout to auto. This way the table layout algorithm will take into account the cells contents.
If your grid id is #grid1 then your CSS should look like this:
2.Set igGrid.fixedHeaders to false - by default igGrid.fixedHeaders is set to true so the headers will be always visible. However in this configuration headers are not in sync with table data so we need to turn off this functionality.
3.Enable horizontal scrolling of the grid - at this point we can see the data of the first cells, but there is no horizontal scrollbar. Here is how to enable it:
4.(Optional) Set cell contents to fit on one line - If you want cells contents to fit on one line use the following CSS:
Let me know if you need further assistance.
Hope this helps,
Martin Pavlov
Infragistics, Inc.
Hi Martin,
I have added the CSS mentioned by you, but that only solves the problem partially.
The grid Body is now showing auto column cell data, but the headers are still shrinked.
Here is the screenshot for your reference https://www.dropbox.com/s/9velwb98zuu746i/igGrid_Header_Problem.png
Additionally as suggested by you I have made FixedHeaders = false :
@(Html .Infragistics() .Grid<Measure>(measurements.AsQueryable()) .ID("mGrid").AutoGenerateColumns(true)
.FixedHeaders(false)
.Features(features => { features.Paging().PageSize(50).TotalRecordsCount(measurements.Count);
features.Resizing();
})
.Virtualization(true)
.VirtualizationMode(VirtualizationMode.Continuous)
.Height("600px")
Please let me know if I am missing anything here.
you said its working .
could you please provide snippet. I have done in same suggested as in forum but its not working
Hi Martin, Your responses were indeed helpful. Thanks a lot.
Thanks a ton Martin.
I actually disabled fixed headers(headers to be always visible) on purpose. That's because when fixed headers are enabled they are rendered in a separate TABLE element and there is no easy way to determine each header width. The result is that the grid header is out of sync with the grid data (which is rendered in a separate table).
When fixed headers are disabled the grid is rendered in one table (headers + data), thus the data and headers are in sync.
I cannot think of a way to make grid headers fixed and sync them with grid data columns.
Best regards,
Hello Dhanraj,
As explained here - http://help.infragistics.com/NetAdvantage/jQuery/2012.1/CLR4.0?page=igGrid_Columns_and_Layout.html – when Fixed Headers are disabled column headers will be scrolled with the columns.
This is expected behavior.
If you need additional information let us know.