Hi,
Resizing doesn't work when headers are hidden. My situation is that I have a hierarchical grid where the parent and child columns are the same. I hide the child's headers and resize the child columns by handling the "resized" event. If the child headers are visible, it works but if they are not resizing doesn't work.
The error I get is:
Cannot read property 'offsetWidth' of undefined
Looking at infragistics.ui.grid.resizing.js, the culprit is this code:
if(this.grid._isMultiColumnGrid){ headers=$(this.grid._headerCells); headerWidth=$(headers[columnIndex])[0].offsetWidth}
If the headers are hidden, this.grid._headerCells returns an empty array. Is there a workaround for this?
Or better yet is there a way to keep parent and child column sizes in sync?
HI,
If this part of the code throws an error you probably use MultiColumnHeaders - is it possible to send us a sampe(and if possible dataSource you use).
We can fix it for the next Service Release if there is indeed a bug.
Thanks,
Miro
Yes, I'm using MultiColumnHeaders. Here's a sample of resizing that works when showHeader for the child grid is true and doesn't work when showHeader for the child is false. The same issue happens with column moving.
I have logged a bug in our internal system and this bug will be fixed probably for the next Service Release. So for now I can propose you a workaround. The idea is to set showHeaders to true(for the child layout) and at the same time on rowExpanding you can hide thead of all child bands(or the child bands you want). Please see the attached sample.
That is actually what I'm doing but am running into a similar problem when combining resizing and moving. Once I've expanded a row and moved a column, the resizing doesn't work anymore.
Please check my sample I have attached. Also with this sample you can make the same synchronization when moving columns between columns in child layout and root layout. What did you mean resizing doesn't work anymore - can you send a sample. By the way in the attached sample I have tested with enabling ColumnMoving and it seems to work - it doesn't throw a javascript error.
I just want to let you know that the issue you have reported to us has been fixed in the latest service release that can be found it in our website.
Please let me know if you need any assistance.
Ah. Great workaround! Thanks Miro
As I see this is a bug in the ColumnMoving(when child layout has Multi Column Headers).
For now one workaround is just to NOT use MCH in child layout(as I see you want headers for child layout to be hidden). You can try to define your layouts in this way
columnLayouts:[ { key: "Products", autoGenerateColumns: false, showHeader:true, columns:[ { headerText:'Abc', key:'Abc1' }, { headerText:'Description', key:'Description1' }, { headerText:'Name', key:'Name1' }, { headerText:'Quantity', key:'Quantity1' } ], features:[ { name: 'MultiColumnHeaders' }, { name:'ColumnMoving' } ] }
I will log in this issue as bug in out internal system and we will try to fix it for the next Service Release.
I've modified your sample slightly to show the problem. To reproduce:
1. Expand a row
2. Resize column "Abc"
3. Move column "Abc" to the right of the "Description" column
4. Resize column "Description"
Notice that the description column width doesn't change.