dgrid header displayed on multiple lines instead of showing up the horizontal scrollbar

[uozznezz]

Hello,

I am experimenting a Nodejs project using dojo dgrid 0.3.12-dev on the client side.
The dgrid works fine when loaded as a stand-alone view, composed of a border container with a button toolbar in the top region and the grid itself in the center:
http://localhost:3000/otn-ws-webapp/wdm/pages/templateGrid/list.html

However, when the above page is loaded in the top region of another border container having a tab container in the center, the grid header wraps along multiple rows, instead of showing up a single header row with an horizontal scrollbar:
http://localhost:3000/otn-ws-webapp/wdm/pages/templateGrid/listWithView360.html

You see the code here:
https://github.com/uozznezz/asonWebClient

Download the code and run Nodejs:

node app.js

Then open the following URL in the browser:
http://localhost:3000/otn-ws-webapp/wdm/pages/templateGrid/list.html -> dgrid ok
http://localhost:3000/otn-ws-webapp/wdm/pages/templateGrid/listWithView360.html -> dgrid ko

Thanks
Giacomo

[uozznezz]

Hello,
my custom grid was inheriting the following modules: OnDemandGrid, Selection, Keyboard, ColumnSet, ColumnReorder, ColumnResizer, DijitRegistry.

I removed the ColumnReorder extension from the prototypal inheritance chain and the column header now is displayed correctly on a single row; the horizontal scrollbar also reappeared.

Could you figure out if the header wrapping problem with the ColumnReorder is due to a bug in the ColumnReorder code, or to an issue in my page layout?

Thanks
Giacomo

[ScottCybak]

I just ran into this same problem, i noticed that the claro stylesheet i had referenced was turning the headers into inline-block elements. the following css rule will get you up and running with your DND plugin

.dojoDndHorizontal th.dgrid-cell.dojoDndItem {
display: table-cell !important;
}

[kfranqueiro]

I was unable to get the asonWebClient repository you linked to up and running (mainly because I'm not sure what version of cometd you're using).

Based on what @ScottCybak has mentioned though, this sounds like something that we added overriding styles to dgrid for nearly 2 years ago. However, I can reproduce this issue if I explicitly load ColumnReorder.css ahead of Dijit's claro.css. I'm going to update that overriding style so that it is more specific to begin with, so that it will override regardless of order.

[AndrewHenryOttawa]

Hi Ken,

I am seeing a similar problem as Giacomo, The column headers on the grid end up all jumbled when a header cell is clicked on (to sort).

The grid is declared like so...
Grid = declare([OnDemandGrid, Selection, ColumnSet, ColumnReorder, DijitRegistry]);

When I remove columnReorder the headers behave themselves. We are using dojo 1.10.1 and dgrid 0.3.16.

[kfranqueiro]

@AndrewHenryOttawa, we instituted a more reliable fix after tagging 0.3.16 in e96de77, which is included in 0.4.0 and will be included in 0.3.17.

Can you try updating that selector locally to see if it fixes the issue in your case? If it doesn't, can you provide a gist of a test page to demonstrate it?

[AndrewHenryOttawa]

Thanks Ken,

I'll try your suggestion and see if it works out.

Is the release date for 0.3.17 known?

[kfranqueiro]

I'm not 100% sure yet but I would like to get it out this year if possible. :) We currently have one other item we definitely want to look at for it.

[AndrewHenryOttawa]

Good to know. Thanks.

[kfranqueiro]

Hey @AndrewHenryOttawa,

Just wanted to give an update since you asked - December has unfortunately(?) been more hectic than we'd expected on other fronts, so we'll likely be releasing 0.3.17 in January. Sorry for the inconvenience, but the dev-0.3 branch should be relatively stable - there are just a couple of pull requests for edge cases we're hoping to land.

[AndrewHenryOttawa]

Thanks Ken. I'll be looking out for it. Had too much on my plate myself.

[AndrewHenryOttawa]

Ken,

0.3.17 resolved our bug. Thanks.