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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Using Icons within Tree View

Thread ID:

Created:

Updated:

Platform:

Replies:

146339 Jul 31,2019 09:06 PM UTC Aug 5,2019 06:49 AM UTC JavaScript - EJ 2 5
loading
Tags: TreeView
Stephan Schrade
Asked On July 31, 2019 09:06 PM UTC

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

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


Stephan Schrade
Replied On 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

Narayanasamy Panneer Selvam [Syncfusion]
Replied On 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. 


Stephan Schrade
Replied On August 2, 2019 07:52 PM UTC

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

Regards,
Stephan

Ashokkumar Balasubramanian [Syncfusion]
Replied On August 5, 2019 06:49 AM UTC

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


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon