Bug in TreeGrid with frozen column and bottom border on cells

[jumple]

There seems to be a bug in TreeGrid with frozen column when I apply bottom border to cells - when I scroll down to load more records - the rows in frozen column mismatch the rest of columns

Here is the sample code: just scroll all the way down in grid to see the problem - the rows of locked column mismatch the rows of other columns. Am I doing something wrong or is it a bug?

<style>
	.listTable td{
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
</style>
<script>
	var root = {
			children: [{
				0: 'rootData',
				children: []
			}]
		},
		rootData = root.children[0],
		row,
		fields = [],
		folders = 3,
		leafs = 5,
		allCols = 20,
		displayCols = 10;

	for(var i=0; i<folders; i++){
		var children = (
			rootData.children[i] = {
				0: 'child' + i,
				children: []
			}
		).children;
		for(var j=0; j < leafs; j++) {
			row = children[j] = {};
			for (var k = 0; k < allCols; k++) {
				row[k] = j + 1;
			}
		}
	}

	for(var i=0; i<displayCols; i++){
		fields.push({name: ''+ i, width: 150});
	}

	fields[0].frozen = true;

	var treeGrid = isc.TreeGrid.create({
		width: 400,
		height: 200,
		autoDraw:true,
		data: isc.Tree.create({
			root: root
		}),
		fields: fields
	});
	treeGrid.data.openAll();
</script>

[Isomorphic]

We need to be able to detect those borders, so you need to apply them directly on listTable and not with a TD sub-selector (which also has you relying on undocumented / unsupported details of DOM structure, by the way).

[jumple]

Applying border on listTable will not create border for grid cells but for the whole table, so what is the proper way to apply border to grid cells so that SC is able to detect them?

[jumple]

I was trying to fallow this ListGrid example (which works even with locked column) and apply it to TreeGrid, but the cells of the tree column get shifted and mismatch the other columns

http://www-demos.smartclient.com/iso...html#gridCells

[Isomorphic]

There's a style specifically for cells (controlled by listGrid.baseStyle) so you would use that, which is also what that sample shows.

In general, use styles that are specifically applied to the elements you want to change.

Aside from depending on details of the DOM that aren't documented or supported, there is a huge thicket of browser bugs and limitations related to detecting the sizes and positions of elements which make it impossible to support styling via most kinds of selectors.

Of course, in this and almost all other instances, using a selector was both less clear and more error prone than the correct and supported approach anyway.

[jumple]

I understand but the problem is that your listgrid example did not work on treegrid with frozen column... I am now pretty confused

[Isomorphic]

If you think there's an issue with the approach, we need to see specifically what you did.

Note that there's also a browser limitation that all cells must have the same size borders for each side in all states (over, selected, etc). If you violate that rule, expect misalignment.

[jumple]

All I did is copy over the styles from your example and applied a corresponding baseStyle to the treegrid

<style>
	.myBoxedGridCell,
	.myBoxedGridCellDark {
		font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px;
		color:black;
		border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
		background-color:#ffffff;
	}
	.myBoxedGridCellOver,
	.myBoxedGridCellOverDark {
		font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px;
		color:black;
		border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
		background-color:#c0ffc0;
	}
	.myBoxedGridCellSelected,
	.myBoxedGridCellSelectedDark {
		font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px;
		color:white;
		border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
		background-color:#000080;
	}
	.myBoxedGridCellSelectedOver,
	.myBoxedGridCellSelectedOverDark {
		font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px;
		color:white;
		border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
		background-color:#8080ff;
	}
	.myBoxedGridCellDisabled,
	.myBoxedGridCellDisabledDark {
		font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px;
		color:#808080;
		border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
		background-color:#ffffff;
	}
</style>
<script>
	var root = {
			children: [{
				0: 'rootData',
				children: []
			}]
		},
		rootData = root.children[0],
		row,
		fields = [],
		folders = 5,
		leafs = 5,
		allCols = 20,
		displayCols = 10;

	for(var i=0; i<folders; i++){
		var children = (
			rootData.children[i] = {
				0: 'child' + i,
				children: []
			}
		).children;
		for(var j=0; j < leafs; j++) {
			row = children[j] = {};
			for (var k = 0; k < allCols; k++) {
				row[k] = j + 1;
			}
		}
	}

	for(var i=0; i<displayCols; i++){
		fields.push({name: ''+ i, width: 150});
	}

	fields[0].frozen = true;

	var treeGrid = isc.TreeGrid.create({
		baseStyle: "myBoxedGridCell",
		width: 500,
		height: 300,
		autoDraw:true,
		data: isc.Tree.create({
			root: root
		}),
		fields: fields
	});
	treeGrid.data.openAll();
</script>

[Isomorphic]

We've taken a look and we see what's going on here.
You can solve this issue by either setting a larger cellHeight on your TreeGrid, or setting enforceVClipping to true.

The issue is that the larger borders are causing there to be less space for cell content, and the special Tree cells of a TreeGrid have content which is natively slightly taller than the other cells. Since vertical clipping isn't enforced by default (as described in the docs for enforceVClipping) this means that increased borders or padding could lead to the tree-cell forcing rows to render a little taller than the specified cell height - and if you have frozen columns this can result in mismatched row heights between the frozen cells (containing the Tree cell content) and the other cells.

Regards
Isomorphic Software

[jumple]

Thanks for the reply