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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Treeview selection issue, TypeScript 3+, Angular 7+

Thread ID:

Created:

Updated:

Platform:

Replies:

141481 Dec 13,2018 02:55 PM UTC Dec 18,2018 12:43 PM UTC Angular - EJ 2 3
loading
Tags: Treeview
Laurens Albers
Asked On December 13, 2018 02:55 PM UTC

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

Thanks,
Christo


Laurens Albers
Replied On December 17, 2018 12:14 PM UTC

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

Thanks,
Christo 


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

;