Programmatically select item and focus it

[Predrag]

Hi,

I’m using RadTreeView with HierarchicalDataTemplate. I need to programmatically select an item in the tree view and expand it.
I’m using approach described here http://blogs.telerik.com/xamlteam/posts/11-01-12/treeview-bringintoview.aspx. I need also to focus the item in order to be highlighted. When I call item.Focus(); almost every time nothing happens (it returns false). In debug mode I was able to set item.IsFocused = true; and then it worked (item was highlited), but you cannot access to IsFocused setter property of RadTreeViewItem from code because it is protected.

How can I focus this selected item from code in order to highlight it?

Best regards,

Predrag

[Kiril Stanoev]

Hello Predrag,

 Could you please try calling Focus() within a Dispatcher:

this.Dispatcher.BeginInvoke(() =>
{
    treeViewItem.Focus();
});

Let me know if this helps.

Best wishes,
Kiril Stanoev
the Telerik team

[Predrag]

Hello Kiril,

I tried calling the Focus() with Dispatcher, but it didn’t help.  

My page is bounded to view model, on it I have refresh button (which uses relative binding to reload command), than I have user control which has RadTreeView and user control for selected item details. When data reload is finished view model reload command will send reloaded message, my Tree view control is registered to this message. What it actually does is reexpand tree view nodes and reselects view model selected item.

It looks like my UserControl that contains RadTreeView is not focused, because when I click on control selected tree view item becomes highlighted (then also my user control is focused).

If is not possible to focus on item is there any way to change the style for selected unfocused RadTreeViewItem in RadTreeView with HierarchicalDataTemplate?

Best regards,
Predrag

[Petar Mladenov]

Hi Predrag,

 Please check out the attached project where I extracted the default ItemContainerStyle of the RadTreeView and changed the Background of the RadTreeViewItems when they are Selected but not focused:

<LinearGradientBrush x:Key="ControlSubItem_Background_UnFocus" EndPoint="0,1">
            <!--<GradientStop Color="#FFf8f6f9" Offset="0"/>
            <GradientStop Color="#FFf0f0f0" Offset="1"/>-->
            <GradientStop Color="Blue" Offset="0" />
            <GradientStop Color="DeepSkyBlue" Offset="1" />
        </LinearGradientBrush>

<Border x:Name="SelectionUnfocusedVisual"
                           Grid.Column="2"
                           Grid.ColumnSpan="6"
                           BorderBrush="{StaticResource ControlSubItem_OuterBorder_UnFocus}"
                           BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}"
                           CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}"
                           Visibility="Collapsed">
                       <Border Background="{StaticResource ControlSubItem_Background_UnFocus}"
                               BorderBrush="{StaticResource ControlSubItem_InnerBorder_UnFocus}"
                               BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}"
                               CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}" />
                   </Border>

 
Please let us know if this satisfies you or not.  Greetings,
Petar Mladenov
the Telerik team

[Predrag]

Thank you very much. This is exactly what I needed.

[Mark]

Any chance you can get the selected/focused item to scroll into view if it is below display area.

Shorten the browser window, select the item at the bottom, scroll to the top, click the selector button - where is the selected item? Not in view...

[Hristo]

Hi,

You could take a look at the following blog post for about BringIntoView feature of RadTreeView: http://blogs.telerik.com/xamlteam/posts/11-01-12/treeview-bringintoview.aspx 
The post contains a sample project you could use to check if this approach is applicable to your case.

Kind regards,
Hristo
the Telerik team

[Mark]

Thanks Hristo, that is precisely what I was looking for, who'd of thunk it was right there in the object tree!

[Gopala]

I want the same thing but I am using MVVM model not code behind.

<telerik:RadTreeView ItemsSource="{Binding ReportRoots}"
                             SelectionMode="Extended"
                             IsDragDropEnabled="False"
                             IsEditable="False"
                             Grid.Row="1"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"                           
                             x:Name="rtvReportRoots"
                             SelectedItem="{Binding SelectedReportRoot, Mode=TwoWay}">
            <telerik:RadTreeView.ItemTemplate>
                <telerik:HierarchicalDataTemplate ItemsSource="{Binding Children}"
                                                  DataType="ViewModels:ReportRootEntityViewModel">
                    <Grid x:Name="NodeContainer">                       
                        <TextBlock Text="{Binding Path=Name}"
                                   Foreground="Gray"/>
                    </Grid>
                </telerik:HierarchicalDataTemplate>
            </telerik:RadTreeView.ItemTemplate>
        </telerik:RadTreeView>

In my viewmodel, I am assigning SelectedReportRoot = reportRoot. at this point, I want to expand treeview and drill down and select the item and move into view.

[Pavel R. Pavlov]

Hello Gopala,

