Change Treeview property Disabled in MainLayout.razor

[Vince]

Hi,

I have a TreeView in MainLayout which works great. When a certain page is opened by it, I need to set the TreeView property Disabled to True so the user can not go to another page. After the user has submitted some data, the TreeView property Disabled has to set again to False.

Is this possible?

[Prasanth Madhaiyan]

Hi Vince,

 

Greetings from Syncfusion support.

 

To prevent a specific node from being selected in the Blazor TreeView component and avoid page navigation, you can use the NodeSelecting event and set the Cancel property of the event arguments to true. This will cancel the selection action for that node.

 

Additionally, we have implemented page navigation using the NavigateUrl property of the Blazor TreeView component.

 

Refer to the below code snippets.

 

[MainLayout.razor]

 

...

 

<SfTreeView CssClass="main-treeview"  TValue="TreeData">

    <TreeViewFieldsSettings Id="NodeId" NavigateUrl="NavigateUrl" Text="NodeText" IconCss="IconCss" DataSource="Treedata" HasChildren="HasChild" ParentID="Pid">

    </TreeViewFieldsSettings>

    <TreeViewEvents TValue="TreeData" NodeSelecting="NodeSelecting"></TreeViewEvents>

</SfTreeView>

 

@code {

    ...

 

    public void NodeSelecting(NodeSelectEventArgs args)

    {

        if (args.NodeData.Text == "Deployment") {

            args.Cancel = true;

        }

    }

}

...

 

For your reference, we have attached the sample and documentation. 

 

Sample: Attached as a zip file 

 

Documentation: https://blazor.syncfusion.com/documentation/treeview/node-selection#cancel-the-node-selection

 

Check out the shared details and let us know if you need any further assistance.

 

Regards,

Prasanth Madhaiyan.

Attachment: BlazorDotNet9Sample_8e7209bd.zip

[Vince]

Hi Prasanth Madhaiyan,

Thanks for your reply.

How can I set the NodeSelecting Cancel property to True from a page outside MainLayout.razor (i.e. in page Weather.razor)?

[Prasanth Madhaiyan]

Hi Vince,

Based on the shared details, we understand that you want to set the NodeSelecting event argument's Cancel value from another Razor page (Whether.razor) at your end. However, we would like to inform you that the NodeSelecting event is triggered only during manual interaction in the TreeView component. This event cannot be triggered from other Razor pages.

However, we have DisableNodesAsync and EnableNodesAsync methods in the TreeView component, which allow you to disable or enable a specific node dynamically from another Razor page.

You can use CascadingValue to share the MainLayout component reference across its children.

Refer to the below code snippets.

[MainLayout.razor]

...

<CascadingValue Value="this">

    <div class="page">

        <div id="wrapper">

            <div>

                ...

            <SfSidebar @attributes="@HtmlAttribute" Width="290px" Target=".e-main-content" MediaQuery="(min-width:600px)" @bind-IsOpen="SidebarToggle">

                <ChildContent>

                    <div class="main-menu">

                        ...

                        <div>

                            <SfTreeView CssClass="main-treeview" TValue="TreeData" @ref="treeObj">

                                <TreeViewFieldsSettings Id="NodeId" NavigateUrl="NavigateUrl" Text="NodeText" IconCss="IconCss" DataSource="Treedata" HasChildren="HasChild" ParentID="Pid">

                                </TreeViewFieldsSettings>

                            </SfTreeView>

                        </div>

                    </div>

                </ChildContent>

            </SfSidebar>

            <!-- end of sidebar element -->

            @*main-content declaration*@

            <div class="main-content" id="main-text">

                <div class="sidebar-content">

                    <div class="content">

                        @Body

                    </div>

                </div>

                <!--end of main content declaration -->

            </div>

        </div>

    </div>

</CascadingValue>

@code {

    SfTreeView<TreeData> treeObj;

    public async Task DisableNode(string[] node)

    {

        await treeObj.DisableNodesAsync(node);

    }

    public async Task EnableNode(string[] node)

    {

        await treeObj.EnableNodesAsync(node);

    }

    ...

}

...

[Wheather.razor]

@page "/weather"

@attribute [StreamRendering]

<PageTitle>Weather</PageTitle>

@using BlazorDotNet9Sample.Components.Layout

@using Syncfusion.Blazor.Buttons

<h1>Weather</h1>

<SfButton OnClick="CallDisableNode">Disable Deployment Node</SfButton>

<SfButton OnClick="CallEnableNode">Enable Deployment Node</SfButton>

@code {

    [CascadingParameter] MainLayout LayoutComponent { get; set; }

    private async Task CallDisableNode()

    {

        if (LayoutComponent != null)

        {

            await LayoutComponent.DisableNode(new string[] { "02" });

        }

    }

    private async Task CallEnableNode()

    {

        if (LayoutComponent != null)

        {

            await LayoutComponent.EnableNode(new string[] { "02" });

        }

    }

}

For your reference, we have attached the sample.

Sample: Attached as a zip file.

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: BlazorDotNet9Sample_437fd3a4.zip

[Vince]

Thanks Prasanth Madhaiyan, this is what I was looking for!

[Shereen Shajahan]

Hi Vince,

Thank you for the update. Please get back to us for assistance in the future.

Regards,

Shereen