Keyboard navigation for child items

[Scott]

I have noticed keyboard navigation doesn't work as I was expecting and I wanted to see if the behavior is normal. You can see the same behavior I am seeing in the IsExpandedRowBinding example. The keyboard navigation works as expected for the first level of items but navigation of the child items does not work the same. Pressing left or right does not expand or collapse child items and pressing up or down does not change the selected child item.  

Do I need to handle the navigation of the child items myself or is there something I can do to get the TreeListView to handle it?

 

Thanks

[Stefan Nenchev]

Hi Scott,

I have tried reproducing the behavior you have reported but was not able to. I have tested it on the TreeListView - IsExpanded Binding demo from our WPF Demos Application. Is this the sample you refer to? Please have a look at the video I have recorded for you - http://screencast.com/t/jTVykC8WXOq9. As observed, the arrows navigation is working as expected. Pressing the right arrow would expand the row, if possible and if it is not already expanded. If it is already expanded, the cell selection is changed to the next possible on the row. What is the behavior that you observe?

Regards,
Stefan Nenchev
Telerik by Progress

[Scott]

Thanks for taking the time to create the video. That is the behavior I would expect but it is not what I am seeing.

I think I was getting mixed up with the examples. The example I was thinking of was the one provided in this thread by Stefan X1. With this example you can see the child items not being selected by the keyboard. I had previously added children to "Pepe Reina" and was able to use it to reproduce the left and right keys not expanding the row. I was going to attach the updated example here but it looks like I am not able to. You should be able to see it in the one I uploaded in the feedback portal here.

[Stefan Nenchev]

Hello Scott,

Thank you for the clarification.

Actually, the RadTreeListView is designed to represent a hierarchical structure for homogenous data. So in the sample provided if the Club has a collection of ChildClubs the navigation would work. As advised in the Getting Started section of RadTreeListView,  for heterogeneous data we advise on using Hierarchical RadGridView. We will consider making this note more noticeable so that further misleadings are avoided.

Regards,
Stefan Nenchev
Telerik by Progress

[Scott]

Thanks. I modified the sample project so all items are of type Club and sure enough the keyboard behavior now works as expected.

I was hoping to use a base class that all my classes could inherit from to reduce the amount of changes I am going to have to make to my project but that didn't work. This is a very restrictive (and frustrating) requirement in order to get the keyboard to work with the RadTreeListView. Unfortunately, the Hierarchical RadGridView will not meet our requirements so that is not an option.

[Scott]

I ended up writing code to handle the keyboard events myself. For anyone else who runs into this problem see the below code for the SelectionChanged and Keyup handlers that works around the problem.

 

    DateTime lastSelectionChange = DateTime.Now;


        private void treeListView_SelectionChanged(object sender, SelectionChangeEventArgs e)
        {
            lastSelectionChange = DateTime.Now;
        }


        private void treeListView_KeyUp(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Down)
            {
                if (DateTime.Now.Subtract(lastSelectionChange).TotalMilliseconds < 200)
                    //Handle cases where the TreeListView handles the keyboard events correctly
                    return;


                TreeListViewRow selectedRow = (TreeListViewRow)this.treeListView.GetRowForItem(this.treeListView.SelectedItem);


                if(selectedRow != null)
                {
                    if(selectedRow.IsExpanded && selectedRow.Items.Count > 0)
                    {
                        this.treeListView.SelectedItem = selectedRow.Items[0];
                    }
                    else
                    {
                        if (selectedRow.ParentRow != null)
                        {
                            int selectedIndex = selectedRow.ParentRow.Items.IndexOf(this.treeListView.SelectedItem);


                            if ((selectedIndex + 1) < selectedRow.ParentRow.Items.Count)
                            {
                                this.treeListView.SelectedItem = selectedRow.ParentRow.Items[selectedIndex + 1];
                            }
                        }
                    }
                }
            }
            else if(e.Key == Key.Up)
            {
                if (DateTime.Now.Subtract(lastSelectionChange).TotalMilliseconds < 200)
                    //Handle cases where the TreeListView handles the keyboard events correctly
                    return;


                TreeListViewRow selectedRow = (TreeListViewRow)this.treeListView.GetRowForItem(this.treeListView.SelectedItem);


                if (selectedRow != null && selectedRow.ParentRow != null)
                {
                    int selectedIndex = selectedRow.ParentRow.Items.IndexOf(this.treeListView.SelectedItem);


                    if (selectedIndex > 0)
                    {
                        this.treeListView.SelectedItem = selectedRow.ParentRow.Items[selectedIndex - 1];
                    }
                    else
                    {
                        this.treeListView.SelectedItem = selectedRow.ParentRow.Item;
                    }
                }
            }
            else if (e.Key == Key.Right)
            {
                TreeListViewRow selectedRow = (TreeListViewRow)this.treeListView.GetRowForItem(this.treeListView.SelectedItem);
                if (selectedRow != null && selectedRow.IsExpandable)
                {
                    selectedRow.IsExpanded = true;
                }
            }
            else if(e.Key == Key.Left)
            {
                TreeListViewRow selectedRow = (TreeListViewRow)this.treeListView.GetRowForItem(this.treeListView.SelectedItem);
                if (selectedRow != null && selectedRow.IsExpandable)
                {
                    selectedRow.IsExpanded = false;
                }
            }
        }

[Scott]

FYI, the above solution only works on a finite number of tree levels. This isn't a problem for the project I am working on but it could do with some improvement to handle any number of tree levels. It at least demonstrates that homogenous data is not required in order to have working keyboard navigation.

[Stefan Nenchev]

Hi Scott,

Thank you for sharing the approach. Indeed, it might be a way to go, though some further modifications might be required to achieve consistency. However, the best approach would be to use the Hierarchical RadGridView if possible.  

Regards,
Stefan Nenchev
Telerik by Progress