EJ2 TreeView for Sidebar Navigation Menu, Preserve selected after move to another page

[ISMAIL HAMZAH]

Hi,

I'm planning using EJ2 TreeView for Sidebar Navigation Menu by adding url like below:

        {

            nodeId: '05', nodeText: 'API Reference', iconCss: 'icon-code icon',

            nodeChild: [

                { nodeId: '05-01', nodeText: 'Calendar', iconCss: 'icon-circle-thin icon', url: '/Dashboards/DefaultDashboard' },

                { nodeId: '05-02', nodeText: 'DatePicker', iconCss: 'icon-circle-thin icon', url: '/Dashboards/DefaultDashboard' },

                { nodeId: '05-03', nodeText: 'DateTimePicker', iconCss: 'icon-circle-thin icon', url: '/Dashboards/DefaultDashboard' },

                { nodeId: '05-04', nodeText: 'DateRangePicker', iconCss: 'icon-circle-thin icon', url: '/Dashboards/DefaultDashboard' },

                { nodeId: '05-05', nodeText: 'TimePicker', iconCss: 'icon-circle-thin icon', url: '/Dashboards/DefaultDashboard' },

                { nodeId: '05-06', nodeText: 'SideBar', iconCss: 'icon-circle-thin icon', url: '/Dashboards/DefaultDashboard' }

            ]

        },

and then handling its nodeClicked like below:

    // TreeView initialization

    var mainTreeView = new ej.navigations.TreeView({

        cssClass: "main-treeview",

        fields: { dataSource: data, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: "iconCss", selected: "selected" },

        expandOn: 'Click',

        nodeClicked: (args) => {

            var data = mainTreeView.getTreeData(args.node);

            if (data[0].url) {

                window.location = data[0].url;

            }

        },

        nodeSelected: (args) => {

            console.log(args);

        }

    });

    mainTreeView.appendTo('#mainTree');

When clicked, then the page will go to the selected URL. How to preserve the "selected" situation after move to another page?

[LeoLavanya Dhanaraj]

Hi ISMAIL,

  

Greetings from Syncfusion support.

From the details provided, we understand that you would like to maintain the selection of the treenode after navigating to another page. This can be achieved by enabling the enablePersistence and fullRowNavigable properties in the TreeView component. These properties are utilized to persist the selected state of the TreeView between page reloads and allow the entire TreeView node to be navigable instead of just the text element.

Check out the below code snippets and sample for further assistance.

Sample : https://stackblitz.com/edit/mbksfq-w6jgc9?file=index.js

[index.js]

var treeObj = new ej.navigations.TreeView({

  fullRowNavigable: true,

  fields: {

    dataSource: treeData,

    id: 'id',   …

    hasChildren: 'hasChild',

    expanded: 'expanded',

    navigateUrl: 'navURL',

  },

  enablePersistence: true,

});

treeObj.appendTo('#defaultTree');

Refer to the above-mentioned details at your end and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[ISMAIL HAMZAH]

Hi Leo,

Thank you for the tips. It work like a charm.

below my final JS code:

    var menuData = @Html.Raw(Menu.GetJsonTreeNode());
    var mainMenu = new ej.navigations.TreeView({
        fullRowNavigable: true,
        fields: {
            dataSource: menuData,
            id: 'id',
            text: 'name',
            selected: 'selected',
            parentID: 'pid',
            hasChildren: 'hasChild',
            expanded: 'expanded',
            navigateUrl: 'navURL',
        },
        enablePersistence: true,
    });
    mainMenu.appendTo('#mainMenu');
 Copy

btw may i Know what is the explanation of:  selected: 'selected' ? what it purpose and how it works?

Thank you for your great support Leo!

[LeoLavanya Dhanaraj]

ISMAIL, the selected property of the TreeView component will be mapped to the TreeView fields property. If this property is enabled for a specific node, then the corresponding node will be selected at the initial rendering within the TreeView component.

Regards,

