scrollbar issue with RadTreeView inside RadPageView

[mirang]

I have a radtreeview inside radpageview to give outlook style. The problem is, when there are lots of items inside the radtreeview, the user looses focus navigating down, as there are not scrollbars visible for the treeview. The only scrollbars visible is for the radpageview so it is not able to understand which node item to set focus to.

Code for RadTreeView is :

This radTreeView is placed inside

<telerik:RadSplitter runat="server" Height="100%" Width="100%" Orientation="Horizontal">
        <telerik:RadPane runat="server" Scrolling="X" Width="100%" >
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" BackColor="White">
                <telerik:RadPageView ID="RadPageView1" runat="server" Style="border-style: none;">
                    <telerik:RadTreeView Width="100%"
    PersistLoadOnDemandNodes="false" ClientIDMode="Static" EnableViewState="false"
    ID="archiveTree" runat="server" OnClientNodeClicked="NodeClick" AccessKey="T"
    TabIndex="1" EnableEmbeddedSkins="false" Skin="Default">
    <WebServiceSettings Path="~/Test.svc" Method="GetNodesData" />
</telerik:RadTreeView> 
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </telerik:RadPane>
        <telerik:RadSplitBar runat="server" CollapseMode="Backward" EnableResize="false" ID="navigationPaneSplitBar">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="RadPane1" runat="server" Height="125px" Scrolling="None">
            <telerik:RadPanelBar OnClientItemClicking="OnClientItemClicking"
                ID="NavigationItems" runat="server" ExpandMode="FullExpandedItem" Visible="true"
                AccessKey="N" Height="100%" Width="100%" EnableEmbeddedSkins="false" Skin="Default" TabIndex="2">
            </telerik:RadPanelBar>
        </telerik:RadPane>
    </telerik:RadSplitter>

Is there any way to allow navigaiting of items inside radtreeview without loosing focus of that item ?

[Richard]

Mirang:

I've not tried this myself, but I'm wondering if there's a way to use the selectedNode.scrollIntoView()
 method of the RadTreeView client object to move the tree up when the last visible node is checked.

Take a look at the RadTreeView client-side scrollIntoView() for Selected Node Question forum thread and read the February 18-21,2011 posts.

Reference also the Scrolling To The selected node documentation page.

Hope this helps!

[Bozhidar]

Hi Mirang,

The way you have your controls set, the height of the controls inside RadPane isn't set, so they take as much space as they need. The problem is that because the height of the pane is restricted, the bottom part of the treeview is cut and cannot be seen. Try the following:

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%"
    Orientation="Horizontal">
    <telerik:RadPane ID="RadPane1" runat="server" Scrolling="X" Width="100%">
        <telerik:RadMultiPage Height="100%" ID="RadMultiPage1" runat="server" SelectedIndex="0" BackColor="White">
            <telerik:RadPageView Height="100%" ID="RadPageView1" runat="server" Style="border-style: none;">
                <telerik:RadTreeView Height="100%" Width="100%" PersistLoadOnDemandNodes="false" ClientIDMode="Static"
                    EnableViewState="false" ID="archiveTree" runat="server" OnClientNodeClicked="NodeClick"
                    AccessKey="T" TabIndex="1" EnableEmbeddedSkins="false" Skin="Default">
                    <WebServiceSettings Path="~/Test.svc" Method="GetNodesData" />
                </telerik:RadTreeView>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </telerik:RadPane>
    <telerik:RadSplitBar runat="server" CollapseMode="Backward" EnableResize="false"
        ID="navigationPaneSplitBar">
    </telerik:RadSplitBar>
    <telerik:RadPane ID="RadPane2" runat="server" Height="125px" Scrolling="None">
        <telerik:RadPanelBar OnClientItemClicking="OnClientItemClicking" ID="NavigationItems"
            runat="server" ExpandMode="FullExpandedItem" Visible="true" AccessKey="N" Height="100%"
            Width="100%" EnableEmbeddedSkins="false" Skin="Default" TabIndex="2">
        </telerik:RadPanelBar>
    </telerik:RadPane>
</telerik:RadSplitter>

  
All the best,
Bozhidar
the Telerik team

[mirang]

That worked like a charm. Is this a guideline specific to telerik asp.net ajax controls or a general guideline. 
I modified you code to add one more div on top of that radtreeview : 

<telerik:RadPageView Height="100%" ID="RadPageView1" runat="server" Style="border-style: none;">
      <div style="height:25px">Header 1</div>

                <telerik:RadTreeView Height="100%" Width="100%" PersistLoadOnDemandNodes="false" ClientIDMode="Static"

                    EnableViewState="false" ID="archiveTree" runat="server" OnClientNodeClicked="NodeClick"

                    AccessKey="T" TabIndex="1" EnableEmbeddedSkins="false" Skin="Default">

                    <WebServiceSettings Path="~/Test.svc" Method="GetNodesData" />

                </telerik:RadTreeView>

            </telerik:RadPageView>

This again hampers the radtreeview layout in case of resizing the windows and panes. I tried putting height as 98 % but that does not persist across resizing. Anything missing ?

[Bozhidar]

Hello Mirang,

Try using a nested RadSplitter. Here's an example:

<telerik:RadPageView Height="100%" ID="RadPageView1" runat="server" Style="border-style: none;
    position: relative;">
    <telerik:RadSplitter ID="nestedSplitter" ResizeWithParentPane="false" Width="100%" Orientation="Horizontal"
        Height="100%" runat="server">
        <telerik:RadPane ID="headerPane" runat="server" Height="25px">
            <div style="height:25px;">Header 1</div>
        </telerik:RadPane>
        <telerik:RadPane ID="treeViewPane" runat="server">
            <telerik:RadTreeView Height="100%" Width="100%" PersistLoadOnDemandNodes="false"
                ClientIDMode="Static" EnableViewState="false" ID="archiveTree" runat="server"
                _OnClientNodeClicked="NodeClick" AccessKey="T" TabIndex="1"
                EnableEmbeddedSkins="false" Skin="Default">
                <Nodes>
                ...
                </Nodes>
            </telerik:RadTreeView>
        </telerik:RadPane>
    </telerik:RadSplitter>
</telerik:RadPageView>

 
Regards,
Bozhidar
the Telerik team

[mirang]

Thanks a lot, It worked at 1 go.