TreeList Scrolling and Offset Header in Chrome

[Chris]

Hi 

I have a RadTreeList within a RadAjaxPanel which was working well until I decided to make the tree scrollable.  Now I find that when I view the tree in IE everything seems OK but when viewed in Google Chrome the header for the tree list is offset by about 50% of the width of the tree which obviously looks odd as now all of the column headers are not above the columns they refer to.  My tree is defined using :-

<telerik:RadTreeList ID="componentTree" runat="server"
AutoGenerateColumns="False" 
AllowSorting="True"
BeforeClientContextMenu="ShowContextMenu"
DataKeyNames="ID" ParentDataKeyNames="ParentID" 
Width="99%" Height="700px" 
onitemdatabound="componentTree_ItemDataBound" >

<Columns>
<telerik:TreeListBoundColumn DataField="ID" UniqueName="ID" Display="false" />
<telerik:TreeListBoundColumn DataField="ParentID" UniqueName="ParentID" Display="False" />
<telerik:TreeListImageColumn UniqueName="ImagesColumn" HeaderText="" DataImageUrlFields="ComponentTypeString" DataImageUrlFormatString="Images/{0}_16.png" ItemStyle-HorizontalAlign="Center" AlternateText="icon" ItemStyle-Width="20px" HeaderStyle-Width="20px" ><HeaderStyle HorizontalAlign="Center" Width="30px" />
<ItemStyle HorizontalAlign="Center" Width="20px" />
</telerik:TreeListImageColumn>
<telerik:TreeListBoundColumn DataField="PartNumber" UniqueName="PartNumber" HeaderText="Part Number" ><HeaderStyle Width="120px" /></telerik:TreeListBoundColumn>
<telerik:TreeListBoundColumn DataField="Description" UniqueName="Description" HeaderText="Description" ><HeaderStyle Width="200px" /></telerik:TreeListBoundColumn>
<telerik:TreeListBoundColumn DataField="LifeCode" UniqueName="LifeCode"  HeaderText="Life Code"><HeaderStyle Width="100px" /></telerik:TreeListBoundColumn>
<telerik:TreeListBoundColumn DataField="LifeNew" UniqueName="LifeNew" HeaderText="Life New (Race)"><HeaderStyle Width="120px" /></telerik:TreeListBoundColumn>
<telerik:TreeListBoundColumn DataField="LifeLeft" UniqueName="LifeLeft" HeaderText="Life Left (Race)"><HeaderStyle Width="120px" /></telerik:TreeListBoundColumn>
<telerik:TreeListBoundColumn DataField="DistanceRun" UniqueName="DistanceRun" HeaderText="Distance Run"><HeaderStyle Width="120px" /></telerik:TreeListBoundColumn>
<telerik:TreeListBoundColumn DataField="CurrentLocationName" UniqueName="CurrentLocationName" HeaderText="Current Location"><HeaderStyle Width="120px" /></telerik:TreeListBoundColumn>
<telerik:TreeListBoundColumn DataField="LastNoteText" UniqueName="LastNoteText" HeaderText="Last Note" />
</Columns>

<SortExpressions>
<telerik:TreeListSortExpression FieldName="PartNumber" SortOrder="Ascending" />
</SortExpressions>

<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="650px"></Scrolling>
<ClientEvents OnItemContextMenu="onItemContextMenu" />
<Selecting AllowItemSelection="True" />
<Resizing AllowColumnResize="true" EnableRealTimeResize="true" />
</ClientSettings>

<ExportSettings FileName="lifecheck" IgnorePaging="True" OpenInNewWindow="True" ExportMode="ReplaceControls">
<Excel>
<AlternatingItemStyle BackColor="WhiteSmoke" ForeColor="Black" />
<HeaderStyle Font-Size="X-Large" ForeColor="White" BackColor="Gray" Font-Bold="True" HorizontalAlign="Center" />
<ExpandCollapseCellStyle ExpandText="(+)" CollapseText="(-)" />
   </Excel>
</ExportSettings>
</telerik:RadTreeList>

[Konstantin Dikov]

Hello Chris,

Using your RadTreeList settings as a reference I have created a sample page, so I could try to replicate the issue, but to no avail.

For your convenience I am attaching the sample page that I have tested on my end. Could you please test the attached page on your side and see if everything is working correctly.

On a side note, could you please inspect your browser's console and see if there are any JavaScript errors present on the page, which could prevent the proper work of the controls.

If you continue to experience problems with this, please try to modify the attached sample page in such manner, so it could replicate the problem. Additionally, please elaborate on the exact version that you are using and if possible, attach screenshots with the problematic behavior, so we could get a better idea of the issue.


Regards,
Konstantin Dikov
Telerik