Custom TreeList expandable column

0 Answers 33 Views
TreeList
Stephanie
Top achievements
Rank 1
Stephanie asked on 01 May 2024, 12:15 PM

All of the examples that I am finding online and in your documentation are broken for this situation. I am able to customize all columns in my TreeList component EXCEPT the first column which is the expandable one.

I was trying to use the code found on this StackBlitz that works, but it's using an old version of the treelist and I'm using the latest version (7.4.0):

React (forked) - StackBlitz

And I found this in your knowledge base using 5.12 - which doesn't even work:

Defining custom expand/collapse cell - KendoReact TreeList (telerik.com)

(the expandable icon is not showing - which is the behavior I am experiencing in my code).

Is there a known issue with the TreeList currently?

Stephanie
Top achievements
Rank 1
commented on 01 May 2024, 01:17 PM

It appears that the kendo icons that are being placed have no width. Strangely, if I simply replace the classname and use FontAwesome icons they work. I'm going to proceed using FontAwesome icons for now, but you should be aware, something is off with the example you provided.
Konstantin Dikov
Telerik team
commented on 03 May 2024, 10:36 AM

Hi Stephanie,

The old KB article will still be applicable with the latest version, but a few changes have to be applied to handle the new way of defining the font icons.

First, you need to include "k-font-icon" to the class names of the font icons and also, the icons must be included on the page:

<link 
    rel="stylesheet" 
    href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css"
/>

Detailed information about the font icons is available in the following help article:

However, for adding the padding you can add just an empty span element with fixed width (n number of times based on the level) or as you have found out, use a different icon.

 

Stephanie
Top achievements
Rank 1
commented on 03 May 2024, 12:11 PM

Thank you Konstantin. I had the svg icon package installed, but not the font icon package. 

No answers yet. Maybe you can help?

Tags
TreeList
Asked by
Stephanie
Top achievements
Rank 1
Share this question
or