Grid columns headers have no width on refresh

[severin2]

We have an app where we change the columns of the grid often, we do this by building a list of columns from the data property keys.

1. click the 'data set 3' button, observe that data set 3 is displayed and its columns are correctly drawn
2. click the 'data set 2' button, observe that data set 2 is displayed and its columns are correct
3. click the 'data set 1' button, observe that data set 1 is displayed but its column headers have no width and overlap
4. notice that now switching between 'data set 1' and 'data set 2' will not fix the headers, but switching to 'data set 3' will (presumably because the significant change between the columnDefs?)

plunker example: http://plnkr.co/edit/RDEC8e?p=preview

I've noticed that in our app, the column headers get classes dynamically added to them like .grid1416592787863 .ui-grid-coluiGrid-082 and on the columns that are correctly drawn these classes are what gives the headers their width and on the columns that are drawn incorrectly they do not.

I am experimenting with using a custom headerTemplate to enforce the header width but I am still working on getting the header to play nice with the rest of the grid's concept of the column width.

[PaulL1]

I think you're correct that the grid is deciding the columns are the same and (at least partially) trying to reuse the previous column def. I think that's a bug, but will require some diagnosis.

In the interim, you can work around this by emptying the column defs, using an interval to wait for a digest cycle to run, then repopulating them, like this: http://plnkr.co/edit/5oKw1m2CBM4iCjTzu6tI?p=preview

[severin2]

Very cool, thanks for the workaround.

[alexandery]

@PaulL1 - I'm glad I found this thread with a work-around for the problem as I was dire to have it working. I would highly suggest to make this piece of knowledge available on the Tutorial pages until it gets fixed. I have actually used $timeout instead of $interval to achieve the same result:

$timeout(function() {
    $scope.grid.config.columnDefs = columnDefs; // update grid columns
    $scope.grid.config.data = results; // update grid data
});

As a side note. There was another issue sort of related to column replacing. If you configure your grid with:

enableRowSelection: true,
enableRowHeaderSelection: true,
multiSelect: true,

and then decide to replace columns and data in the grid, then the viewport would get pushed by the vertical bar with checkmarks below. There were 2 solutions I found to this:

• Overwrite grid CSS

.ui-grid-viewport {
     width: auto !important;
}

• Or wrap the grid into a div with

position: relative;

Hope this helps someone.

[PaulL1]

I think this will (hopefully) get resolved when @c0bra deals with generating/using new UIDs for columns #2364 #1948

[abhishekam]

This is so way too cool - I was completely lost the whole of Sunday night trying to get this to work... This thread definitely needs to be made popular!!!

[c0bra]

Looks like this is working properly so I'm going to close. If there's any further issues please file a new ticket, thanks!

[settysreekanth]

My apologies to comment on closed issue, however I am facing this issue still. Any suggestion ?

I am using ui-grid version v3.0.0-rc.21

[settysreekanth]

Ignore my previous comment.

Resolution: Changing ColumnDefs to have "name" instead of "field" solved the issue. Not sure of root cause though.

[firstpin]

how to give array data into
New issue
Grid columns headers have no width on refresh

[allanelder]

Yup. I'm getting the same issue as firstpin; tried the resolution on here to no avail.