We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ejTreeView styling and context menu showing

Thread ID:

Created:

Updated:

Platform:

Replies:

129051 Feb 23,2017 12:38 PM UTC Mar 1,2017 12:53 PM UTC Angular 5
loading
Tags: ejTreeView
Agne
Asked On February 23, 2017 12:38 PM UTC

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 [Syncfusion]
Replied On February 24, 2017 01:49 PM UTC

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
Replied On February 24, 2017 06:00 PM UTC

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 [Syncfusion]
Replied On February 27, 2017 12:47 PM UTC

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
Replied On February 28, 2017 10:15 AM UTC

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 [Syncfusion]
Replied On March 1, 2017 12:53 PM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;