[Dojo-interest] DataGrid: How to get the width of the views?

[Martin Jakobi]

Hi Elvis.

Tanks for your answer.

> I do not fully understand what you want to do

Suggest I've the snipets:

	<div dojoType="dojox.grid.DataGrid" region="center"  <!--
BorderContainer: design="headline"-->
		jsId="myGrid" id="myGrid"
		store="myStore"
	>
	</div>


	var myStruct1 = [
		{	cells: [
				 {name: 'Col1', field: 'Col1', width:
'100px'}
				,{name: 'Col2', field: 'Col2', width:
'50px'}
		}
	];


	var myStruct2 = [
		{	noscroll: true
			,cells: [
				 {name: 'Col1', field: 'Col1', width:
'100px'}
				,{name: 'Col2', field: 'Col2', width:
'100px'}
				,{name: 'Col3', field: 'Col3', width:
'50px'}
				]
		},
		{	noscroll: false
			,cells: [
				 {name: 'Col4', field: 'Col4', width:
'100px'}
				,{name: 'Col5', field: 'Col5', width:
'100px'}
				,{name: 'Col6', field: 'Col6', width:
'100px'}
				,{name: 'Col7', field: 'Col7', width:
'100px'}
				,{name: 'Col7a', field: 'Col7', width:
'100px', hidden: true}
				,{name: 'Col8', field: 'Col8', width:
'100px'}
		}
	];

And let myGrid have a width of 500px and a store with about 1000 rows.

Use case 1 (all uses cases with pseudo code):
myGrid.autoWidth = true;
myGrid.structure = myStruct1;
myGrid is displayed with a width of 150px and a V-Scrollbar sited directly
after Col2
==> desired behavior

Use case 2:
myGrid.width= '100%';
myGrid.structure = myStruct1;
myGrid is displayed with the current width of 500px (100%)  and a
V-Scrollbar, whereby only the first 150 px contains the data columns, the
V-Scrollbar (~10px) is aligned to the right border and the "unused space"
between these is colored with the row background colors.
==> NOT desired behavior

Use case 3:
myGrid.autoWidth = true;
myGrid.structure = myStruct2;
myGrid is displayed with the current width of 500px (100%). This is I can
see colums 1 up to 5 and a half. But there are no scrollbars!
==> NOT desired behavior

Use case 4:
myGrid.width= '100%';
myGrid.structure = myStruct2;
myGrid is displayed with the current width of 500px (100%)  and a
V-Scrollbar. The columns 4-8 of the 2nd view can be accessed by  the view's
H-Scrollbar.
==> desired behavior


> if you just want to get the
> width of grid views, you can try this:
> var views = grid.views.views;
> dojo.forEach(views, function(v){
> 	var width = dojo.position(v.domNode).w;
> });


With your starting point I did:
...
var adaptGridWidth = function(myGrid){
	var iPositionWidth = dojo.position(myGrid.domNode).w;
	var views = myGrid.views.views;
	var w = 0;
	dojo.forEach(views, function(v){
		//width over all not hidden cells
		dojo.forEach(v.structure.cells[0], function(c){
			w += c.hidden ? 0 : parseInt(c.width, 10);
		});
	});
	if(iPositionWidth > w)){	//the V-Scroller is not considered,
yet
		myGrid.autoWidth =  true;
	}
}
....

myGrid.structure = myStruct1|2;
adaptGridWith(myGrid);


That works for me at the moment, but I think it is only a dirty hack.
Could you image a better solution?

Martin