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. Image for the cookie policy date
close icon

Using Icons within Tree View

Hi support,
I might be stupid but I don't know how to use icons within TreeView.
My structure has the property iconCss and I have tried different ways to set the icon, as
icon icon-docs
e-icons e-search
e-search
and others, but nothing works.

I have included
material.css
e2.min.js
to my page.

I have read and tried
https://ej2.syncfusion.com/documentation/appearance/icons/#steps-to-use-icons-library
https://ej2.syncfusion.com/demos/#/material/treeview/icons.html
and
https://www.syncfusion.com/downloads/metrostudio

I also get mixed up but the fact, that sometimes you say "JavaScript (ES5)", "JavaScript", "Essential JS2 for JavaScript" and I only se by the code syntax if I'm accidental in the TypeScript Section or somewhere else.

Regards,
Stephan

5 Replies

AB Ashokkumar Balasubramanian Syncfusion Team August 1, 2019 12:03 PM UTC

Hi Stephan, 
 
Greetings from Syncfusion support. 
 
We have checked your reported problem at our end. We suspect that you may missed to set the search icon for proper tree node element in Treeview component. Could you please check the below code block and sample? 
 
{ "nodeId": "02-02", "nodeText": "Wild.mpeg", "icon": "e-icons e-search" } 
 
.e-treeview .e-list-item .e-icons.e-search:before { 
        content: '\e993'; 
    } 
 
 
Please check the sample and get back to us, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 



SS Stephan Schrade August 1, 2019 09:53 PM UTC

Many thanks for your reply.

I managed to show icons, but when I click on the item, the icon changes and moves to the right.

initial view



after click on "Athletes"



And there is another problem which is related to hierarchical navigation.
I'm using:
// var datamanager;
var dataext = new ej.data.DataManager({
url: 'http://localhost/rubw2/basic/web/nav/navleft',
adaptor: new ej.data.WebApiAdaptor()
});
// });

// console.log(datamanager);

// TreeView initialization
var mainTreeView= new ej.navigations.TreeView({
fields: { dataSource: dataext, id: 'nodeId', iconCss: 'nodeIcon', text: 'nodeText', child: 'nodeChild', hasChildren: 'hasChild', parentID: 'pid' }, expandOn: 'Click'
}); 

with this response from the backend server:

{
    "Items": [
        {
            "nodeId": "1",
            "nodeIcon": "e-icons e-search",
            "nodeText": "Login",
            "url": "/home"
        },
        {
            "nodeId": "5",
            "nodeIcon": "e-icons e-search",
            "nodeText": "Athletes",
            "url": "/athlets",
            "hasChild": false
        },
        {
            "nodeId": "7",
            "nodeIcon": "e-icons e-search",
            "nodeText": "Analysis",
            "url": "/athlets",
            "hasChild": true
        },
        {
            "nodeId": "8",
            "nodeIcon": "e-icons e-search",
            "nodeText": "Age classes",
            "url": "/athlets",
            "pid": "7"
        },
        {
            "nodeId": "9",
            "nodeIcon": "e-icons e-search",
            "nodeText": "Athletes",
            "url": "/athlets",
            "pid": "7"
        }
    ],
    "Count": 5
}

and I get a treeview like this:
Initial view


after click on "Analysis"


the goes forever like a recursion.
How can this happen?

Regards,
Stephan


NP Narayanasamy Panneer Selvam Syncfusion Team August 2, 2019 01:22 PM UTC

Hi Stephan,

Thanks for your update.
 
 
Query-1: In hierarchical data on expanding, it goes forever like a recursion 
We have validated your code snippet and we suggest you to activate the offline mode while fetching the data to overcome the reported issue. Please refer to the following code snippet. 
 
var treeData = new ej.data.DataManager({ 
url: 'https://api.myjson.com/bins/saljp', 
adaptor: new ej.data.WebApiAdaptor(), 
offline: true 
}); 
  
  
Query-2: I managed to show icons, but when I click on the item, the icon changes and moves to the right. 
We have validated the reported issue at our end. We can able to reproduce the issue when we double-tap on a node. We considered this as a bug and log a bug report on it. We will fix this issue and included it in our upcoming patch release which is expected to be rolled out on 13th August 2019. We appreciate your patience until then. 
You can track the status of the bug report via the following link 
Note: Please login to view this feedback portal 
Alternatively, we suggest you to set expandOn as “None” to overcome the reported issue temporarily. 
Please let us know if you any concerns. 
 
Regards, 
Narayanasamy P. 



SS Stephan Schrade August 2, 2019 07:52 PM UTC

Many thanks,
I mannaged to get  the tree view working with your workarounds.

Regards,
Stephan


AB Ashokkumar Balasubramanian Syncfusion Team August 5, 2019 06:49 AM UTC

Hi Stephan, 
 
Most Welcome.  
 
Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Loader.
Live Chat Icon For mobile
Up arrow icon