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

Treeview selection issue, TypeScript 3+, Angular 7+

When the user(me) hovers over a desired selection, the selection visually disappears. And selecting the hovered selection, selects the line below.
Is this a known issue? What is going on that could be causing that?
I have added a zip with a gif that "shows" what i mean.

simplified sourcecode:
        <div class="scrollable-content">
          <ejs-treeview id='tree' #tree [fields]='field' [allowMultiSelection]='options.multiselect' (nodeSelecting)='nodeSelecting($event)' (nodeSelected)='nodeSelected($event)' (drawNode)="onDrawNode($event)"></ejs-treeview>
          <ejs-contextmenu id='menu' #menu target='#tree' [items]='ctx' (beforeOpen)='ctxBeforeOpen($event)' (select)='ctxItemSelect($event)'></ejs-contextmenu>

this.data = new DataManager({ /////emptied oData });
this.field = {
dataSource: this.data, id: 'fullPath', parentID: 'parentPath', text: 'name', hasChildren: 'isFolder', iconCss: 'type',
child: { dataSource: this.data, id: 'fullPath', parentID: 'parentPath', text: 'name', hasChildren: 'isFolder', iconCss: 'type' }
  <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> 

Attachment: bug_ed5b90d3.zip

3 Replies

CI Christopher Issac Sunder K Syncfusion Team December 14, 2018 11:13 AM UTC

Hi Laurens, 

Thank you for contacting Syncfusion support. 

We have checked your provided code block and the attached image. We suspect that you have improperly applying the styles for e-fullrow class element or having improper way to modify the tree node element structure using TreeView component DrawNode method. Could you please ensure those scenarios at your end? 

To know more details about Icons and Image support in TreeView component, please check the below online sample. 

If you are unable to resolve your reported problem still, please share the below details or else try to reproduce your reported issue in the sample provided by us. 

  1. drawNode event code block
  2. what are styles are applied in e-fullrow class element


LA Laurens Albers December 17, 2018 12:14 PM UTC


Removed the method and tested, it doesnt change anything
public onDrawNode(args) {
    //check the returned boolean data type of data from Web API for specific node
    //ex: we have returned the "isBold" data in data source

- The e-fullrow class isn't being called from the .css file belonging to the component, deleting the entire contents of the file doesnt do anything aswell. 
.e-treeview .e-list-img {
  width: 25px;
  height: 25px;

.e-treeview .e-list-icon {
  background-repeat: no-repeat;
  background-image: url('/assets/file_icons.png');
  height: 20px;

  .e-treeview .e-list-icon.folder {
    background-position: -10px -20px;

  .e-treeview .e-list-icon.file {
    background-position: -10px -48px;

.pointer {
  cursor: pointer;

.spacer {
  flex: 1 1 auto;

.mat-toolbar-row, .mat-toolbar-single-row {
  height: 40px !important;

.mat-toolbar, .mat-toolbar h1, .mat-toolbar h2, .mat-toolbar h3, .mat-toolbar h4, .mat-toolbar h5, .mat-toolbar h6 {
  font-weight: 200;
  font-size: 12px !important;
  line-height: 16px;

- the original file of the package is included from node_modules\@syncfusion\ej2-angular-navigations\styles\treeview directory.

Any other guesses for what could be causing misclicking the of the row?

thanks in advance!



Attachment: css_node_modules_5d37cf82.zip

CI Christopher Issac Sunder K Syncfusion Team December 18, 2018 12:43 PM UTC

Hi Laurens, 

Thanks for the update. 

We have analyzed your provided code block and the reported issue at our end. But, your shared code blocks are not having these problems and it is working fine at our end. We suspect that “z-index” style applied for e-fullrow element in your application. Could you please ensure this at your end? 

As like your scenario, we have rendered our TreeView in Modal Dialog and  prepared a sample using your provided code blocks. 

Please check with the sample and get back to us if you face the issue still. 


Live Chat Icon For mobile
Up arrow icon