This is a migrated thread and some comments may be shown as answers.

TreeList Scrolling and Offset Header in Chrome

1 Answer 15 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Chris asked on 15 Jul 2014, 02:12 PM

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"
DataKeyNames="ID" ParentDataKeyNames="ParentID" 
Width="99%" Height="700px" 
onitemdatabound="componentTree_ItemDataBound" >

<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: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" />

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

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

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

1 Answer, 1 is accepted

Sort by
Konstantin Dikov
Telerik team
answered on 18 Jul 2014, 11:23 AM
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.

Konstantin Dikov

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Asked by
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question