igGrid column auto width

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.

 

I am stuck. Please respond as quickly as possible.

 

 

Hi,

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:

Code Snippet

1. <style>
2.     #grid1
3.     {
4.         table-layout: auto!important;
5.     }
6. style>

 

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.

Code Snippet

1. @(Html.Infragistics().Grid(Model.Measures).ID("grid1")
2. .AutoGenerateColumns(true)
3. .FixedHeaders(false)
4. .Features(features => {  
5.     features.Paging().PageSize(50).Type(OpType.Local);
6.     features.Resizing(); })
7. .Height("400px")
8. .DataBind()
9. .Render())

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:

Code Snippet

1. <style>
2.     #grid1_scroll
3.     {
4.         overflow-x: auto!important;
5.     }
6. style>

4.(Optional) Set cell contents to fit on one line – If you want cells contents to fit on one line use the following CSS:

Code Snippet

1. <style>
2.     #grid1>tbody>tr>td
3.     {
4.         white-space: nowrap;
5.     }
6. style>

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.

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”)

.DataBind()

.Render() )

 

Please let me know if I am missing anything here.

Hi,

Try to turn off Virtualzation. It seems to be the cause of the problem.

 

Note: You already have Paging defined, so Virtualization is not needed.

 

Best regards,

Martin Pavlov

Infragistics, Inc.

The grid header size is fixed. But I am facing an issue with pager.

If am adding type to pager, the grid is not getting rendered at all:

features.Paging().PageSize(50).Type(OpType.Local); 

 

 

Hi,

1.Did you get any errors in the JavaScript console?

2.What build and version of the NetAdvantage for jQuery do you use?
3.What is your exact grid configuration at the time this error appeared?

 

Best regards,

Martin Pavlov

Infragistics, Inc.

Hi Martin,

Seems like some problem with browser cache. I restarted my machine for some issue and now pager is working fine.

 

But now I got into another problem. The grid headers are getting scrolled. I want them to be fixed and visible always, but they get scrolled along with records.

Is there any way to stop it ??

 

Hello Dhanraj,

As explained here – 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.

Hi,

 

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,

Martin Pavlov

Infragistics, Inc.

Thanks a ton Martin.

Hi Martin, Your responses were indeed helpful. Thanks a lot.

you said its working .

could you please provide snippet. I have done in same suggested as in forum but its not working