Grid with Width: 100%;

Is there a way to make the GRID width work like the DIV width?
When you create a DIV with a WIDTH: 100%; it work well and adjusts with the size of the browser window accordingly. But, when you create a GRID with WIDTH: 100%; it actually creates a grid that is about 3 times the width of the browser window.

I create a DIV with the width of 100%, then put the grid in the DIV and also set it's width to 100%. This works for me, give it a try.

Can you show me how you did that, because I cannot seem to get it to work.

Rick,

this might happen if you have a TABLE cell (TD) as parent element. In this case it often helps to add style="table-layout:fixed" and explicitly set the table size.

myDiv = new AW.HTML.DIV;
myDiv.setId('MyDiv');
myDiv.setStyel('position', 'absolute'); 
myDiv.setStyle('width', '100%');
myDiv.setStyle('height', 200);
document.write(myDiv);

myGrid = new AW.UI.Grid;
myGrid.setId('MyGrid');
myGrid.setStyle('width', '100%');
myGrid.setHeight('height', '100%');
....
myDiv.setContent('html', myGrid.toString());

Jim, thanks for the code, though Alex seemed to have addressed my issue, your code sample gives me some ideas on somethings else that I was working on.

Alex, thanks for the info, I was trying to do this within a table. Although, fixing the table size kind of defeats the purpose of the 100%width? I was hoping to be able to automatically resize the grid based on the size of the Browser Window. I know I can do this with a window.resize() event, but the automatic means seems more appealing.

Rick,

"table-layout:fixed" rule does not 'fix' the table size but changes the algorithm how the browser calculates the size of the table and table cells.

Imagine you have a table with two columns and you set left column width to 100px and right column to 200px. Then you put 300px-wide content inside left column and 50px-wide content inside the right one. What will happen? The browser will ignore your 100px/200px settings and render the table according to the content inside. Your 100px/200px will be honored only if the cell content does not exceed the specified widths.

This is the common source of problems when the grid is put inside the table cell. The grid uses absolute positioniing for its parts and because of that its effective content width/height is 0 (zero). The standard table rendering algorithm tries to set the size of the table based on its content and ignores the grid (because the grid's content has position:absolute). When you set grid size to 100% it does not make much sense because the cell size = 100% of grid and grid size = 100% of cell results in a loop.

That is changed when you use "table-layout:fixed" rule. This rule tells the browser to ignore cell content when calculating table and cell sizes and use only width/height specified in attributes and css. In this scenario you can safely say grid size = 100% of the cell because the cell size will be calculated from table and table parent and not cell content (i.e. grid). Just be carefull if you use nested tables :-)

Handy bit of info in gerneral there I hadn't had time to check out the table css :)

Alex,
Sorry, I got a little confused when you said "explicitly set the table size"
Thanks for the lesson in CSS and tables, this has been enlightening.

Why don`t work this..??

<script>
                var objSpGrid_P_AGENTE_columns = [
                "ID", "NOMBRE"
                ];

                var objSpGrid_P_AGENTE_data = [
                ["avolpi", "Andres Volpi", ],
                ["gciapparelli", "Gabriel Ciapparelli", ],
                ["avolpi", "Andres Volpi", ],
                ["ygs", "Sasso Yesica", ],
                ["soluciones2", "soluciones2", ],
                ["svr", "ROSORANI, SABRINA VALERIA", ],
                ["cmj", "CASTRO, MELISA JULIETA", ],
                ["mv3", "VISINTIN MARIA LORENA", ],
                ["prg", "PIMENTEL RAUL GERARDO", ],
                ["db0", "BOLOGNESSI DIEGO RICARDO", ],
                ["bla", "BERNDT LUIS ALBERTO", ],
                ["dongaro", "Daniela Ongaro", ],
                ["mot", "OLMO TRINIDAD", ],
                ["gm2", "Gatinsky Marcelo", ],
                ["soluciones", "Soluciones", ],
                ["gciapparelli", "Gabriel Ciapparelli", ],
                ["dmd", "DE MIGUEL DANIEL", ],
                ["alejandroi", "Ale", ],
                ["leonardod", "Leo", ],
                ["leonardod", "Leo", ],
                ["leonardod", "Leo", ],
                ["maximilianob", "Maxi Brizzi", ],
                ["leandroh", "Lean Halfon", ],
                ["glele", "Gabriel Ciapparelli", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["leandroh", "Lean Halfon", ],
                ["gciapparelli", "Gabriel Ciapparelli", ],
                ];

                try {
                    var objSpGrid_P_AGENTEDiv = new AW.HTML.DIV;
                    objSpGrid_P_AGENTEDiv.setId('objSpGrid_P_AGENTEDiv');
                    objSpGrid_P_AGENTEDiv.setStyle('position', 'absolute');
                    objSpGrid_P_AGENTEDiv.setStyle('width', '100%');
                    objSpGrid_P_AGENTEDiv.setStyle('height', '200%');
                    document.write(objSpGrid_P_AGENTEDiv);

                    var objSpGrid_P_AGENTE= new AW.UI.Grid;
                    objSpGrid_P_AGENTE.setRowCount(51);
                    objSpGrid_P_AGENTE.setColumnCount(2);
                    objSpGrid_P_AGENTE.setHeaderText(objSpGrid_P_AGENTE_columns);
                    objSpGrid_P_AGENTE.setCellText(objSpGrid_P_AGENTE_data);
                    //objSpGrid_P_AGENTE.setControlSize(322,145);
                    objSpGrid_P_AGENTE.setStyle('width', '100%');
                    objSpGrid_P_AGENTE.setStyle('height', '100%');
                    objSpGrid_P_AGENTE.setSelectorVisible(true);
                    objSpGrid_P_AGENTE.setSelectorText(function(i){return this.getRowPosition(i)+1});
                    objSpGrid_P_AGENTE.setSelectionMode('single-row');
                    objSpGrid_P_AGENTE.onColumnWidthChanged = function(){this.timeout(function(){this.getRowsTemplate().refreshClasses();});}
                    objSpGrid_P_AGENTEDiv.setContent('html',objSpGrid_P_AGENTE.toString());
                    //document.write (objSpGrid_P_AGENTE);
                }
                catch (error){
                  document.write(error.description);
                }
</script>

1) Does the grid work by itself, not inside the div?
2) Does the DIV work by itself?
3) If they both work on thier own then using the above example, call refresh on the DIV after you load the grid into it.