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

TreeView messing up page Scroll

7 Answers 160 Views

TreeView

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

André Azevedo asked on 20 Jul 2010, 03:46 PM

error.jpg

Hi,
i have a RadTreeView inside a radgrid FormTemplate and it is messing up my page scroll bar.
i have already put the height and it is working fine except the page scroll.

<telerik:RadTreeView ID="TreeView" CheckBoxes="True" runat="server" DataFieldID="Id" Height="400px" DataFieldParentID="ParentId" DataTextField="Name" DataValueField="Id" OnNodeDataBound="TreeView_NodeDataBound" OnClientNodeClicking="OnClientNodeClickingHandler">

</telerik:RadTreeView>

i have attached a print and for confidentiality purposes i have painted all the text but you can see the scroll on the page an on the tree.

7 Answers, 1 is accepted

answered on 23 Jul 2010, 03:14 PM

Hello André Azevedo,

Could you, please, try putting the TreeView in a div container, which has style setting overflow to "scroll".
Here is how should this div looks like:

<div style="overflow:scroll">

...

</div>

Please, try that out and LMK about the results!
Hope this is going to solve your problem!

P.S.
If this doesn't solve the problem, please, post the markup of the entire page!

Regards,
Nikolay Tsenkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 26 Jul 2010, 12:11 PM

<telerik:RadAjaxManagerProxy ID="***" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="***">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="***" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadFormDecorator ID="***" runat="server" DecoratedControls="All"

ControlsToSkip="Label, Buttons" EnableRoundedCorners="false" />

<telerik:RadScriptBlock ID="***" runat="server">

<script type="text/javascript">

var listbox;

function OnClientLoadHandler(sender) {

listbox = sender;

}

function ValidateSelectedUsersBox(sender, args) {

var count = listbox.get_items().get_count();

args.IsValid = (count > 0);

}

</script>

</telerik:RadScriptBlock>

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td>

<table cellpadding="0" cellspacing="0" border="0" width="855px" style="table-layout: fixed;

margin: 10px 5px 10px 5px; background-color: #eef1f8;">

<tr style="height: 19px">

<td style="width: 845px;">

<asp:Label runat="server" ID="***" Text="Pesquisa" ToolTip="***"

CssClass="title2"></asp:Label>

</td>

</tr>

<tr>

<td>

<asp:Panel ID="***" runat="server" HorizontalAlign="NotSet">

<div style="margin: 5px">

<table cellpadding="0px" cellspacing="0" border="0" width="835px">

<tr>

<td width="230px">

<asp:Label runat="server" ID="***" Text="***" ToolTip="***"></asp:Label>

</td>

<td width="200px">

<asp:Label runat="server" ID="***" Text="***"></asp:Label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<asp:TextBox runat="server" ID="***" Width="200"></asp:TextBox>

</td>

<td>

<telerik:RadComboBox ID="***" runat="server">

</telerik:RadComboBox>

</td>

<td>

</td>

</tr>

</table>

</div>

<div style="vertical-align: bottom; float: right;">

<asp:LinkButton ID="***" runat="server" CssClass="botaoAccao" OnClick="***"> </asp:LinkButton>

</div>

</asp:Panel>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<table cellpadding="0" cellspacing="0" border="0" width="855px" style="table-layout: fixed;

margin: 20px 5px 10px 5px;">

<tr style="background-color: #fff;">

<td>

<telerik:RadGrid ID="***" runat="server" AllowPaging="True" AllowSorting="True"

Width="855px" AutoGenerateColumns="False" PagerStyle-AlwaysVisible="true" OnDeleteCommand="***"

OnInsertCommand="***" OnItemCommand="***"

OnNeedDataSource="***" OnUpdateCommand="***"

OnItemDataBound="***" SortingSettings-SortedDescToolTip="<%$ Resources:RadGridControl.Resource, SortedDescToolTip %>"

SortingSettings-SortedAscToolTip="<%$ Resources:RadGridControl.Resource, SortedAscToolTip %>"

PagerStyle-FirstPageToolTip="<%$ Resources:RadGridControl.Resource, FirstPageToolTip %>"

PagerStyle-PagerTextFormat="<%$ Resources:RadGridControl.Resource, PagerTextFormat %>"

PagerStyle-LastPageToolTip="<%$ Resources:RadGridControl.Resource, LastPageToolTip %>"

