1. Home
  2. Forum
  3. Blazor
  4. Node height

Node height

Good afternoon,
I would like to change (increase) the height of the Node. I could get it, but then the text and the expand sign stay on top, while the Icon, correctly, is vertical centered.
How could I get everything vertical centered? I show you my CSS style.

.e-treeview .e-list-item > .e-text-content .e-list-text {
        font-size: 18px;
        height: 60px;
    }

    .e-treeview .e-text-content {
        border: 1px solid black !important;
        /*background-color: darkseagreen;*/
    }
What sould I change?

11 Replies
SP Sowmiya Padmanaban Syncfusion Team March 23, 2020 11:09 AM UTC

Hi Társis, 
 
Greetings from Syncfusion support.  
 
Yes, it is possible to increase the height of each TreeView node. Refer the below CSS Styles to increase the height. 
 
<style> 
   .e-treeview .e-list-text { 
       line-height: 40px; 
    } 
  .e-treeview .e-fullrow { 
       height: 40px; 
   } 
</style> 
 
Refer the sample link below. 
 
Refer the below link for TreeView component. 
 
 
 
Please let us know, if you have any concerns. 
 
Regards,  
Sowmiya.P 


TÁ Társis March 23, 2020 01:07 PM UTC

Good morning,
thank you for your answer, but I'm still getting the "expand icon" in the top of the node, instead getting it aligned with the text. I'm sending you my application.
Thanks in advance!

Attachment: GAFNETBlazor_9b5cb2f2.zip

SP Sowmiya Padmanaban Syncfusion Team March 24, 2020 06:05 AM UTC

Hi Társis,  
 
We have checked your application. In your application, you have customized the expand and collapse icon and to resolve the reported problem, you need to set the height for that icon. Refer the below styles to align the icon in your application. 
 
    .e-treeview .e-list-item div.e-icons { 
        height:60px; 
        line-height: 45px; 
    } 
 
Refer the below screenshot. 
 
 
 
Refer the below modified sample. 
 
Please let us know, if you have any concerns. 
 
Regards,  
Sowmiya.P 



TÁ Társis March 24, 2020 06:01 PM UTC

Thank you for your answer. It worked!
But now, after I have updated to the latest package of syncfusion, the TreeView does'n update anymore and the console show errors.
Could you take a look? You can log in with any user or password.

Thanks in advance!

Attachment: GAFNETBlazor_d7940399.zip

SP Sowmiya Padmanaban Syncfusion Team March 25, 2020 07:37 AM UTC

Hi Társis,  
 
We have checked your reported problem and unable to reproduce your issue. We are able to run your application without any console error. Refer the below video link. 
 
 
In this above video , TreeView nodes are not displayed because you have added the TreeView nodes based on condition. Refer the below code snippet referred in your application. LoginStore.Token get the value as null. So, it displays the empty items in TreeView. 
 
    
if (string.IsNullOrEmpty(_loginStore.Token)) 
            { 
                return itens; 
            } 
 
Refer the below runnable sample. 
 
Can you please clear the cache in your application and again run the sample. 
 
Please let us know, if you have any concerns. 
 
Regards,  
Sowmiya.P 


TÁ Társis March 25, 2020 01:00 PM UTC

Good morning,

these are the steps to reproduce the error:
- Execute the application
- in the login window insert 123 for email and 123 for senha
- click in Enviar
- The treeview doesn't update

Yes, there's a condition

if (string.IsNullOrEmpty(_loginStore.Token)) 

            { 

                return itens; 

            }
but after these procedure, _loginStore.Token is not null anymore and then, you can "inspect" in chrome and see the errors.
I'm sending you the errors I get.

Attachment: localhost1585141081702_e82be30c.zip

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team March 26, 2020 12:08 PM UTC

Hi Társis, 
 
We have validated your reported problem with Blazor SF TreeView. On analysis, we found that iniatially, TreeView is iniatialize with no datasource items, that’s prevents the TreeView initialization. So, to resolve this reported problem, we recommend you to render always with data source.  
  
For achieving this in your shared application, we have moved the TreeView definition code with the if condition. This condition passes when data for datasource variable is loaded. 
  
<SfSidebar ID="SidebarInstance" HtmlAttributes="@HtmlAttribute" Width="290px" Created="afterCreated" Target=".main-content" @ref="Sidebar" MediaQuery="(min-width: 600px)"> 
        <ChildContent> 
            <div class="main-menu"> 
                <div class="table-content"> 
                    <p class="main-menu-header">MENU PRINCIPAL</p> 
                </div> 
                <div> 
                    
                    @if (Logado) 
                    { 
                         <SfTreeView CssClass="main-treeview" ExpandOn="@Expand" TValue="SideMenuItemModel" FullRowNavigable="true"> 
                        <TreeViewFieldsSettings Id="Id" Text="Text" IconCss="IconCSS" DataSource="treedata" HasChildren="HasChild" ParentID="ParentId" NavigateUrl="Url"> 
                        </TreeViewFieldsSettings> 
                    </SfTreeView> 
                        <div style="margin-top:20px"> 
                            <button class="btn btn-danger px-5" style="margin-left: 25px" @onclick="@LogoutClicked"><i class="fa-left fas fa-sign-out-alt"></i>Logout</button> 
                        </div> 
                    } 
                </div> 
            </div> 
        </ChildContent> 
    </SfSidebar> 
 
Please, download the sample from the following link. 
 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S. 


TÁ Társis March 26, 2020 12:56 PM UTC

It worked, thank you very much!

TÁ Társis March 26, 2020 07:00 PM UTC

Good afternoon,

now there's one more issue left. If you take a look in the sample you've send me, you'll see that in the item "API Reference", the Icon doesn't appear. I've noticed it happens when the item HasChildren is true and it's not informed the NavigateUrl. But I don't wanna navigate in some itens.
Would you take a look?

TÁ Társis March 31, 2020 05:25 PM UTC

Is there some news about my last issue?

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team April 1, 2020 09:11 AM UTC

Hi Társis, 
 
We have validated your reported problem that icon are displayed with TreeView nodes, when you set class for IconCss property. We are able to reproduce your reported issue. We have logged this issue as a bug in SF Blazor TreeView component and logged a defect report for this issue. 
 
The fix for this issue will be included with our Volume 1 SP release which is expected to be rolled out at the end of April 2020. 
 
You can track the status of this issue through following link. 
 
 
We appreciate your patience until, then. 
 
Regards, 
Shameer Ali Baig S. 


Loader.
Up arrow icon