Unplanned
Last Updated: 25 Jul 2022 11:38 by ADMIN
John
Created on: 20 Jul 2022 18:36
Category: UI for WPF
Type: Feature Request
2
RadNavigationView Expand/Collapse All

So, if there is a solution to this, I haven't found it yet after scouring the documentation and the internet.

Using your example in the WPF Demo, I created a custom object for my items that I bind to the RadNavigationView.ItemsSource. Yours was called NavigationItemModel. Mine is called ShellMenuItem. ShellMenuItem inherits from UserControl, and implements INotifyPropertyChanged, and ICommandSource. All bindings to my properties are wired up in the xaml and work great (EXCEPT FOR THE ISEXPANDED PROPERTY. Next, I have several properties that are pulled from a database, or can be set programmatically in code, like Id, ParentId, Header, NodeType, TargetPageType (Page, Window, etc), TargetViewModelType, etc... Just standard properties. These are so I can programmatically send these dynamic items menu items, pulled from a database, to the correct View and ViewModel. ALL OF MY PROPERTIES WORK FINE, and when I click on a menu item, if it is a page, it opens in the frame, if it is a window, it opens a window, etc... Everything works fine, except the IsExpanded. So, here is the issue. I have a property on ShellMenuItem named IsExpanded. When I try to set this property, the ShellMenuItems do not collapse or expand. Again, I have INotifyPropertyChanged implemented.

On the form, I have a toggle button to expand/collpase all items in the RadNavigationView. I have it's Checked event bound to a command in my ViewModel. 

<ToggleButton Content="TestExpandAll">
     <i:Interaction.Triggers>
          <i:EventTrigger EventName="Checked">
               <i:InvokeCommandAction Command="{Binding ElementName=_this, Path=DataContext.CmdExpandMenus}" PassEventArgsToCommand="True" />
          </i:EventTrigger>
      </i:Interaction.Triggers>
</ToggleButton>
public ICommand CmdExpandMenus { get { return new RelayCommand<RoutedEventArgs>(OnExpandMenus); } }

This fires correctly in my code, at which point I loop through the RadNavigationMenu's ItemsSource and set each property to IsExpanded = true; As shown below. The button should expand all items if the togglebutton state IsChecked, else, it should collpase all items. I have also tried to loop through the actual bound list which likewise, does not work. I can not find a way to get at the entire list of RadNavigationViewItems or even cast my items to a RadNavigationViewItem, even though the ItemContainerStyle's target type is RadNavigationViewItem. There has got to be a simpler way to achieve this. 

        private void OnExpandMenus(RoutedEventArgs? e)
        {
            //foreach (var item in this.StaticMenuItems)
            //{
            //    item.IsExpanded = true;
            //}

            foreach (var shellMenuItem in this.MainMenu.ItemsSource)
            {
                var itm = shellMenuItem;
                var itmType = itm.GetType();
                //itmType is ShellMenuItem
                var menuItem = shellMenuItem as ShellMenuItem;
                //var targetType = this.MainMenu.ItemContainerStyle.TargetType;
                //targetType is RadNavigationViewItem
                menuItem.IsExpanded = true;
            }
        }

I have easily achieved this effect on many other controls, and you even have predefined Methods to perform this on controls such as RadTreeViewList.

    void treeListView_DataLoaded(object sender, EventArgs e) 
    { 
        treeListView.DataLoaded -= treeListView_DataLoaded; 
        treeListView.ExpandAllHierarchyItems();    
    } 

Can you add a method to the RadNavigationView to ExpandAllHierarchyItems(true/false) or just add 2 methods...

ExpandAllHierarchyItems() and CollapseAllHierarchyItems()

If this is not feasible, then you should update your demo to show how to accomplish this with a custom menu item. Im sure I could make my ShellMenuItem inherit directly from RadNavigationViewItem but in my control library, I dont have any references to Telerik because there are applications that use ShellMenuItem that do not use Telerik at all, and we shouldnt have to make our generic controls inherit from a 3rd party control to make this work. It seems to me that if you have a control that allows a hierarchy of items, and those controls/classes can be expanded or collapsed, then you should ALWAYS add the methods above to those controls/classes. Or perhaps you could create an interface named IExpandable, and any control that you guys create that can be expanded/collapsed, could implement that interface and have access to the ExpandAll/CollapseAll funtionality.

Thanks,

John 

 

4 comments
ADMIN
Dilyan Traykov
Posted on: 25 Jul 2022 11:38

Hello John,

Thank you for the clarification and the provided images.

If I understand correctly, you're now able to achieve the desired result and the only request now is to expose the two methods (ExpandAllHierarchyItems and CollapseAllHierarchyItems) of the control so that this functionality can be accomplished out of the box.

If I am, however, mistaken and there is anything else you still need assistance with, please let me know.

Regards,
Dilyan Traykov
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.

John
Posted on: 21 Jul 2022 18:33

Yes, I will clarify what the issue was. It was pretty foolish on my part. I was setting the style for the RadNavigationViewItem twice, and was not doing the binding for the IsExpanded property in the style defined in Resources, while the ItemContainerStyle was being set properly, and the two were conflicting, as both were targeting RadNavigationViewItem (without a dedicated x:Key).

<telerik:RadNavigationView.Resources>
<telerik:StringToGlyphConverter x:Key="StringToGlyphConverter" />
<Style TargetType="telerik:RadNavigationViewItem">
...
</Style>
</telerik:RadNavigationView.Resources>

<telerik:RadNavigationView.ItemContainerStyle>
<telerik:StringToGlyphConverter x:Key="StringToGlyphConverter" />
<Style TargetType="telerik:RadNavigationViewItem">
...
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
...
</Style>
</telerik:RadNavigationView.ItemContainerStyle>

 

So the final product is this

     
ADMIN
Dilyan Traykov
Posted on: 21 Jul 2022 15:43

Hi John,

I'm glad to hear that you were able to resolve the issue.

Can you please, however, clarify its exact cause? I tested manually setting the IsExpanded property of the items, and this works as expected with our latest release even without the workaround from the post you shared. Were you using an older version of the suite, or was there something else?

To demonstrate, I'm attaching a small sample project where setting the IsExpanded property of the items correctly expands/collapses them.

As for your request, I believe the control can benefit from the two additional methods - ExpandAllHierarchyItems and CollapseAllHierarchyItems. That is why I've approved this feature request and if it accumulates enough votes, we will consider exposing such methods in the future.

Regards,
Dilyan Traykov
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/.

Attached Files:
John
Posted on: 20 Jul 2022 19:52

I finally figured out the issue with the way I was trying to accomplish the Expand/Collapse All, but I would still like to see the feature added to be able to quickly accomplish an Expand/Collapse All on Expandable controls, without having to loop through the list and setting every one. I think every control that allows items to be expanded and collapsed should have an exposed method to do so. 

 

I found the following post helpful.

https://feedback.telerik.com/wpf/1502876-navigationview-binding-to-the-isexpanded-property-doesn-t-work-initially