How to enable the user to find a TreeViewItem

[ScottHutchinson]

I appreciate any help y'all can give me with this issue.

In my repo (an evolution of my repo that uses the RoseTree, which some of you helped me with about a year ago), in this commit, I have added a Search TextBox to enable the user to enter text so they can find a tree view node whose name or type contains the specified text. In the production version of this repo, the tree sometimes contains thousands of nodes in up to about 13 levels of hierarchy, so I want to give the user a way to find nodes without scrolling through all those nodes.

FIXED 1. After this commit, the search begins as soon as the user starts typing. That will probably be too slow, so how can I change it so it starts searching only when the user clicks Enter?
FIXED 2. Currently, the code selects a matching node only after the user enters too much text and then clicks backspace (e.g., click the 'Expand All' button, then type 'banjoss' in the Search box, then click backspace to find the node containing 'banjos', which the code then selects. Scroll down part of a screen to see the selected node.). Is this an Elmish.WPF bug or just something I'm doing wrong? Possibly implementing item 1 above would fix it.

FIXED 3. After clicking backspace, the code selects the matching node, but it doesn't scroll to reveal it if it is off screen. How could I make it scroll to the matching node?
4. If there are multiple matching nodes, the code only selects the last one. How could I make it stop searching after it finds the first or next match? Also, I would be open to other designs if appropriate. For instance, instead of selecting matches, the code could expand the matching portion of the tree. For instance, the user could click the 'Collapse All' button and then search to expand the branches that reveal the matching node. That is how I frequently use Find in Notepad++ when viewing a large XML file with thousands of nodes in a tree.

[TysonMN]

1. Have two different strings in the model. One is the contents of the text box. When the user clicks enter, copy that string to the second string, which is what is used to do the filtering.

Try that first. Then comes back and let us know if 2, 3, and 4 are still issues for you.

[ScottHutchinson]

Sounds good. Thank you. What is the Elmish way to handle the enter key in a textbox? Is there a sample for that?

[ScottHutchinson]

I found this example on SO, which I think will fit with Elmish. I'll try it.

<TextBox>
  <TextBox.InputBindings>
    <KeyBinding Command="{Binding Path=CmdSomething}" Key="Enter" />
  </TextBox.InputBindings>
</TextBox>

[ScottHutchinson]

Progress. This commit resolves item 1 and 2. Please help with items 3 and 4. Thanks!

[TysonMN]

3. I don't recall ever doing this myself. I asked Google's Bard, and the answer seems good.

https://g.co/bard/share/004e050593ed

Get that working first. Then let's us know if you still haven't solved item 4.

[ScottHutchinson]

I'm going to try to add a Selected item event handler in C# to call the ScrollToItem method. Not sure how else to do it.

EDIT: Or maybe I could do it using Behaviors like in this sample. But I'll also see if it can be done without Behaviors.

EDIT2: This might work, if the command parameters includes a reference to the ListViewItem.

EDIT3: I got it working like below. Bard answered your question for a list, but that answer was no good for a TreeView.

        // Based on https://stackoverflow.com/a/9494484/5652483
        private void TreeViewSelectedItemChanged(object sender, RoutedEventArgs e) {
            if (sender is TreeViewItem item) {
                item.BringIntoView();
                e.Handled = true;
            }
        }

[ScottHutchinson]

This commit partially resolves item 3. But it only works if the selected item's ancestors are all expanded. So I still need to add some code to expand those ancestors.

[ScottHutchinson]

This commit expands the selected item's ancestors. It works sometimes, but not all the time. I need help. I think I need an OutMsg to update the SearchFoundId field in the model instead of in the unmodifiedModel, but I'm not sure how to do that.

            "IsExpanded" |> Binding.oneWay(fun ((m: Model), { Self = (s: RoseTree<FieldData>) }) -> 
                level < m.ExpandLevel || isAncestorOfFoundField s
            )
            "IsSelected" |> Binding.oneWay(fun ((m: Model), { Self = (s: RoseTree<FieldData>) }) -> 
                let isSelected = isFoundInSearch m.SearchEnterText s.Data
                if isSelected then
                    // TODO: Send a SearchFoundMsg to update the model instead of the unmodifiedModel.
                    unmodifiedModel <- { unmodifiedModel with SearchFoundId = Some s.Data.Id }
                    Debug.WriteLine($"****** Name: {s.Data.Name}, Type: {s.Data.Type} selected")

                isSelected
            )