PagerStyle-NextPageToolTip="<%$ Resources:RadGridControl.Resource, NextPageToolTip %>"

PagerStyle-PageSizeLabelText="<%$ Resources:RadGridControl.Resource, PageSizeLabelText %>"

SortingSettings-SortToolTip="<%$ Resources:RadGridControl.Resource, SortToolTip %>"

PagerStyle-PrevPageToolTip="<%$ Resources:RadGridControl.Resource, PrevPageToolTip %>"

ClientSettings-ClientMessages-DragToGroupOrReorder="<%$ Resources:RadGridControl.Resource, DragToGroupOrReorder %>">

<MasterTableView CommandItemDisplay="Top" DataKeyNames="Id,Type,Active" InsertItemPageIndexAction="ShowItemOnFirstPage"

NoMasterRecordsText="Não existem grupos de utilizadores." EditMode="EditForms">

<CommandItemSettings AddNewRecordText="***" RefreshText="***" />

<CommandItemTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="855px" height="20px" style="table-layout: fixed;

margin: 0px;">

<tr>

<td class="fillCaixaAzul" width="625px" height="20px">

<asp:Label runat="server" ID="***" Text="***" ToolTip="***" CssClass="title2"></asp:Label>

</td>

<td width="120px" height="20px" style="background-color: #b4c4d8;">

<asp:LinkButton ID="***" runat="server" CssClass="botao2Inf" CommandName="***"> </asp:LinkButton>

</td>

<td width="110px" height="20px" style="background-color: #b4c4d8;">

<asp:LinkButton ID="btnRefreshUserGroupGrid" runat="server" CssClass="botao2Inf"

CommandName="***">

</asp:LinkButton>

</td>

</tr>

</table>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn DataField="***" DataType="System.String" DefaultInsertValue=""

HeaderText="***" ReadOnly="True" Visible="true" SortExpression="***"

UniqueName="Name">

<FooterStyle Width="825px" />

<HeaderStyle Width="825px" />

<ItemStyle Width="825px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="***" DataType="System.String" DefaultInsertValue=""

HeaderText="***" ReadOnly="True" Visible="true" SortExpression="***" UniqueName="***">

<FooterStyle Width="825px" />

<HeaderStyle Width="825px" />

<ItemStyle Width="825px" />

</telerik:GridBoundColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="***" Text="***"

UniqueName="***" ImageUrl="../App_Themes/ThemeDefault/images/icones/editar_ico.gif">

<FooterStyle Width="15px" />

<HeaderStyle Width="15px" BorderStyle="None" />

<ItemStyle Width="15px" BackColor="#dbe2e9" />

</telerik:GridButtonColumn>

<telerik:GridButtonColumn ConfirmText="***"

ConfirmDialogType="RadWindow" ConfirmTitle="***" Text="***" ButtonType="ImageButton"

CommandName="Delete" UniqueName="DeleteColumn" ImageUrl="../App_Themes/ThemeDefault/images/icones/fechar_ico.gif">

<FooterStyle Width="15px" />

<HeaderStyle Width="15px" BorderStyle="None" />

<ItemStyle Width="15px" BackColor="#dbe2e9" />

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings EditFormType="Template" FormTableStyle-Height="500px" FormTableStyle-Width="840px">

<FormTemplate>

<table cellpadding="5px" cellspacing="0" border="0" width="835px" height="500px"

style="table-layout: fixed;">

<tr style="height: 470px" valign="top">

<td width="285px">

<asp:Label ID="***" runat="server" meta:resourcekey="***" EnableViewState="false"

CssClass="title2" />

<br />

<telerik:RadTreeView ID="***" Height="450px" Width="270px" Style="white-space: normal;"

CheckBoxes="True" runat="server" DataFieldID="Id" DataFieldParentID="***"

DataTextField="***" DataValueField="***" OnNodeDataBound="***"

OnClientNodeClicking="***">

</telerik:RadTreeView>

</td>

<td width="550px">

<table cellpadding="0px" cellspacing="0" border="0" style="vertical-align: top;">

<tr valign="top">

<td>

<asp:Label ID="***" runat="server" Text="***" ToolTip="***"

AssociatedControlID="***"></asp:Label>

<asp:RequiredFieldValidator ID="***" runat="server" ErrorMessage="***"

ControlToValidate="***" Display="None" Text="*"></asp:RequiredFieldValidator>

