ejTreeView styling and context menu showing

[Agne]

Hello,

I want to style my treeview by adding some texts on nodes set to bold.
For example:
Node1
--Subnode1
----SubsubNode1
----SubsubNode2
--Subnode2

I am getting data to treeview from server, also from there I can get data which nodes should be bold. I was trying to do this by adding data to spriteCssClass and then in css file setting one class to bold and another class to normal, but by this example http://jsplayground.syncfusion.com/w4kouvhi is see that spriteCssClass parameter working only with pictures. Should I somehow modify this spriteCssClass or use just other custom parameter?

In my code I also add custom parameter isBold (it is true if node must be bold), but I do not know how to use it to set nodes to bold:
        this.treeViewFields= { dataSource: DataManager, id: 'id', parentId: 'parent_Id', text: 'text', hasChild: 'leaf', expanded: 'expanded', imageUrl: 'iconCls', spriteCssClass: 'className', isBold: 'IsBold' };

Also one more question - I am using context menu on this treeview, but context menu should be visible not on all nodes. Parameter which show if node must be bold also show on which nodes should be visible context menu. How I should set that context menu will show not on all nodes? And how to set different context menus on different nodes?

This is my main context menu parameters:
    onReady(args) { //on treeview ready event
            $("#contextMenu").ejMenu({           
            menuType: ej.MenuType.ContextMenu,
            openOnClick: false,
            contextMenuTarget: "#treeView",
            fields: { dataSource: this.treeViewContext, id: "id", text: "text", imageUrl: "imageUrl"},
            beforeOpen: function (args) {
                if (!$(args.target).hasClass("e-text") && !$(args.target).hasClass("e-align"))
                {
                    args.cancel = true;
                }
            }
        });
    }

Thank you for your help!

[Piramanayagam Ramakrishnan]

Hi Agne, 

 

Thanks for Contacting Syncfusion support. 

 

We have analyzed your query. We can achieve your requirement (“ejTreeView styling and context menu showing”) in TreeView control by using fields.htmlAttribute property. You can add the custom class (bold) to TreeView node by using fields.htmlAttribute property. Based on this custom class you can customize the specific TreeView node. Please refer to below code example, 

 

[ts] 

 

this.htmlAttr = { class: "bold" }; 

this.localData = [ 

    { id: 1, name: 'Discover Music', hasChild: true, isBold: this.htmlAttr, expanded: true }, 

    { id: 2, pid: 1, name: 'Hot Singles', isBold: this.htmlAttr, expanded: true }, 

    { id: 3, pid: 2, name: 'Rising Artists' }, 

    { id: 25, pid: 21, name: 'Mobile MVC' }]; 

this.mainMenuViewFields = { id: 'id', parentId: 'pid', text: 'name', hasChild: 'hasChild', dataSource: this.localData, expanded: 'expanded', htmlAttribute: 'isBold'}; 

 

 

 

You can also find the bold style applied TreeView node by using the custom class (bold) while before opening the Context Menu. Please refer to below code example, 

 

 

onready (args) { 

       $("#contextMenu").ejMenu({             

        menuType: ej.MenuType.ContextMenu, 

        openOnClick: false, 

        contextMenuTarget: "#mainMenuView", 

        fields: { dataSource: this.treeViewContext, id: "id", text: "text", imageUrl: "imageUrl" }, 

        beforeOpen: function (args) { 

            if ($(args.target).hasClass('e-text')) { 

                //identify the bold TreeView node 

                if ($(args.target).closest(".e-item").hasClass("bold")) { 

                    this.hideItems(["#202", "#203", "#204"]); 

                } 

                else { 

                    this.showItems(["#202", "#203", "#204"]); 

                } 

            } 

            else 

                args.cancel = true; // prevent to open the Context Menu other than the TreeView node 

        } 

    }); 

} 

 

 

 

For more details on the fields.htmlAttribute property, please refer to the help document link:
https://help.syncfusion.com/api/js/ejtreeview#members:fields-htmlattribute 

 

For your reference, we have prepared a sample based on this, and it can be downloaded from the following location: Sample 

 

To run the application, execute the below commands,   

1.     npm install 

2.     npm start 

 

Please let us know whether the provided sample was helpful in achieving your requirement. If not, send us more information to proceed further.   

 

Regards,   

Piramanayagam R. 

[Agne]

Hello,

there is a problem, that from API I am getting IsBold value as boolean type, so I get true or false, not as object like in example { class: "bold" }. Maybe there is possibility to handle this in front-end  and after getting htmlAttribute value as true set it to custom class name and getting value as false set it to another class name?

[Piramanayagam Ramakrishnan]

