Programmatically select item and focus it

15 posts, 1 answers
  1. Predrag
    Predrag avatar
    13 posts
    Member since:
    Oct 2011

    Posted 08 Dec 2011 Link to this post

    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

  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 08 Dec 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Predrag
    Predrag avatar
    13 posts
    Member since:
    Oct 2011

    Posted 09 Dec 2011 Link to this post

    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
  5. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 14 Dec 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Predrag
    Predrag avatar
    13 posts
    Member since:
    Oct 2011

    Posted 26 Dec 2011 Link to this post

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

  7. Mark
    Mark avatar
    50 posts
    Member since:
    Dec 2010

    Posted 06 Mar 2012 Link to this post

    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...
  8. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 06 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  9. Mark
    Mark avatar
    50 posts
    Member since:
    Dec 2010

    Posted 06 Mar 2012 Link to this post

    Thanks Hristo, that is precisely what I was looking for, who'd of thunk it was right there in the object tree!
  10. Gopala
    Gopala avatar
    28 posts
    Member since:
    Jul 2012

    Posted 28 Mar 2013 Link to this post

    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.
  11. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 01 Apr 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  12. Gopala
    Gopala avatar
    28 posts
    Member since:
    Jul 2012

    Posted 01 Apr 2013 Link to this post

    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.
  13. Gopala
    Gopala avatar
    28 posts
    Member since:
    Jul 2012

    Posted 01 Apr 2013 Link to this post

    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
  14. Gopala
    Gopala avatar
    28 posts
    Member since:
    Jul 2012

    Posted 01 Apr 2013 Link to this post

    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;
                    } 

     

     

  15. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 03 Apr 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  16. Gopala
    Gopala avatar
    28 posts
    Member since:
    Jul 2012

    Posted 03 Apr 2013 Link to this post

    Ok...
Back to Top
DevCraft banner