</td>

<td>

<asp:Label ID="***" runat="server" Text="***" ToolTip="***"></asp:Label>

</td>

</tr>

<tr height="35px">

<td>

<telerik:RadTextBox ID="***" runat="server" ToolTip="***" Text='<%# (Container is GridEditFormInsertItem) ? "" : Eval("***") %>'

Width="235px">

</telerik:RadTextBox>

</td>

<td>

<telerik:RadComboBox ID="***" runat="server" OnSelectedIndexChanged="***"

Width="240px">

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="***" runat="server" Text="***"

AssociatedControlID="***" /><img src="App_Themes/ThemeDefault/images/transp.gif"

alt="spacer" width="5px" /><img src="App_Themes/ThemeDefault/images/icones/info.gif"

align="top" onmouseover="this.src='App_Themes/ThemeDefault/images/icones/infoHover.gif'"

onmouseout="this.src='App_Themes/ThemeDefault/images/icones/info.gif'" title="***" />

</td>

<td>

</td>

</tr>

<tr height="30px">

<td>

<telerik:RadDatePicker ID="***" runat="server" Calendar-CultureInfo="pt-PT"

ZIndex="100000" Width="100px" MinDate="1900-01-01">

<DatePopupButton ToolTip="***" />

</telerik:RadDatePicker>

</td>

<td>

</td>

</tr>

<tr height="30px">

<td>

<asp:Label ID="***" runat="server" Text="***" ToolTip="***"></asp:Label>

<asp:CheckBox ID="***" runat="server" ToolTip="***" Checked="false" />

</td>

<td>

</td>

</tr>

<tr valign="top">

<td width="270px">

<asp:Label ID="***" runat="server" Text="***" CssClass="text"></asp:Label>

<telerik:RadListBox ID="***" runat="server" Height="200px" Width="270px"

AllowTransfer="true" TransferToID="***" TransferMode="Move" SelectionMode="Multiple"

ButtonSettings-HorizontalAlign="Center" ButtonSettings-VerticalAlign="Middle">

<ButtonSettings TransferButtons="All"></ButtonSettings>

</telerik:RadListBox>

</td>

<td align="left">

<asp:HiddenField runat="server" ID="***" />

<asp:Label ID="***" runat="server" Text="***" CssClass="text"></asp:Label>

<telerik:RadListBox ID="***" runat="server" Height="200px" Width="240px"

SelectionMode="Multiple" OnClientLoad="***">

</telerik:RadListBox>

<asp:CustomValidator ID="***" runat="server" ErrorMessage="***"

ClientValidationFunction="***" Display="None" Text="*"></asp:CustomValidator>

</td>

</tr>

</table>

</td>

</tr>

<tr style="height: 30px">

<td>

<asp:ValidationSummary ID="***" HeaderText="***:"

DisplayMode="BulletList" ShowSummary="false" ShowMessageBox="true" runat="server" />

</td>

<td align="right">

<asp:Button ID="***" Text="***" runat="server" CausesValidation="False"

CommandName="***" ToolTip="***" CssClass="botaoT" />

<asp:Image runat="server" ID="Image7" ImageUrl="~/App_Themes/ThemeDefault/images/transp.gif"

Width="5" />

<asp:Button ID="***" Text='<%# (Container is GridEditFormInsertItem) ? "***" : "***" %>'

runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "***" : "***" %>'

ToolTip='<%# (Container is GridEditFormInsertItem) ? "***" : "***" %>'

CssClass="botaoT" />

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</td>

</tr>

</table>

</td>

</tr>

</table>

Here is the markup, all id's and texts have been deleted due to confidendiality. this is the code of a UserControl, that is called in a page.

thanks.

Accepted

answered on 29 Jul 2010, 03:44 PM

Hello André Azevedo,

Could you, please try the following:
1. add a CssClass to the TreeView and remove the width and height settings, like the following:

<telerik:RadTreeView ID="RadTreeView1" CssClass="TreeClass" Style="white-space: normal;" CheckBoxes="True" runat="server" ...>

</telerik:RadTreeView>

2. Apply the following style to your page:

.TreeClass

{

overflow: auto;

height: 450px;

width: 270px;

border: 1px Solid Gray;

position: relative;

}

I think, this should solve your current problem!

Regards,
Nikolay Tsenkov
the Telerik team