Leo Lavanya Dhanaraj

[ISMAIL HAMZAH]

Hi Leo,

Thank you for the explanation. I have scenario using this selected property. Current situation is: It seems TreeView remember the last node selected. So if I'm sign out my application, and then re-login, the treeview will select last selected, for example: Sales Order node. Unfortunately, if re-login, my app set up automatically to go to page: Dashboard. 

I have use selected property to select the dashboard by default, but it not work. Below JSON for my treeview menu:

1. expanded: false
    Copy

2. hasChild: false
    Copy

3. id: "2"
    Copy

4. name: "Default"
    Copy

5. navURL: "/Dashboards/DefaultDashboard"
    Copy

6. pid: "1"
    Copy

7. selected: true
    Copy

    var menuData = @Html.Raw(Menu.GetJsonTreeNode());
    console.log(menuData);
    var mainMenu = new ej.navigations.TreeView({
        fullRowNavigable: true,
        fields: {
            dataSource: menuData,
            id: 'id',
            text: 'name',
            selected: 'selected',
            parentID: 'pid',
            hasChildren: 'hasChild',
            expanded: 'expanded',
            navigateUrl: 'navURL',
        },
        enablePersistence: true,
    });
    mainMenu.appendTo('#mainMenu');
 Copy

Could you please give an idea how to automatically select Dashboard menu after logout and re-login?

Thank You

[LeoLavanya Dhanaraj]

Ismail, based on your shared details, we understand that the fields selected property does not suits for your requirement in the JavaScript TreeView component. Instead of using selected property in the field, you can use the selectedNodes property to the TreeView component which represents the selected nodes in the TreeView component. We can set the nodes that need to be selected or get the ID of the nodes that are currently selected by using this property.  

Check out the below sample for using the property in the component.

Sample : https://stackblitz.com/edit/kvmnwp-m5m6e4?file=index.js

Note : If you want to dynamically add the selectedNode means, you can set the selectedNodes inside the dataBound event in the TreeView component.

Follow our suggested way and check the shared sample at your end. If the issue still persists, share the issue replicated sample with the replication steps to validate further. It will help us to validate and provide a prompt solution.

[ISMAIL HAMZAH]

Hi Leo,

Thank you for your update. After make enablePersistance to false, I can manage to map the selected property and then adjust the treeview datasource to fit my needs server side. It seems enablePersistance true is for managing navigation persistance client side. Since my nature of my web app is to fully  refresh page (server side) the enablePersistance true did not fit my needs. Fortunately, I can managed the treeview node selection by mapping the selected property and manage to adjust the property each time the tree view re-rendered.

everything is OK now.

<script>
    var menuData = @Html.Raw(Menu.GetJsonTreeNode(@currentPath));
    var mainMenu = new ej.navigations.TreeView({
        fullRowNavigable: true,
        fields: {
            dataSource: menuData,
            id: 'id',
            text: 'name',
            selected: 'isSelected',
            parentID: 'pid',
            hasChildren: 'hasChild',
            expanded: 'expanded',
            navigateUrl: 'navURL',
        },
        enablePersistence: false,
    });
    mainMenu.appendTo('#mainMenu');
</script>
 Copy

Thank you for your help, guidance and insight Leo!

Best regards,

Ismail H

[Muthukrishnan Kandasamy]

Hi Ismail,

We are glad to know that you have achieved your requirement with the Syncfusion TreeView component. Please feel free to reach us, if need any further assistance.

Regards,

Muthukrishnan K

[?????????? ?????????]

Hello all, 

Can i use in fields navigateUrl: <NavLink /> from react-router-dom? Or its only use 'string'?

[Shereen Shajahan]

Hi 

The query has been brached as a new forum, please follow up using the link below,

EJ2 TreeView for Sidebar Navigation Menu, Preserve selected after move to another page - Branched from Forum 187506 | React - EJ 2 Forums | Syncfusion

Regards,

Shereen