Login Register

Putting a Grid Widget in a hidden AccordionPane

Hi. I have a strange situation where I put a Grid Widget inside an AccordionPane that is initially hidden. It should be of no surprise to anyone that when the AccordionPane is selected, the Grid widget is not dispalyed properly. (On my browser, it looks like the grid widget is smashed into a as small of a space as possible)
I understnad that this is because the widget gets it's size from the AccordionPane, which is 0 when it's hidden. The problem is, I can't seem to find an appropriate place to get the grid to resize itself. It seems that the onSelected event is thrown before the window is opened, and the AccordionPane does not seem to throw any other events like onLoad.

Anyone have any idea about how I can get the Grid to redrawitself after the AccordiionPane is redrawn?

thanks!

joe

There are several methods

There are several methods discussed in the forum for this type problem. One I suggested, not necessarily desirable architecturally, is to call setTimeout("dijit.byId('grid').update()',200); when the grid container is shown, e.g., onSelected. Or maybe the resize() instead of update() or both.

It feels dirty

I thought about doing the setTimeout... but it feels a bit hackish. Is there anything else that I could possibly trigger on? Does the animaiton throw any events when it's done animating for example?

Subclass AccordionPane

I subclassed AccordionPane and added the following line to the _transition function:

_transition: function(newWidget, oldWidget) {
 ........
 var animation = dojo.fx.combine(animations);
 animation.onEnd = this.childSelected; //this line added
 animation.play();
},
childSelected: function() {}

Then override childSelected on the new accordion pane.

Hi, I have the same problem

Hi,

I have the same problem but I do not undestarde very well, the offered solutions.

Where do I have to put this code?:

setTimeout("dijit.byId('grid').update()',200);

Can anybody explain me this in more detail?

Thank you!
J.

I am doing this, it gets the

I am doing this, it gets the correct width, but it does not get any height more than the header (if I put the grid outside the accordionpane it gest the correct height):

" onSelected="repintaTablaHistoricos();">
function repintaTablaHistoricos() {
      setTimeout("dijit.byId('grid').resize()",200); 
      setTimeout("dijit.byId('grid').update()",200); 
	    	
}
		@import "../js/dojo/resources/dojo.css";
		@import "../js/dijit/themes/tundra/tundra.css";
		@import "../js/dijit/themes/tundra/tundra_rtl.css";
		@import "../js/dojox/grid/_grid/tundraGrid.css";
		@import "../js/dijit/themes/tundra/tundra_rtl.css";
		
		#grid { 
				border: 1px solid #333;
				width: 600px;
				height: 200px;
		}
	
	
	
		dojo.addOnLoad(function(){
			// a grid view is a group of columns
			var view1 = {
				cells: [
					[
						{name: 'Operacion'}, 
						{name: 'Tipo'}, 
						{name: 'Usuario'},
						{name: 'Hora Inicio'}, 
						{name: 'Estado'},
						{name: 'Detalles'}
				    ]
				]
			};
			// a grid layout is an array of views.
			var layout = [ view1 ];
			var grid = new dojox.Grid({
				"id": "grid",
				"structure": layout
			});
			dojo.byId("gridContainer").appendChild(grid.domNode);
			grid.render();
			
			setRefresco();
					
		});

I introduce some data in the

I introduce some data in the table when in the onselected event of the accordionPane, and now it gets height the grid but it does not show the data:

function repintaTablaHistoricos() {
	    	setTimeout("dijit.byId('grid').resize()",200); 
	    	setTimeout("dijit.byId('grid').update()",200);
	    	cargarDatosTabla(); 
	    }
	    
	    function cargarDatosTabla() {
	    	try {
				createJsonRpcClient();
				jsonrpc.HistoricoManager.getTodoHistoricos(getTodoHistoricosResultCallBack);
			}catch(e) {
				alert(e);
			}
	    }
	    
	    function getTodoHistoricosResultCallBack(result,exception) {
			try {
				var operacionesEjecutadas = result.list;
				var model = new dojox.grid.data.Table(null, operacionesEjecutadas);
				var grid = dijit.byId("grid");
				grid.setModel(model);
			}catch(e) {
				alert(e);
			}
		}

With the code I put before,

With the code I put before, The grid gets the height according to the data introduced, but It does not show the data.

So, I would like the data to be seen and that the grid gets its height at the beginning and non relative to the data introduced.

If I put the grid outside the Accordion, it works perfectly.

Thank you very much in advance!

J.

It is happening the same to

It is happening the same to me, using the TabContainer instead of an AccordionContainer.

I do not know what to do, I would be very thankful if somebody can help me with this, please.

dojo.connect(dijit.byId('tab2'),'onShow',fcn);
			
function fcn(e) {
    	setTimeout("dijit.byId('grid').update();",200);
}
">
selected">

J

I have s simple solution for

I have s simple solution for TabContainer,

/* this is the old way, which get the same problem when display the grid

*/

// this one works

in the GridFrag.html

The GridPane is a content pane contains grid and other widgets, which are all created programmatically.

Wooo, code lost. /* GeSHi

Wooo, code lost.

<div style="width:100%;height:100%;">
        <div style="width:100%;height:100%;" dojoType="dijit.layout.LayoutContainer">
                <div dojoType="dijit.layout.TabContainer">
                    /* this is the old way, which get the same problem when display the grid
                    <div dojoType="dijit.layout.ContentPane" title="grid" >
                        <div dojoType="..myGrid.GridPane"></div>
                    </div>
                    */

                    // this one works
                        <div dojoType="dijit.layout.ContentPane" title="grid" href="....../gridFrag.html">
                        </div>

in the GridFrag.html

<div dojoType="..myGrid.GridPane"></div>

could you show the programatic creation

I have come against the same problem, I'm new to Dojo/Javascript, I wonder if you could post the code you use to create the grid...and where exactly to put it? I'm still getting used to all of this.

Thanks.

You mean something like

Thanks, thats helpful,

Thanks, thats helpful, however I'm more wondering about how to use that code when I have my div for holding the grid in a different file. Where does the JavaScript go, in the main file or in the included file? and how to I trigger the execution of the code to avoid the original problem?

At the moment I playing with dojo.connect and not having much luck, which must mean I'm missing something obvious...which has been the routine for the past 2 days as I learn this stuff.

I guess I wonder if its possible to have the included file contain all the HTML and JavaScript so that it can be, for example, used in more that one place. My real motivation is neatness and modular code however.

Sorry, I took your question

Sorry, I took your question to be a general question about how to create a grid programmatically.

Does "my div for holding the grid in a different file" and "included file" mean you will do server side includes to supply some of your web page? And maybe use the same server side includes in different web pages?

Or are you just wanting to put your javascript (including dojo references) in an external file and src="..." it?

Your javascript should go in the head section of the main file, but it can be src ref'd from there. And the entire head section or part of it can be server side included, if desired.

src ref'ing javascript code should be no problem. Just ensure the net result is that the dojo lines (djConfig, dojo.js, requires, etc.) appear in the correct location/order.

Remember to use dojo.addOnLoad(init) where appropriate (operations on dojo widgets, etc., that might otherwise occur prior to dojo being ready) to ensure that those operations don't occur prior to html, dom, and dojo being completed loaded and ready.

Include the needed css import statements, including for your theme, e.g., tundra.

Regarding dojo.connect, if the Book of Dojo (see Documentation at the top of this page) doesn't help, post in a reply here a very small, but complete html page with your failing dojo.connect statement. Post between <code>your html</code> tags so that the forum software won't consume it (won't interpret it as html).

Thanks for those pointers, I

Thanks for those pointers, I have it working, its very nice indeed!