Treeview selection issue, TypeScript 3+, Angular 7+

[Laurens Albers]

Hi,

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:

component.html

        <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>

        </div>

component.ts

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' }

};

index.html

  <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> 

greetings,

Laurens

Attachment: bug_ed5b90d3.zip

[Christopher Issac Sunder K]

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? 

Basic Sample: https://stackblitz.com/edit/angular-ujvtce?file=icons.component.css 

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

https://ej2.syncfusion.com/angular/demos/#/material/treeview/icons 

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

Thanks,
Christo

[Laurens Albers]

Hi,

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

    args.node.classList.add(args.nodeData["type"]);

  }

- 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;

}

Extra:

- 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!

greetings,

 Laurens

Attachment: css_node_modules_5d37cf82.zip

[Christopher Issac Sunder K]

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. 

https://stackblitz.com/edit/angular-ujvtce-6fpqmn?file=icons.component.css 

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

Thanks,
Christo