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

TreeView messing up page Scroll

7 Answers 89 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
André Azevedo
Top achievements
Rank 1
André Azevedo asked on 20 Jul 2010, 03:46 PM
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

Sort by
0
Nikolay Tsenkov
Telerik team
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
0
André Azevedo
Top achievements
Rank 1
answered on 23 Jul 2010, 06:02 PM
Thanks for the anser, but it does not solve the problem.

i will do a markup of the code and post here.

thanks
0
Nikolay Tsenkov
Telerik team
answered on 25 Jul 2010, 02:36 PM
Hi André Azevedo,

Hope that soon you will post your markup and we will get to the bottom of this problem!


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
0
André Azevedo
Top achievements
Rank 1
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.
0
Accepted
Nikolay Tsenkov
Telerik team
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
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
0
André Azevedo
Top achievements
Rank 1
answered on 29 Jul 2010, 04:40 PM
Thanks.

That resolved the problem.
Telerik rules ...
0
Nikolay Tsenkov
Telerik team
answered on 29 Jul 2010, 07:38 PM
Hi André Azevedo,

You are welcome!

Please, don't hesitate to contact with us again, if any further complications occur - we will be happy to help you!


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
Tags
TreeView
Asked by
André Azevedo
Top achievements
Rank 1
Answers by
Nikolay Tsenkov
Telerik team
André Azevedo
Top achievements
Rank 1
Share this question
or