Hi Agne, 

 

Thanks for your update. 

 

You can achieve your requirement (“there is possibility to handle this in front-end and after getting htmlAttribute value as true set it to custom class name and getting value as false set it to another class name?”) by adding the custom class based on the Boolean value (IsBold) in front-end before mapping to TreeView. Please refer to below code example, 

 

[ts] 

 

this.localData = [ 

    { id: 1, name: 'Discover Music', hasChild: true, isBold: true, expanded: true }, 

    { id: 2, pid: 1, name: 'Hot Singles', isBold: true, expanded: true }, 

    { id: 3, pid: 2, name: 'Rising Artists' }, 

    { id: 4, pid: 2, name: 'Live Music', isBold: true }, 

]; 

 

for (var i = 0; i < this.localData.length; i++) { 

    if (this.localData[i].isBold) { 

        this.localData[i].htmlAttr = { class: "bold" }; 

    } 

    else { 

        this.localData[i].htmlAttr = { class: "nonbold" }; 

    } 

} 

 

this.mainMenuViewFields = { id: 'id', parentId: 'pid', text: 'name', hasChild: 'hasChild', dataSource: this.localData, expanded: 'expanded', htmlAttribute: 'htmlAttr'}; 

 

 

 

For your reference, we have prepared a sample based on this, and it can be downloaded from the following location: Sample 

 

To run the application, execute the below commands,   

1.     npm install 

2.     npm start 

 

Please let us know whether the provided sample was helpful in achieving your requirement. If not, send us more information to proceed further.   

 

Regards,   

Piramanayagam R. 

[Agne]

Hello,

sorry for the dump question, but I do not know how to adapt this example when data is getting from backend using ej.DataManager?

Data is getting like this:
        $("#menu").ejTreeView({loadOnDemand: true});
        var dataManager = new ej.DataManager({ url: GPGlobalVariables.BASE_API_URL + "menu/GetMenu", crossDomain: true, adaptor: new ej.UrlAdaptor(),
            headers: [{Authorization: 'Bearer ' + JSON.parse(localStorage.getItem('user')).authToken}]  });

        this.mainMenuViewFields = { dataSource: dataManager, id: 'id', parentId: 'parent_Id', text: 'text', hasChild: 'leaf', expanded: 'expanded', imageUrl: 'iconCls' };

[Piramanayagam Ramakrishnan]

Hi Agne, 

 

Thanks for your update. 

 

We have analyzed your query. You can also achieve your requirement (“ejTreeView styling and context menu showing”) in TreeView control by using template property without changing the data source. You can add the custom class (bold) to TreeView node by using template support. Please refer to below code example, 

 

[html] 

 

<ej-treeview id="mainMenuView" [fields]="mainMenuViewFields" [template]="treetemplate" (ready)="onready($event)"></ej-treeview> 

 

[ts] 

 

constructor() { 

    this.treetemplate = "#treeTemplate"; 

} 

 

[index.html] 

 

<script id="treeTemplate" type="text/x-jsrender"> 

    {{if isBold}} 

    <div class="bold">{{>name}}</div> 

    {{else}} 

    <div class="unbold">{{>name}}</div> 

    {{/if}} 

</script> 

 

 

You can also find the bold style applied TreeView node by using the custom class (bold) while before opening the Context Menu. Please refer to below code example, 

 

 

onready (args) { 

       $("#contextMenu").ejMenu({             

        menuType: ej.MenuType.ContextMenu, 

        openOnClick: false, 

        contextMenuTarget: "#mainMenuView", 

        fields: { dataSource: this.treeViewContext, id: "id", text: "text", imageUrl: "imageUrl" }, 

        beforeOpen: function (args) { 

            if ($(args.target).hasClass('e-text') || $(args.target).closest(".e-text")) { 

                //identify the bold TreeView node 

                if ($(args.target).closest(".e-text").find("div").hasClass("bold")) { 

                    this.hideItems(["#202", "#203", "#204"]); 

                } 

                else { 

                    this.showItems(["#202", "#203", "#204"]); 

                } 

            } 

            else 

                args.cancel = true; // prevent to open the Context Menu other than the TreeView node 

        } 

    }); 

} 

 

For more details on the template property, please refer to the help document link:
https://help.syncfusion.com/api/js/ejtreeview#members:template 

 

For your reference, we have prepared a sample based on this, and it can be downloaded from the following location: Sample 

 

To run the application, execute the below commands,   

1.     npm install 

2.     npm start 

 

Please let us know whether the provided sample was helpful in achieving your requirement. If not, send us more information to proceed further.   

 

Regards,   

Piramanayagam R.