View Full Version : YAHOO.ext.grid.DDGrid styling problems

17 Jan 2007, 2:40 AM

I was trying to implement a very simple case of DDGrid and ran into a couple of problems, which I am sure are a result of my lack of understanding of the underlying mechanisms and styles of the grid, but I would greatly appreciate any pointers in the right direction. Here is my problem:

I am trying to create a dirt simple drag and drop between 2 grids. Each grid has only 1 column.

Here is how I created the grids: (the same approach for second grid)

var dataModel = new YAHOO.ext.grid.DefaultDataModel([["Item 1"],["Item 2"],["Very long item 3 name"]]);

var columnModel= new YAHOO.ext.grid.DefaultColumnModel([{header: 'ColumnName'}]);

dgrid = new YAHOO.ext.grid.DDGrid('elementId', dataModel , columnModel);

This actually works quite nicely drag-and-drop-wise. After a long session with grid.css I managed to style things more or less the way I want them, but there was still the problem that the "very long item 3 name" was cut off at a certain point (I think there is a width somewhere that defaults to 100px or so, but I can't find where), so it looked like "very long ite..." instead of the full name.

after reading up on the documentation, I came up with this:


it now actually figures out the correct width to display the very long item name fully on rendering. But then I enabled trackMouseOver and it snaps back to it's short version whenever I mouseover over it or select it to drag it to the other list.

I also noticed that the "column seperator" slider in the header which you can use to resize columns is still there, despite the columnDataModel having only 1 column (I expected it to go away). Somehow I feel these 2 issues are related, but I can't find a way to make the column seperator slider disappear and have the very long item names displayed fully throughout without snapping back to their default shorter width.

Am I missing something really simple? Can anyone drop a hint of what that might be?

Thanks in advance!