Using Node Template with different node heights

Question

Hi,using your example https://blazor.syncfusion.com/documentation/treeview/template/I saw how to use custom template in TreeView..Everything works fine if the nodes of the TreeView are all the same. If I want to use different heights for the various levels, what should I do?waiting for your kind replyregards

Indhumathy Loganathan · Accepted Answer

Hi Salvatore, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement in TreeView component. You can customize the tree nodes based on levels by adding custom CssClass to the component and adding required styles. In the below code snippets, we have added a CssClass custom to TreeView component and set the height for different level of nodes. 
 




.custom .e-level-1 > .e-fullrow { 
    height: 80px; 
} 
 
.custom .e-level-2 > .e-fullrow { 
    height: 77px; 
} 
 
.custom .e-level-3 > .e-fullrow { 
    height: 72px; 
} 
 
.custom .e-level-4 > .e-fullrow { 
    height: 62px; 
} 
 
Please find the sample demonstrating the solution from below link. 
 
https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11249536534 
 
To know more about the Blazor TreeView component, refer to the below links.  
  
Documentation: https://blazor.syncfusion.com/documentation/treeview/getting-started/ 
 
Demos: https://blazor.syncfusion.com/demos/treeview/default-functionalities 
 
API reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html 
 
Please, let us know if you need any further assistance. 
 
Regards, Indhumathy L