TreeView node template styling not displaying properly

[Vedad]

Hi, 

On my Angular 12 app, I am trying to use same node template approach for my treeView as suggested on documentation here:

https://www.telerik.com/kendo-angular-ui/components/treeview/node-template/

When I run my app, tree view looks like on image, whole layout is broken.

There is no specific css applied to the treeView or on its container that may affect view. 

If I remove k-icon, layout is fine, but then icon is not shown (just empty square). - see image 2.

Only change i made comparing to this example is to pass full object and to use object property to determine icon type.

So this is how my iconClass function looks:

  public iconClass(item: any): any {
      return {
        'k-i-file-pdf': is(item.type, '29'),
        'k-i-folder': item.items !== undefined,
        'k-i-html': is(item.type, '21'),
        'k-i-image': is(item.type, '17'),
        'k-icon': true,
      };
  }

Result is on attached image.. completely nonsense.

I am using kendo material theme.

any suggestion would be appreciated.

Thank you.

[Svet]

Hi Vedad,

Thank you for the provided screenshots and details.

I do see how the layout is broken. However, from the provided information I am unsure as to what is causing that issue.

I can confirm, that the passing of an object to the iconClass() function shouldn't case this undesired behavior. Please see the following example using such an approach where the Kendo Material theme is used:

https://stackblitz.com/edit/angular-uz9ppz?file=app%2Fapp.component.ts

Rather it looks like some versions mismatch or some third-party CSS that interferes with the default Kendo styles. Thus could I ask for a bit more details. Please provide the used TreeView package and Kendo Material theme versions. Thank you. That will allow me to try and reproduce the issue locally. I am looking forward to your reply.

Regards,
Svet
Progress Telerik

[Vedad]

Hi Svet, 

thank you for your answer. I am confused as well as there is no obvious reason for this behavior. I analyzed whole css tree structure and didn't find anything that affects this, but I may have been missing something.

On the other side, I did upgrade to the latest library versions few days ago, and here are my versions:

"@progress/kendo-theme-material": "^4.43.0",
"@progress/kendo-angular-treeview": "^5.4.3",

Styling on other elements within the same html is perfectly fine, so switch and buttons I also have there are displayed completely properly.

Also here are angular versions I use.

"@angular-devkit/build-angular": "^12.2.3",

"@angular/cli": "^12.2.7",

"@angular/compiler-cli": "~12.2.0",

If there is anything else I can do to help, please let me know.

Best regards,

Vedad

[Svet]

Hi Vedad,

Thank you for the provided additional details.

I created a local project using Angular 12 and the specified versions of the Kendo TreeView and Kendo Material theme. Please find the project attached. After installing the dependencies and running the project I am still unable to reproduce the reported issue.

If you are able to reproduce the issue in the local project please send it back and I will have a further look. Thank you for cooperating.

It looks like the reason for the styling issues should be somewhere else. We have had similar reports from clients in the past where it turned out some browser plugins are interfering with the Kedo styles or some third-party dependency is causing the styles discrepancy.

Regards,
Svet
Progress Telerik

[Vedad]

Hi Svet,

Thank you for the project. I will download project and try. 

I am using standard Chrome latest version without any specific extensions (only popup blocker)..

I will let you know as soon as I try this.

All the best,

Vedad

[Svet]

Hi Vedad,

Sure, take your time.

Regards,
Svet
Progress Telerik