Hi again,

just to clarify, above i was referring to the case when no column has a specific width applied, and you are only setting "defaultColumnWidth" in px. If you have some columns with percentage width defined, and some columns don't have any width set, and at the same time you have defaultColumnWidth in px, and percentage width for the grid, this combination will work fine. It will just make the columns that don't have width be 100 px, and then only the other percentage columns will resize when the grid resizes. I suppose that's what you are probably trying to achieve?

Thank you, Angel

Hello,

If you have more questions about this issue do not hessitate to ask.

Issues I have with Angel's proposed solution are:

a) I have a variable amount of columns as a user can select up to 40 columns for this grid, and

b) My grid has a percentage width (100%) which is variable

so it is very hard for me to work out the width for each column so that it divides evenly in the grid width.

Hi,

In that case is it necessary to set a defaultColumnWidth? I mean you can let the columns without a width, and they will resize to accomodate the data contents. Does this work for you?

thanks,

Angel

Hello

Has any work been done on the feature request? Has it been implemented?

We have a very similar issue like the one described in this thread. We are creating an igGrid with a variable number of columns. We want to have the headers fill the horizontal space when 'number of columns' * 'fixed width' is less than the grid width or give them a fixed width when it is over the grid width.

When instantiating the grid we're using the following settings:

responseDataKey: 'd.results',
width: '100%',
defaultColumnWidth: "200px",
height: '450px',
dataSource: self._options.requestGUID,
fixedHeaders: true,
autoGenerateColumns: false,
autofitLastColumn: true,

and the following features: Paging, Filtering, Sorting, Tooltips, RowSelectors, Selection.

Column options are recieved from an AJAX call before instantiating the grid: 

$.when(headerDeferred, igDeferred).done(function (tableSchema) {

     if (tableSchema != undefined && tableSchema.length && tableSchema.length > 0) {

         var headerInfo = [];          

         tableSchema.forEach(function (e, i) {

             headerInfo.push({

                 headerText: e.title,

                 key: e.id,

             });

         });

         options.columns = headerInfo;

      }         

      $(self.options.checkboxGridSelector, self.element).igGrid(options);

});

Edit: I forgot to add the version we are using, it's 13.2.20132.2055

Regards, Mario

I'm afraid I can't test that. However I've noticed in your sample there is no filtering.

My test scenario without filtering behaves as expected, so maybe you can replicate the problem if you add filtering to your sample?

Hello,

Please take a look at the attached sample created and tested via version 11.1.20111.1014. It was tested under FF 5,7 and IE 9 and provided no missbehavior like described from you. Please take a look at the sample and modify it if needed in order to reproduce the behavior you are facing. The grid contains 3 colimns with 200px width and the width of the grid is set to 100%

Hi,

i forwarded your request to Development Support. I am sure this should be working in all scenarios, but depending on the version you're using you may experience this in specific cases. 

Thank you,

Angel 

I have the same problem with header columns not aligning to data columns.

It is interesting to note that this only happens in Firefox (tested on 5.0.1).

My scenario is a grid with a few columns, with each column a fixed width in pixels.

The grid has a width larger than the sum of all columns: this I do setting it to 100%.

When stretching the FF browser window, header columns remain the fixed width and data columns stretch together with the window. :(

When stretching the IE browser window, header and data columns stretch together with the window (OK).