custom properties and icon

[Sietse Wielenga]

I have 2 questions about the Treeview.

1) I need some extra custom properties on the nodeData so I can use them on event nodeSelected.

See below my code I have sofar, but that doesn't work (see colored line). How can I accomplish this?

selected Object = null;

data: Object = [{ fullPath: 'd:\\data\\document1.docx', parentPath: 'd:\\data', name: 'document1.docx', type: 'file', isFolder: false, createdOn: '2018-07-25'}];

fields: Object = { dataSource: this.data, id: 'fullPath', parentID: 'parentPath', text: 'name', hasChildren: 'isFolder', iconCss: 'type', createdOn: 'createdOn' };

nodeSelected(args: NodeSelectEventArgs) {

    let fullPath = args.nodeData["id"];

    let parentPath = args.nodeData["parentID"];

    let name = args.nodeData["text"];

    let createdOn = args.nodeData["createdOn"]; // custom property does not exists...

    this.selected = { name: name, fullPath: fullPath, createdOn: createdOn };

  }

2) I try to show an icon before the folder-node, but

css:

    .e-treeview .e-list-img {

        width: 25px;

        height: 25px;

    }

    .e-treeview .e-list-icon {

        background-repeat: no-repeat;

        background-image: url('http://ej2.syncfusion.com/angular/demos/src/images/icons/file_icons.png');

        height: 20px;

    }

    .e-treeview .e-list-icon.folder { background-position: -10px -552px }

    .e-treeview .e-list-icon.file { background-position: -10px -20px }

I see that this is rendered on each folder-node:

<div class="e-list-icon folder"></div>

but it doesn't display any icon.

When I add this:

constructor( @Inject('sourceFiles') private sourceFiles: any) { sourceFiles.files = ['icons.component.css']; }

I get an error that the provider for sourceFiles was not found.

Is this piece of code neccesary? If yes, which type should I use for the provider?

[Ashokkumar Balasubramanian]

Hi Sietse Wielenga, 

 

Query 1: I need some extra custom properties on the nodeData, so I can use them on event nodeSelected. 

 

Already we have considered this requirement as a feature at our end. Currently implement phase was going at our end. We have planned to implement and include this feature on our Vol 3,2018 release.  

 

Query 2:  I get an error that the provider for sourceFiles was not found. Is this piece of code neccesary? If yes, which type should I use for the provider? 

 

We don’t need to provide the Inject module for adding custom styles in your application,For our internal purpose only we have add this line in our sample browser. styleUrls is enogh for loading the custom styles in application level. Please check the below code block. 

 

[TS] 

 

@Component({ 

    selector: 'my-app', 

    styleUrls: ['./icons.component.css'], 

    template: ` 

        <ejs-treeview id="icons" [fields]='field' sortOder='Ascending'></ejs-treeview>`,    

    encapsulation: ViewEncapsulation.None 

}) 

 

We have prepared the sample for this requirement, please check the sample in below location. 

 

Sample:  

 

http://www.syncfusion.com/downloads/support/forum/138904/ze/Icons_and_Images300272892.zip 

 

Please let us know, if the provided informations are helpful or not. 

 

Regards, 

Ashokkumar B.