custom resize event handlers

Hi all,

first of all, this is an extremely nice script!

i want my grid to resize to the area the grid's parentNode offers (offetWidth and offsetHeight). basicly what i try to do is:

1) create a hidden grid from a jsarray.
2) figure the grid's parentNode offsetWidth/offsetHeight
3) resize the whole grid to this size
4) reset the column widths to precentage values

i have managed to get step 1 and 2 working. trying to use window.onresize to resize the grid did not succeed. however, after window.onresize has resized the top level div of the grid, it does seem that another event is fired which resizes the grid again.

so, the actual questions are:
- what is the preferred method to resize the whole grid (can i use some sort of callback functions/event handlers )?
- from a little research i see that it isn't possible to set % widths, i'd like to calculate the widths myself and set the column withs manually after resizing ... how would i assign my own resizing code for column widths ?

Kind regards,
--Simon

Hi,

let me try to re-formulate your question, I am not sure if I exactly understood your problem.

You are using the grid inside the browser window. When you resize the window (not the resize on one of the columns in the grid), you want the grid to resize with the window as well. Additionally, you want to resize all coumns in the grid respectively by same ratio as the window.

step 1,2,3:
If this is the case, then you should probably let the grid resize itself automatically without any event handling. Yoz should let the grid stretch itself to the maximum place available. That means defining the style like this:

.active-controls-grid {height : 100%; width : 100%;}

If you resize the window, the grid will resize automatically with the window, because it tries to stretch to the full screen. I usually encapsulate the grid with a table that stretches to 100% of the window and then the grid that stretches to the 100% of the place given by the table cell.

step 4 - Recalculating the percentage widths.
Well I don't think this could be done with the same technique as steps 1,2,3. I think you have to use the onResizeEnd window event and handle it to wire the resizing of the columns. If you make it to handle this event (and as I read your posting, you are able to handle it), then you can dynamically manipulate the stylesheet entries that define your column widths. Try to take a look at the file controls/grid.js and look at the function endResize. This function adjusts dynamically the column widths after the user has done column resize on the header row. You want to do pretty much the same thing in your code.

Good luck!

Ladi is right, I would suggest to set the grid width and height to 100% and capture resize event on the grid (I am emulating resize event for Netscape)

The resize event is used by grid to recalculate scroll widths so you should call the original event handler.

Here is the idea how you can set the column widths programmatically:

var stylesheet = document.styleSheets[document.styleSheets.length-1];
stylesheet.addRule(".active-column-2", "width:150px");

var stylesheet = document.styleSheets[document.styleSheets.length-1];
stylesheet.addRule(".active-column-2", "width:150px");