Difference between mouse click and source selection of SelectedItem?

4 Answers 32 Views
ListBox TreeView
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Bronze
Psyduck asked on 23 Aug 2021, 05:01 AM

Hello.

I've attached some examples.

This is different when I do a mouse click event and a SelectedItem on the source.

When selecting with the mouse, the default color of Fluent is cyan.

When defining SelectedItem by code, it is defined with a gray background. (SelectedItem = data)
When you select the SelectedItem with the mouse, it is selected again and it is changed to a cyan color.

is this correct?
How do I solve it?

 

4 Answers, 1 is accepted

Sort by
1
Accepted
Stenly
Telerik team
answered on 30 Aug 2021, 03:19 PM

Hello Psyduck,

Thank you for providing images and a modified project.

This is the default behavior of the control because when the focus is lost, different styles from the Fluent theme are applied to the items - namely, the items go into the SelectionUnfocused state. So, to change that, the default control template of the RadTreeViewItem element needs to be edited.

The reason I suggested bringing the focus back was that in the case of using a Button for the selection, changing the focus did not result in any undesired behavior. When integrated with other controls, however, this approach would not be sustainable.

I have modified the provided project to use the NoXaml assemblies with the implicit styling theming approach. This allows to easily modify the default template without having to extract the whole style. That said, the project implements the mentioned approach without changing the focus of the controls. And the necessary trigger is edited (it is commented with "SelectionUnfocused state") to match the expected behavior.

In conclusion, could you try this approach and let me know how it goes?

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Psyduck
Top achievements
Rank 4
Bronze
Bronze
Bronze
commented on 06 Sep 2021, 02:18 AM

Thanks for the example.

My project cannot be used with noxaml, so I modified it to xaml and tested it.

As a result it works the way I want it to.

 

And I found one difference.
All sources of ControlTemplate are the same.
I confirmed that only the Property="mat:MaterialAssist.CheckedBrush" of <!-- SelectionUnfocused state --> was changed.

 

Other than that, nothing has changed. Do I have to edit the whole thing to do this?

Stenly
Telerik team
commented on 07 Sep 2021, 04:01 PM

In the current scenario, the extraction of the control template is the only reliable solution that I can suggest.
1
Stenly
Telerik team
answered on 25 Aug 2021, 01:05 PM

Hello Psyduck,

Thank you for the provided project and image.

The reason for this result is that the RadTreeView control loses focus when the button is clicked and that the treeview items have a different appearance when they are not focused (coming from their default style).

To change this behavior, you could use the SelectionChanged event of the RadTreeView control and set the focus to the tree every time the event fires (which also occurs when the button is clicked). The code-behind method implementation should look as follows:

private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var tree = (RadTreeView)sender;

    tree.Focus();
}

That said, I have modified the provided project to use this approach, so could you try it out and let me know how it goes?

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

1
Stenly
Telerik team
answered on 27 Aug 2021, 02:15 PM

Hello Psyduck,

If the OnSelectionChanged event approach is not preferred, you could set the FocusManager.FocusedElement attached property to the RadTreeView control. This property allows the tree to regain focus after it is lost. It is set as follows:

<telerik:RadTreeView  FocusManager.FocusedElement="{Binding RelativeSource={RelativeSource Mode=Self}}">
Or, you could set it to the button and every time it gets pressed, the last tree view item will take focus.
<telerik:RadButton FocusManager.FocusedElement="{Binding ElementName=radTree}"/>

That said, could you give this approach a try and let me know how it goes? 

Regards,
Stenly
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Psyduck
Top achievements
Rank 4
Bronze
Bronze
Bronze
commented on 30 Aug 2021, 02:04 AM

Thank you.

This works just fine with a single control.

But it didn't work in my project.

 

I'm not sure if this is an error.

1. There are ListBox and TreeView.

When a listbox is selected in the treeview, the treeview loses focus.
Other than this, your suggested FocusManager works fine.

2. GridView was added in step 1.

Treeview loses focus when clicking on gridview.

 

Attach images and additional examples.

Is this a common situation?

0
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Bronze
answered on 26 Aug 2021, 01:18 AM

Hello.

This works exactly.

I made it here with the MVVM pattern. This also actually works.

Is this different from code-behind?


<telerik:RadTreeView>
  <telerik:EventToCommandBehavior.EventBindings>
      <telerik:EventBinding EventName="SelectionChanged"
                            Command="{Binding SelectionChangedCommand}"
                            PassEventArgsToCommand="True"/>
  </telerik:EventToCommandBehavior.EventBindings>
</telerik:RadTreeView>

public ICommand SelectionChangedCommand => new DelegateCommand(obj =>
{
    //var tree = (RadTreeView)obj;
    //tree.Focus();
    if(obj is System.Windows.Controls.SelectionChangedEventArgs arg)
    {
        var tree = (RadTreeView)arg.OriginalSource;
        tree.Focus();
    }
});

And I want to keep this simple.
So I thought of a xaml style trigger but I couldn't get it to work.

Is there a way to apply it directly in style?
(Ignore the long code. I want the short code.)

 

Thanks.

Tags
ListBox TreeView
Asked by
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Bronze
Answers by
Stenly
Telerik team
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Bronze
Share this question
or