[TysonMN]

I reformatted my computer recently and don't have it set back up yet.

@marner2 or @LyndonGingerich, can either of you help with this?

[ScottHutchinson]

I seem to have one or more use cases where I need to update the model when the "IsSelected" field binding above finds a matching item. But I can't figure out how to make that happen.

[LyndonGingerich]

1. After this commit, the search begins as soon as the user starts typing. That will probably be too slow, so how can I change it so it starts searching only when the user clicks Enter?

Off the top of my head, the easiest potential solution is probably to set UpdateSourceTrigger on the search TextBox binding.

Reading the thread.

[LyndonGingerich]

This commit expands the selected item's ancestors. It works sometimes, but not all the time. I need help. I think I need an OutMsg to update the SearchFoundId field in the model instead of in the unmodifiedModel, but I'm not sure how to do that.

            "IsSelected" |> Binding.oneWay(fun ((m: Model), { Self = (s: RoseTree<FieldData>) }) -> 
                let isSelected = isFoundInSearch m.SearchEnterText s.Data
                if isSelected then
                    // TODO: Send a SearchFoundMsg to update the model instead of the unmodifiedModel.
                    unmodifiedModel <- { unmodifiedModel with SearchFoundId = Some s.Data.Id }
                    Debug.WriteLine($"****** Name: {s.Data.Name}, Type: {s.Data.Type} selected")

                isSelected
            )

I seem to have one or more use cases where I need to update the model when the "IsSelected" field binding above finds a matching item. But I can't figure out how to make that happen.

No, you're right. There is no way to update the model from a one-way binding. We have to deal with the issue earlier.

If I understand correctly, your problem is that your model is not always consistent: SearchFoundId is not always up-to-date with the results of isFoundInSearch. Thus, wherever you are using SearchFoundId, it does not contain all the information you need.

Normalizing data is usually a good idea. Have you considered removing SearchFoundId from the model and instead searching the tree using isFoundInSearch? This would remove the possibility of data inconsistency (possibly at the cost of performance). Or you could update SearchFoundId in your update function whenever Model.SearchEnterText or any RoseTree.Data is set (caching the computation results, which is famously difficult).

[LyndonGingerich]

You're more experienced than me, but I would suggest avoiding a mutable model identifier if at all possible. That feels like reimplementing Elmish. If you're wanting to avoid triggering binding updates, you can do that with Binding.addLazy.

[ScottHutchinson]

FIXED in this commit also getting this error occasionally.

Exception thrown: 'System.InvalidOperationException' in System.Core.dll
System.Windows.Data Error: 8 : Cannot save value from target back to source. BindingExpression:Path=IsSelected; DataItem='DynamicViewModel`2' (HashCode=34416674); target element is 'TreeViewItem' (Name=''); target property is 'IsSelected' (type 'Boolean') InvalidOperationException:'System.InvalidOperationException: Property path is not valid. 'System.Dynamic.DynamicObject+MetaDynamic' does not have a public property named 'Items'.
   at CallSite.Target(Closure , CallSite , Object , Object )
   at System.Dynamic.UpdateDelegates.UpdateAndExecuteVoid2[T0,T1](CallSite site, T0 arg0, T1 arg1)
   at MS.Internal.DynamicPropertyAccessorImpl.SetValue(Object component, Object value)
   at MS.Internal.Data.PropertyPathWorker.SetValue(Object item, Object value)
   at System.Windows.Data.BindingExpression.UpdateSource(Object value)'

[LyndonGingerich]

This line must be the issue somehow. It's a TreeViewItem style, it's setting IsSelected, and it's setting it to binding IsSelected.