Login Register

Grids rows misaligned in layout with multiple views

I have a Grid where the model is dynamically created (as a dojox.grid.data.Objects object) from Ajax JSON data. Certain fields can contain quite long text data, so I am specifying widths (in em) in the view definition. When I use a layout structure with a single view I have no problems with the initial display. However, I would like to use a layout structure with first two columns in a fixed (noscroll: true) view and the remaining columns in a separate, scrolling view. When I do this, if wrapping occurs in any of the fixed columns for a row, and not in any of the columns in the scrolling part, the row's height differes in the two views, and the rows become misaligned as you proceed down the grid. The misalignment survives resizing of the browser, and swapping to a different Tab and back, but disappears if you resize a column or sort. It also disapppears on scrolling down, if there is sufficient data to force clearing of the cache.

I have tried changing the order of my setStructure and setModel calls, and various combinations of resize, refresh, render and update, but I cannot get the initial display to align properly. Any advice would be appreciated.

If this is not a known problem, I will try to construct a simplified example and post it.

Using Dojo 1.0.2 on IE6. The necessary CSS files are included on the page.

An example might be helpful,

An example might be helpful, since it seems to work OK (in IE7) on this page (the source code is at the bottom of the article, above the comments).

http://dojotoolkit.org/book/dojo-book-0-9/docx-documentation-under-devel...

Update: Sorry, your case is with the wrappable lines in the fixed portion--the above example is the opposite. Still might be worth looking at to see if a problem in IE6.

Grid rows misaligned - solution found

While working up an example for this I have found a cause and solution. My grid is on a tab in a TabContainer, and is the data is programmatically populated based on selections on a different tab. Therefore the grid tab was not initially visible. I was populating the data (setModel), refreshing the grid, and then switching to the tab. If I switch to the tab before populating and refreshing, the problem goes away. The example page below shows both behaviours. It also shows that it it not the fixed widths, nor the noscroll view, that cause the problem, it is just having different numbers of wrapped lines in the two views.

Should I log this as a bug, or should it be regarded as due to incorrect use?

The page to demonstrate the problem, and the solution (you may need to change the paths):




ClearSupport Case Search
    
    
	dojo.require("dojo.parser");
	dojo.require("dojox.grid.Grid");
	dojo.require("dijit.layout.TabContainer");
	dojo.require("dijit.layout.ContentPane");
	dojo.require("dojox.grid._data.model");
	var fixedColsView = {
		noscroll: true,
		cells: [[
		{ name: 'Part Nr.', field: 'partno', width: '4em' },
		{ name: 'Description', field: 'desc', width: '30em' }
		]]
	};
	var scrollingView = {
		cells: [[
		{ name: 'Availablity', field: 'avail' },
		{ name: 'Unit price', field: 'price' },
		{ name: 'Supplier', field: 'supplier', width: '20em' },
		{ name: 'Material', field: 'material' },
		{ name: 'Bulk discount', field: 'disc', width: '20em' }
		]]
	};
	var splitLayout = [ fixedColsView, scrollingView ];
	var data = [
	{
		partno: "1234",
		desc: "Thingummy for cleaning desktops",
		avail: "Immediate",
		price: 10.99,
		supplier: "In-house",
		material: "Cotton",
		disc: "No"
	},
	{
		partno: "2345",
		desc: "Ultimate multi-purpose tool",
		avail: "3 months",
		price: 99.99,
		supplier: "In-house",
		material: "Hand-crafted from stainless steel",
		disc: "Yes, 10% > 10, 30% > 50"
	},
	{
		partno: "3234",
		desc: "Another thingummy for cleaning desktops",
		avail: "Immediate",
		price: 18.99,
		supplier: "In-house",
		material: "Feathers",
		disc: "No"
	},
	{
		partno: "3235",
		desc: "Widget with no real use, but an extra long description to force wrapping over several rows, since we are keeping this column narrow",
		avail: "Two weeks",
		price: 999.99,
		supplier: "Dummy Corp, 200 Rip-off Boulevard",
		material: "Insubstantial",
		disc: "Yes, 1% on orders over 1,000,000"
	}];
	dojo.addOnLoad(
		function ()
		{
			scrollGrid.setStructure(splitLayout);
		}
		);
	function setNewData1() {
		var scrollModel = new dojox.grid.data.Objects(null, data);
		scrollGrid.setModel(scrollModel);
		scrollGrid.refresh();
		dijit.byId("splitGridTabs").selectChild("gridTab");
	}
	function setNewData2() {
		var scrollModel = new dojox.grid.data.Objects(null, data);
		dijit.byId("splitGridTabs").selectChild("gridTab");
		scrollGrid.setModel(scrollModel);
		scrollGrid.refresh();
	}
    
    
	@import "/js/dojo102/dojo/resources/dojo.css";
	@import "/js/dojo102/dijit/themes/tundra/tundra.css";
	@import "/js/dojo102/dojox/grid/_grid/tundraGrid.css";
html, body, #splitGridTabs {
    width: 100%; height: 100%;
    border: 0; padding: 0; margin: 0;
 }
    


Populate Grid then show Show then populate Grid

Good work. You could file a

Good work. You could file a ticket, but it's probably ok to just leave it. You named your original post well, so that anyone else coming across a similar problem should find your post easily with Search.

Also, I think the devs have been working a fair amount in this area, grid display in hidden panes, that it may get resolved organically...

I've just tried my example

I've just tried my example above against the 1.1.0 Beta 2 release - there is a change in behaviour, though I'm not sure whether it's an improvement. Now the grid simply does not display the data at all in the case where the setModel and refesh are run when it's still hidden. As you say, probably best to let the developers finish first, before becoming too concerned.

You may want to try against

You may want to try against the latest nightly build or against the SVN head.

Corrected in latest nightly

Yes, it does seem to be corrected in the latest nightly (5th March). The grid displays correctly no matter which order the display and data refresh is done.