Dropdowntree component does not render certain elements.

[Bruno Guerra Vieira]

I found an issue with the dropdowntree component. I ran some tests but couldn't solve it. When I select an item with parent elements and render it in the multiselect option, it fails to render some parts of the text.

Stackblitz: https://stackblitz.com/edit/github-19fvvp?file=src%2Fapp.component.ts

​Is there any way to fix this? Or could it be an issue with the component?

Environment

• Library Version: @syncfusion/ej2-angular-dropdowns
• Framework: Angular

[Subalakshmi Ramachandran]

Hi Bruno,

We have reviewed your query and understand that you need to show the full text in the chip of DropdownTree component. We suggest you to follow the below css style to meet your requirement.

[style.css]

#dropdowntree .e-input-group .e-chips-wrapper .e-chips-collection .e-chips {
  height: 35px;
}

#dropdowntree  .e-input-group  .e-chips-wrapper  .e-chips-collection  .e-chips
  .e-chipcontent {
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible; 
  text-overflow: clip;
}

Refer to the sample below: Syncfusion-content - Ej2 Angular Docs (forked) - StackBlitz

Best Regards,
Suba R

[Bruno Guerra Vieira]

Thank you very much for the response.

However, there is still an issue. Using the example you provided, we can see that the ">" character is not being rendered correctly. It is represented as ">"

[Subalakshmi Ramachandran]

Hi Bruno,

We have reviewed your query and understand that you need to show the > in the chip of DropdownTree component. We suggest you to disable enableHtmlSanitizer property to meet your requirement.

[style.css]

<ejs-dropdowntree 

    id='dropdowntree'

    [enableHtmlSanitizer]="false"

    >

Refer to the sample below: Syncfusion-content - Ej2 Angular Docs (forked) - StackBlitz

Best Regards,
Suba R