full width tree-view row

[Nico]

Hello,

i have a tree-view and i need the row fullsize. Look at the pictures. How can i do that? picture "aktuell" is the current layout  and picture "ziel" is the goal.

Best regards Nico

[Martin Bechev]

Hi Nico,

Thank you for the provided screenshots.

In order to achieve the desired outcome, using custom CSS is the way to go.

    .k-treeview-leaf{
        width: 100%;
        border: solid 1px;
        border-radius: 15px;
        margin-bottom: 5px;
    }

Here is an example:

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

Regards,
Martin Bechev
Progress Telerik

[Nico]

Hey Martin,

thanks for your quick answer. Ive actually already tried this. But it didtn work. I uploded some screenshots. Maybe you can help me.

Best Regards

Nico

[Martin Bechev]

Hi Nico,

Thank you for the provided images.

Based on the details I am not sure how the styles are applied, but verify the the ViewEncapsulation is set to None:

encapsulation: ViewEncapsulation.None,
  styles: [
    `
    .k-treeview-leaf{
        width: 100%;
        border: solid 1px;
        border-radius: 15px;
        margin-bottom: 5px;
    }
    `,
  ],

[Nico]

This works! Thank you!!