Tree grid columns getting misaligned

[voulam]

We are using..
a) SmartClient Version: SNAPSHOT_v10.1d_2015-08-16/Pro Deployment (built 2015-08-16)
b) Testing using IE 11.0.9600.17126


we are experiencing similar issues with the TreeGrid that you have addressed on the ListGrid

In the test sample, we added the following buttons:

a) "setFieldTitle and showFields"

This button populates the columns under the header span called "Bal To pieces" at runtime, you will see that the columns are not getting aligned with the Header Titles
Please see the attachment "setFieldTitle_and_showFields.png"

b) "showFields and setFieldTitle"

Then if you revert the sequence, all columns get aligned but the "Bal to pieces" is not being autofit.
Please see the attachment "showFields_and_setFieldsTitle.png"

c) "autoFitFields"
autoFitFields() on the tree grid solved the issue of the column data alignment in regards to the headers but it now created the issue of the Header span title being cut off.
Please see the attachment "autoFitFields.png"

We have used following styles for the tree grid.

.tallCell,
.tallCellDark,
.tallCellOver,
.tallCellOverDark,
.tallCellSelected,
.tallCellSelectedDark,
.tallCellSelectedOver,
.tallCellSelectedOverDark,
.tallCellDisabled,
.tallCellDisabledDark,
.gridSummaryCell,
.gridSummaryCellDisabled,
.recordSummaryCell,
.recordSummaryCellDark,
.recordSummaryCellOver,
.recordSummaryCellOverDark,
.recordSummaryCellSelected,
.recordSummaryCellSelectedDark,
.recordSummaryCellSelectedOver,
.recordSummaryCellSelectedOverDark,
.recordSummaryCellDisabled,
.recordSummaryCellDisabledDark,
.expansionCellCell,
.expansionCellCellDark,
.expansionCellCellOver,
.expansionCellCellOverDark,
.expansionCellCellSelected,
.expansionCellCellSelectedDark,
.expansionCellCellSelectedOver,
.expansionCellCellSelectedOverDark,
.expansionCellCellDisabled,
.expansionCellCellDisabledDark,
.specialCol,
.specialColOver,
.specialColSelected,
.specialColSelectedOver,
.specialColDisabled,
.groupNode,
.redCellColor,
.orangeCellColor,
.purpleCellColor,
.yellowCellColor,
.greenCellColor,
.greyCellColor,
.yellowOddCellBorderColor,
.yellowEvenCellBorderColor
{
   font-family:Arial,Verdana,sans-serif; 
   font-size:14px ; 
   text-overflow:ellipsis;
   
   padding-bottom: 3px ;   
   padding-top: 3px ;   
   padding-right: 5px ;   
   padding-left: 5px ;   
   
   border-bottom:1px solid #D0D0D0; border-right:1px solid #D0D0D0 ;
}


.cellSelected,
.cellSelectedDark,
.specialColSelected,
.recordSummaryCellSelected,
.tallCellSelected,
.tallCellSelectedDark,
.treeCellSelected,
.treeCellSelectedDark,
.treeTallCellSelected,
.treeTallCellSelectedDark,
.tallPickListCellSelected,
.tallPickListCellSelectedDark 
.recordSummaryCellSelectedDark {
	font-family:Arial, Verdana, sans-serif; font-size:14px ;  color: #2F4F4F;
  background: #C1D6F0;
  border-bottom: 1px dotted #9fb7e9;
  border-top: 1px dotted #9fb7e9;
}

.cellDark,
.recordSummaryCell,
.recordSummaryCellDark,
.tallCellDark,
.treeTallCellDark {
	font-family:Arial, Verdana, sans-serif; font-size:14px ;  color: #2F4F4F;
  background-color: #EBF0F4;
  border-top:1px solid #EBF0F4;
  
}


/* ListGrid column header buttons */
.headerButton,
.headerButtonSelected,
.headerButtonDisabled,
.headerButtonSelectedDisabled,
.headerButtonOver,
.headerButtonDown,
.headerButtonSelectedOver,
.headerButtonSelectedDown {
    font-family:Arial, Verdana, sans-serif; font-size:14px ; font-weight: bold; color: #2F4F4F;
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
}

.headerButtonDisabled {
    color:#3E3E3E;
}

.headerButtonSelectedDisabled {
    color:#3E3E3E;
}

/* ListGrid column header titles */
.headerTitle,
.headerTitleOver,
.headerTitleDown,
.headerTitleSelected,
.headerTitleSelectedOver,
.headerTitleSelectedDown,
.headerTitleDisabled,
.headerTitleSelectedDisabled {
    font-family:Arial, Verdana, sans-serif; font-size:14px ; font-weight: bold;
    cursor: pointer;
}

.headerTitleDisabled,
.headerTitleSelectedDisabled {
    color:#3E3E3E;
}

.myTreeCell,
.myTreeCellDark,
.myTreeCellOver,
.myTreeCellOverDark,
.myTreeCellSelected,
.myTreeCellSelectedDark,
.myTreeCellSelectedOver,
.myTreeCellSelectedOverDark,
.myTreeCellDisabled,
.myTreeCellDisabledDark,
.myTreeTallCell,
.myTreeTallCellDark,
.myTreeTallCellOver,
.myTreeTallCellOverDark,
.myTreeTallCellSelected,
.myTreeTallCellSelectedDark,
.myTreeTallCellSelectedOver,
.myTreeTallCellSelectedOverDark,
.myTreeTallCellDisabled,
.myTreeTallCellDisabledDark {
 
   font-family:		Arial,Verdana,sans-serif; 
   font-size:		14px; 
   text-overflow:	ellipsis;
   
   padding-bottom: 	3px; 
   padding-top: 	3px;   
   padding-right: 	5px;    
   padding-left: 	5px;
  
   border-bottom:	1px solid #D0D0D0; 
   border-right:	1px solid #D0D0D0; 
   border-top:		1px solid #D0D0D0;
 
}

[Isomorphic]

First, try reverting to the framework-provided skins, with no customizations, and let us know if you can still reproduce the problem then.

Also make sure you are using the correct DOCTYPE (see FAQ), with no <meta> tags asking for variations in browser behavior.

[voulam]

Hi Isomorphic,

We are using correct DOCTYPE <!doctype html>, also there is no <meta> tags.

We tested without customization and it is getting reproduced, when you click on the first button "setFieldTitle and showFields" twice in the attached sample in original post, you will see the data getting shifted to left.

[Isomorphic]

This is now assigned to a developer for investigation. We'll follow up when we have more information for you.

Regards
Isomorphic Software

[Isomorphic]

We have made a change to address issues #1 and #2. Please try the next nightly build (dated Aug 29 or above).
On Issue #3 - this is not actually a bug - calling "autoFitFields()" on the grid causes it to auto fit each field to its content/title - which may cause it to shrink down to a size where a header span covering several fields is clipped. It essentially overrides the "autoSizeHeaderSpans" setting you specified when first creating the widget.
Hopefully this shouldn't be an issue for you given that the other two problems which led you to try this are resolved.

Regards
Isomorphic Software

[voulam]

Hi,

We tested with following version but the #1 issue is still there.

SmartClient Version: SNAPSHOT_v10.1d_2015-08-30/Pro Deployment (built 2015-08-30)

[Isomorphic]

We'll revisit and see if we can reproduce the problem

[Isomorphic]

An update to let you know we are still working on this.
We are reproducing the problem see what the problem is but the fix is proving somewhat timeconsuming! We'll follow up when we have this resolved for you.

Regards
Isomorphic Software