Moveable columns in the Grid

[Animal]

Is it planned to make columns moveable? I know this would be a heavyweight operation with dozens, possibly hundreds of SPANs being shuffled around the DOM tree, but users like it.

Another addition, would be to be able to hide columns. Perhaps a ContextMenu on the header wrapper whose MenuItems contain column name and a check boxe which you can check or uncheck to show/hide columns.

The actual showing and hiding is just style manipulation like resizing.

I'm hoping to store column choice, (Which are displayed, and in which order) back on the server, keyed against user ID, class name of what is being listed, and page URL, so that the user always gets back what they want.

[jack.slocum]

Hiding and showing columns is available now. It was one of the recent changes I deployed.


yourColModel.setHidden(1, true);


onHidden is an event on AbstractColumnModel model, along with a new function to implement isHidden(columnIndex) if you have a custom ColumnModel.

A context menu on the column header is indeed a good idea. The only prob I have with it are YUI menus are 41k and require container_core (another 66k) that to me is too big for a simple 1 level menu. I may end up using them anyway though because I want to get a release out soon and I don't think I will have time to write anything else. I will probably make them optional.

Moving Columns is definitely going to happen soon. No shuffling DOM elements either. The new absolute layout will make it as simple (and quick) as resizing a column. All I will need to do is change the left attribute on the column styles.

[Animal]

Nice idea about using absolute positioning. I was thinking of suggesting this so that then it would simply be changing a style to move columns, but it seemed a bit complicated to go to absolute positioning. Well done for following that through.

How will that affect scrolling though if each cell is fixed to an absolute position on the document? The ygrid-wrap-body must scroll up, down, left and right inside the ygrid-wrap independently of the main document.

Anyway, to column moving. If you move a column, it just moves where that column is shown right, it does not require the DataModel or ColumnModel to change - like Swing.

So is it possible to have the Grid keeps track of which actual model column is at which displayed index, and inquire about that?

I'm thinking of the concept of saving column positions between calls, and if the Grid can maintain a mapping in an array indexed by model column index, this would help.

So in a 5 colmn table, if you move the second column (index 1) to the left, you'd have:

[1, 0, 2, 3, 4]

If we could retrieve that from the grid, and save it, it then should be possible to use an array like that to set the displayed column order next time in.

myGrid.setColumnOrder([1, 0, 2, 3, 4]);

setHidden(colIdx, flag) is a method of the ColumnModel? How would my AspicioColumnModel then tell the view to do the hiding? Is there a CustomEvent it should fire to which the view subscribes?

[jack.slocum]

setHidden(colIdx, flag) is a method of the ColumnModel? How would my AspicioColumnModel then tell the view to do the hiding? Is there a CustomEvent it should fire to which the view subscribes?

Yes, see above about "onHidden" event.

Anyway, to column moving. If you move a column, it just moves where that column is shown right, it does not require the DataModel or ColumnModel to change - like Swing.

Exactly. That's the beauty of positioning them - it can be childNode index 2 but be displayed at index 0.

How will that affect scrolling though if each cell is fixed to an absolute position on the document? The ygrid-wrap-body must scroll up, down, left and right inside the ygrid-wrap independently of the main document.

All of the cells are positioned in a parent element (css class ygrid-body-wrap). Since that element is positioned as well, the cells are positioned on it's coordinate system, not the document.body's. This means when the grid scrolls, the wrapping element moves and the cells are just part of it so they move as well. It's pretty cool actually.

If we could retrieve that from the grid, and save it, it then should be possible to use an array like that to set the displayed column order next time in. myGrid.setColumnOrder([1, 0, 2, 3, 4]);

Like all the other column settings it will be on the ColumnModel. I am adding a property displayIndex. There will also be an event onDisplayIndexChange which you can subscribe to and implement saving of the users order. The user will be able to change the order, but also you could do it programmatically by calling colModel.setDisplayIndex(/*old*/1, /*new*/0); That will bump that column to 0 and adjust the remaining columns display indexes accordingly. And since it's on the ColumnModel, if you want to override the default logic it will be easy without changing the grid.

[Animal]

setHidden(colIdx, flag) is a method of the ColumnModel? How would my AspicioColumnModel then tell the view to do the hiding? Is there a CustomEvent it should fire to which the view subscribes?

Yes, see above about "onHidden" event.

So, I implement the UI apparatus to allow the user to specify that a column should be hidden, (The ContextMenu idea) and call myModel.setHidden(col, true), which fires onHidden which the view subscribes to.

What about showing the column? Should there be an onShow event for when the column is set visible again?

[jack.slocum]

Sorry, it's on onHiddenChange.

fireHiddenChange : function(colIndex, hidden){
this.onHiddenChange.fireDirect(this, colIndex, hidden);
},

"hidden" would be a boolean value for whether or not it's hidden.