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

scrollbar issue with RadTreeView inside RadPageView

5 Answers 154 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
mirang
Top achievements
Rank 1
mirang asked on 16 Jan 2012, 02:49 PM
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 ?

5 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 17 Jan 2012, 07:39 PM
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!
0
Bozhidar
Telerik team
answered on 18 Jan 2012, 12:59 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
mirang
Top achievements
Rank 1
answered on 19 Jan 2012, 10:05 AM
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 ?
0
Accepted
Bozhidar
Telerik team
answered on 19 Jan 2012, 03:46 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
mirang
Top achievements
Rank 1
answered on 20 Jan 2012, 07:28 AM
Thanks a lot, It worked at 1 go.
Tags
TreeView
Asked by
mirang
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Bozhidar
Telerik team
mirang
Top achievements
Rank 1
Share this question
or