Lareff
17 Jan 2007, 2:40 AM
Hi,
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:
dgrid.autoSizeColumns=true;
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!
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:
dgrid.autoSizeColumns=true;
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!