1. Home
  2. Forum
  3. Blazor
  4. how to wrap text in treeview and change line height

how to wrap text in treeview and change line height

In my web-site I should fit tree view with product categories to narrow left panel. I need to reduce font size, paddings and to wrap text.
I use scss to make it:
$treeview-item-height: 24px !default;
$treeview-font-size: 14px !default;
$treeview-text-height: 18px !default;
$treeview-text-padding: 0 4px 0 2px !default;
$treeview-text-margin: 0 !default;
$treeview-icon-font-size: 10px !default;
$treeview-icon-size: 10px !default;
$treeview-icon-margin: 0 0 0 -16px !default;
$treeview-icon-padding: 7px !default;
$treeview-image-font-size: 14px !default;
$treeview-image-size: 14px !default;
$treeview-image-margin: 1px 0 0 2px !default;
$treeview-root-ul-padding: 0 0 0 10px !default;
$treeview-child-ul-padding: 0 0 0 10px !default;
$treeview-text-wrap-padding: 0 0 0 12px !default;

But all above do not affect line height. The only method is: 
.e-treeview .e-list-text {
    min-height: 20px !important;
}
Toggle icons are not fitted inline with text, but moves down.

The second trouble is when I turn on wrap:
.e-treeview {
    white-space: pre-wrap !important;
}
for 2-line names element <div class="e-fullrow"></div> still has the same height as for 1-line names.

What is the recommended way to wrap treeview and resize it?





1 Reply
SP Sowmiya Padmanaban Syncfusion Team May 6, 2020 07:22 AM UTC

Hi Stanislav, 
 
Greetings from Syncfusion support.  
 
We have checked your reported query that unable change the line height of fullrow div in TreeView component. It is possible to achieve it in the TreeView component. You need to set the height for the fullrow element which present inside the node elements of TreeView in OnAfterRender Blazor method and in the nodeExpanded event of TreeView. Refer the below code snippet. 
 
   protected override void OnAfterRender(bool firstRender) 
    { 
        if (firstRender) 
        { 
             JSRuntime.InvokeAsync<string>("TreeView", null); 
        } 
    } 
 
    public async Task nodeexpand(NodeExpandEventArgs args) 
    { 
       JSRuntime.InvokeAsync<string>("TreeView", args.NodeData.Id); 
    } 
 
Host.cshtml 
 
<script> 
        function TreeView(args) { 
            if (args != undefined) { 
                // Get the corresponding expanding node. 
                var value = document.getElementById("treeview").querySelector('[data-uid="' + args + '"]'); 
                // Fetch all the fullrow element inside the node. 
                var treeview = value.querySelectorAll(".e-fullrow"); 
            } 
            else { 
                var treeview = document.getElementById("treeview").querySelectorAll(".e-fullrow"); 
            } 
            for (i = 0; i < treeview.length; i++) { 
                // Set tthe height for full row element. 
                treeview[i].style.height = treeview[i].nextElementSibling.offsetHeight+"px"; 
            }            
        } 
    </script> 
 
Refer the sample link below. 
 
Another solution:  
  
When you set the fullrowselect property as false in TreeView component, hover style will apply in the tree node element from its icon. When disabling this property, you don't need to set the height for fullrow element of every tree node.  
  
Refer the below link to know more about the TreeView component. 
 
 
 
 
Please let us know, if you need any further assistance 
 
Regards,  
Sowmiya. P 


Loader.
Up arrow icon