In order to use one of the methods that bring items into the viewport of the RadTreeView control, you will have to make sure that the item is generated before attempting to visualize it. Have in mind that in MVVM scenarios we recommend using the BringPathIntoView() method. Its usage is demonstrated in the previous referenced article (this one).

Can you please clarify why it is an obstacle for you to implement the BringIntoView logic in your code behind? Please note that the BringIndexIntoVIew(), BringItemIntoView() and BringPathIntoView() methods (further described here) are implemented in the RadTreeView or in the RadTreeVeiwItems. Hence in order to use any of them you will have to have an instance of the control or the items.

However, there are other approaches that can be followed to manipulate visual elements from your viewmodel. For example this article describes how you can do this by using a message (IMessenger).

Regards,
Pavel R. Pavlov
the Telerik team

[Gopala]

Hi,
I am sorry, I guess I didnot explain you my problem/task clearly. Here you go. If you have any questions please let me know.

In my application we are using RadTreeView like below. We are using MVVM model

<telerik:RadTreeView ItemsSource="{Binding ReportRoots}"
                             SelectionMode="Extended"
                             IsDragDropEnabled="False"
                             IsEditable="False"
                             Grid.Row="1"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"                           
                             x:Name="rtvReportRoots"
                             SelectedItem="{Binding SelectedReportRoot, Mode=TwoWay}">
            <telerik:RadTreeView.ItemTemplate>
                <telerik:HierarchicalDataTemplate ItemsSource="{Binding Children}"
                                                  DataType="ViewModels:ReportRootEntityViewModel">
                    <Grid x:Name="NodeContainer">                       
                        <TextBlock Text="{Binding Path=Name}"
                                   Foreground="Gray"/>
                    </Grid>
                </telerik:HierarchicalDataTemplate>
            </telerik:RadTreeView.ItemTemplate>
        </telerik:RadTreeView>

When ever user selects a search result in another grid what I need to do is I need to expand the above RadTreeview and select one item in above RadTreeview. I wrote a code which is doing it but it is not working correctly. I just want to do I need to create a new control by extending RadTreeview or I can just use RadTreeview. Can you please give me sample application which does what I said above.

After selecting the item, I need to scroll the selected item into view. This is my exact task. I hope now you got what I need.

[Gopala]

Hi,

I continuation to my above reply. I wrote my code simiar to the one below. The performance is really bad. It's urgent we have a deadline

http://sladapter.blogspot.com/2010/11/how-to-bind-to-silverlight-treeview.html

[Gopala]

I was able to solve my issue. Please see below for what I did. Comments and suggestions are always welcomed to improve my code.

In my UI I added this under UserControl.Resources

    <telerik:ContainerBindingCollection x:Key="BindingCollection">
                    <telerik:ContainerBinding PropertyName="IsSelected"
                                              Binding="{Binding IsSelected,Mode=TwoWay}" />
                    <telerik:ContainerBinding PropertyName="IsExpanded"
                                              Binding="{Binding IsExpanded, Mode=TwoWay}" />
                </telerik:ContainerBindingCollection>

I add below in my <telerik:RadTreeView.ItemTemplate>

    <telerik:RadTreeView.ItemTemplate>
                    <telerik:HierarchicalDataTemplate ItemsSource="{Binding Children}"
                                                      DataType="ViewModels:ReportRootEntityViewModel"
                                                      telerik:ContainerBinding.ContainerBindings="{StaticResource BindingCollection}">

My ItemsSource is collection of ReportRootEntityViewModel. In this, I added three new properties.

One is Parent of type ReportRootEntityViewModel.

Two boolean properties IsSelected and IsExpanded

Now it just matter of getting correct element and setting properties as below

    ReportRootEntityViewModel result = GetReportRootNode(Convert.ToInt32(data[0]), reportRoot.Children);
                if (result != null)
                {
                  if (_previousSelectedReportRoots != null)
                  {
                    _previousSelectedReportRoots.Parent.Parent.IsExpanded = false;
                    _previousSelectedReportRoots.Parent.IsExpanded = false;
                    _previousSelectedReportRoots.IsExpanded = false;
   
                    _previousSelectedReportRoots.IsSelected = false;
                  }
   
                  result.Parent.Parent.IsExpanded = true;
                  result.Parent.IsExpanded = true;
                  result.IsExpanded = true;
   
                  result.IsSelected = true;             
                  SelectedReportRoot = result;
                 
                  SelectedReportRootDisplayName = data[1];
                 DisplayLabel = "Display Name :";
                  _previousSelectedReportRoots = SelectedReportRoot;
                  return;
                } 

 

 

[Tina Stancheva]

Hello Gopala,

We've posted a reply in the other forum thread you started and it will best to keep the communication there.

Regards,
Tina Stancheva
the Telerik team

[Gopala]

Ok...