TreeView messing up page Scroll

8 posts, 1 answers
  1. André Azevedo
    André Azevedo avatar
    12 posts
    Member since:
    May 2010

    Posted 20 Jul 2010 Link to this post

    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.
  2. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 23 Jul 2010 Link to this post

    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
  3. André Azevedo
    André Azevedo avatar
    12 posts
    Member since:
    May 2010

    Posted 23 Jul 2010 Link to this post

    Thanks for the anser, but it does not solve the problem.

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

    thanks
  4. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 25 Jul 2010 Link to this post

    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
  5. André Azevedo
    André Azevedo avatar
    12 posts
    Member since:
    May 2010

    Posted 26 Jul 2010 Link to this post

    <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.
  6. Answer
    Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 29 Jul 2010 Link to this post

    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
  7. André Azevedo
    André Azevedo avatar
    12 posts
    Member since:
    May 2010

    Posted 29 Jul 2010 Link to this post

    Thanks.

    That resolved the problem.
    Telerik rules ...
  8. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 29 Jul 2010 Link to this post

    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
Back to Top