[Solved] TreeView in combobox - retain scroll position

[Andy Green]

Hi

I've a RadTreeview inside a Radcombobox, and it can be quite long. Is it possible to retain the scroll position when a new value is required. Currently the user is taken to the top of the tree, the current selected node is highlighted, but I'd like to start scrolling from the current selected node.

Andy

[Shinu]

Hi Andy Green,

Please have a look into the sample code snippet which works fine at my end. The RadTreeView scroll position is maintained at the node which selected.

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server">
    <Items>
        <telerik:RadComboBoxItem />
    </Items>
    <ItemTemplate>
        <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="90">
            <Nodes>
                <telerik:RadTreeNode Text="Node1">
                    <Nodes>
                        <telerik:RadTreeNode Text="Node1.1">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node1.2">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node1.3">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node1.4">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node1.5">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node1.6">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Node2">
                    <Nodes>
                        <telerik:RadTreeNode Text="Node2.1">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node2.2">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node2.3">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node2.4">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node2.5">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node2.6">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </ItemTemplate>
</telerik:RadComboBox>

Please try the code and let me know if you have any concern.
Thanks,
Shinu.

[Andy Green]

Sorry maybe I should have included my markup. Its similar to yours but doesn't maintain scroll position, can you spot whats wrong?

<telerik:RadComboBox ID="ddlLocation" runat="server" Height="400px" Width="245px" ShowToggleImage="True" Style="vertical-align: middle;" OnClientDropDownOpened="DownOpenedHandlerLocation"  CausesValidation="False" EnableEmbeddedSkins="False" Skin="Activity" >
    <Items>
        <telerik:RadComboBoxItem/>
    </Items>

    <ItemTemplate>
        <div onclick="StopPropagation(event)">
            <telerik:RadTreeView ID="rtvLocation" runat="server" EnableEmbeddedSkins="False" Skin="Activity" CausesValidation="true"  OnClientNodeClicking="nodeClickingLocation" >
                <Nodes>
                    <telerik:RadTreeNode runat="server" Text="None" Value=""></telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeView>
        </div>
    </ItemTemplate>


</telerik:RadComboBox>

This is how its filled with data:

If l_dt.Rows.Count > 0 Then
    Dim rtvLocation As RadTreeView = CType(Page.FindControl("ddlLocation$i0$rtvLocation"), RadTreeView)
    With rtvLocation
        .DataValueField = 1
        .DataSource = l_dt
        .DataFieldID = "Location_ID"
        .DataFieldParentID = "ParentLocation_ID"
        .DataTextField = "Location"
        .DataValueField = "Location_ID"
        .DataBind()
        .ExpandAllNodes()
    End With
End If

[Shinu]

Hi Andy Green,

Please  try to set Height property of RadTreeView. The Height of RadTreeView should be lesser than the Height of RadComboBox. Please have a look into the following ASPX  which works fine at my end.

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server" Height="100px" ShowToggleImage="True"
    CausesValidation="False" EnableEmbeddedSkins="False" Skin="Activity">
    <Items>
        <telerik:RadComboBoxItem Text="tt" />
    </Items>
    <ItemTemplate>
        <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableEmbeddedSkins="False"
            Height="90px" Skin="Activity" CausesValidation="true">
            <Nodes>
                <telerik:RadTreeNode runat="server" Text="None" Value="">
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </ItemTemplate>
</telerik:RadComboBox>

Thanks,
Shinu.

[Andy Green]

Sorry Shinu - this doesn't work for me, Tried your code without the javascript (as you have it above) but then none of the AJAX works. In which version of the controls should this work, I am using 2013.3.1114.40. This is production code and we cant upgrade to the latest until the next release of our software.

Andy

[Shinu]

Hi Andy Green ,

Unfortunately I Couldn't replicate the issue at my end. The Provided code was working fine at my end in version 2013.3.1114.40. Please have a look into this forum thread which discuss about the same issue.

Thanks,
Shinu.