How to set independent IsEnable for navigation items

2 Answers 94 Views
NavigationView (Hamburger Menu) Styling
Psyduck
Top achievements
Rank 5
Bronze
Bronze
Bronze
Psyduck asked on 21 Jun 2021, 08:06 AM | edited on 21 Jun 2021, 11:54 AM

Hello.

 

It will be easier to understand if you refer to the image.
The user wants to independently enable the navigation item according to the user's selection.

My example created a structure like that, but it doesn't work.

Is there any good way?

 

Thanks.

 

p.s - In combination with the above functions, can I control A and B Views with Enable at the same time by adding a C Button(True/False)?

2 Answers, 1 is accepted

Sort by
1
Accepted
Dinko | Tech Support Engineer
Telerik team
answered on 24 Jun 2021, 08:07 AM

Hi KIM,

As a follow-up to my previous reply. 

I notice what the problem is. The Navigations collection property always returns a new collection. You need to ensure that a new collection is created only when this property is null. Check the following code snippet.

public class MainWindowViewModel : ViewModelBase
{
    private ObservableCollection<NavigationModel> navigations;
    public ObservableCollection<NavigationModel> Navigations
    {
        get
        {
            if (navigations == null)
            {
                navigations = new ObservableCollection<NavigationModel>
            {
                new NavigationModel { IconGlyph = "&#xe90a", Title = "View", Code ="view" },
                new NavigationModel
                {
                    IconGlyph = "&#xe90b", Title = "A View", Code="a_view", IsSelectable = false, IsEnabled = false,
                    SubItems = new ObservableCollection<NavigationModel>
                    {
                        new NavigationModel { IconGlyph = "&#xe90c", Title = "A - 1", Code="a_1", },
                        new NavigationModel { IconGlyph = "&#xe90d", Title = "A - 2", Code="a_2", },
                    },
                },
                new NavigationModel
                {
                    IconGlyph = "&#xe90e", Title = "B View", Code="b_view", IsSelectable = false, IsEnabled = IsBState,
                    SubItems = new ObservableCollection<NavigationModel>
                    {
                        new NavigationModel { IconGlyph = "&#xe90f", Title = "B - 1", Code="b_1", },
                        new NavigationModel { IconGlyph = "&#xe910", Title = "B - 2", Code="b_2", },
                    },
                },
                new NavigationModel { IconGlyph = "&#xe911", Title = "C View", Code ="c_view" },
            };
            }

            return navigations;
        }
    }
. . . . . . .

Also, the commands are setting IsAState and IsBState properties. I don't see the connection between them and the IsEnabled property of the items. You could modify the command executed method the following way.

public ICommand ATrueCommand { get => new DelegateCommand(x => Navigations[1].IsEnabled = true); }
public ICommand AFalseCommand { get => new DelegateCommand(x => Navigations[1].IsEnabled = false); }


public ICommand BTrueCommand { get => new DelegateCommand(x => Navigations[2].IsEnabled = true); }
public ICommand BFalseCommand { get => new DelegateCommand(x => Navigations[2].IsEnabled = false); }

You can easily implement the same logic using CheckBox. It depends here where you want to place the checkboxes and how you want to perform the same logic: in code behind or in MVVM.

Regards,
Dinko
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.

0
Dinko | Tech Support Engineer
Telerik team
answered on 24 Jun 2021, 07:52 AM

Hello KIM,

Thank you for the provided project.

I was able to observe this behavior. At this moment I am not sure why this is happening. It seems that after enabling the item it is disabled afterward. I will need more time to debug the project. I will contact you again in the next couple of days.

Regards,
Dinko
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.

Tags
NavigationView (Hamburger Menu) Styling
Asked by
Psyduck
Top achievements
Rank 5
Bronze
Bronze
Bronze
Answers by
Dinko | Tech Support Engineer
Telerik team
Share this question
or