I have the following settings on my igGrid:
When I resize my browser window, the columns holding the data resize automatically to fit the width of the page, however the header columns don't. I end up with this:
Is this a bug that has been fixed in the upcoming service release or am I doing something wrong with my settings?
Hi,
Having width 100% for the grid and a fixed pixel defaultColumnWidth for the columns is not applicable/supported together. If you have width 100 % defined, basically you shouldn't have any fixed column width set, as it will not have any effect and will lead to side effects as the one described. Default column width basically means a fixed, same width, applied on all columns - which doesn't change whether you resize the browser or not. You can define percentage width individually for any column, and it will play nicely with 100 % on the grid, while you're resizing the browser. So you can have 10%, 20%, etc. defined individually for any column (just as an example).
Let me know if this helps. Thanks,
Angel
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.
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,
Unfortunately not. If I don't provide a default column width, it resizes the columns so that they all fit within the width of the grid (i.e. 40 super skinny columns).
What I really need is to be able to say that the minimum column width is 100px, and if the width of the grid is greater than the number of columns x 100px, then increase the column width of each column to evenly fill the grid width.
Hello,This is not a supported scenario from our control. If you want to see this feature in future versions of our controls I will log a feature request for you.
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%
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,
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).