TreeView - vertical and horizontal scroll bars
A new Visual Studio project was created using the standard Syncfusion template.
When creating the project, the option to generate the code for the TreeView control was selected. So, the standard generated code looks like this:
@page "/treeview-features"
@rendermode InteractiveServer
@using Syncfusion.Blazor.Navigations
<PageTitle>TreeView</PageTitle>
<h2>TreeView</h2>
<br />
<div id="ControlRegion">
<SfTreeView TValue="TreeData" AllowEditing="true" AllowDragAndDrop="true" SortOrder="Syncfusion.Blazor.Navigations.SortOrder.None">
<TreeViewFieldsSettings DataSource="@TreeDataSource" Id="Id" ParentID="Pid" Text="Name" HasChildren="HasChild" Expanded="Expanded"></TreeViewFieldsSettings>
</SfTreeView>
</div>
<br />
<div>
<h3>Selected Features:</h3>
<ul class="ulstyle">
<li class="list"> Node Editing</li>
<li class="list"> Drag and Drop</li>
<li class="list"> Sort Order - None</li>
<li class="list"> Theme - Fluent</li>
</ul>
</div>
<br />
<style>
#ControlRegion {
width: 350px;
margin: 0 auto;
border: 1px solid #dddddd;
}
.ulstyle {
margin: 0px;
padding-left: 20px;
display: inline-block;
}
.list {
float: left;
line-height: 20px;
margin: 10px;
min-width: 200px;
}
</style>
@code {
List<TreeData> TreeDataSource = new List<TreeData>();
protected override void OnInitialized()
{
base.OnInitialized();
TreeDataSource.Add(new TreeData
{
Id = "1",
Name = "China",
HasChild = true,
});
TreeDataSource.Add(new TreeData
{
Id = "2",
Pid = "1",
Name = "Guangzhou",
});
TreeDataSource.Add(new TreeData
{
Id = "3",
Pid = "1",
Name = "Shanghai"
});
TreeDataSource.Add(new TreeData
{
Id = "4",
Pid = "1",
Name = "Beijing"
});
TreeDataSource.Add(new TreeData
{
Id = "5",
Pid = "1",
Name = "Shantou",
});
TreeDataSource.Add(new TreeData
{
Id = "6",
Name = "India",
HasChild = true
});
TreeDataSource.Add(new TreeData
{
Id = "7",
Pid = "6",
Name = "Assam"
});
TreeDataSource.Add(new TreeData
{
Id = "8",
Pid = "6",
Name = "Bihar"
});
TreeDataSource.Add(new TreeData
{
Id = "9",
Pid = "6",
Name = "Tamil Nadu"
});
TreeDataSource.Add(new TreeData
{
Id = "10",
Pid = "6",
Name = "Punjab"
});
TreeDataSource.Add(new TreeData
{
Id = "11",
Name = "Australia",
HasChild = true,
Expanded = true
});
TreeDataSource.Add(new TreeData
{
Id = "12",
Pid = "11",
Name = "Victoria",
});
TreeDataSource.Add(new TreeData
{
Id = "13",
Pid = "11",
Name = "New South Wales",
IsSelected = true
});
TreeDataSource.Add(new TreeData
{
Id = "14",
Pid = "11",
Name = "Western Australia",
IsSelected = true
});
TreeDataSource.Add(new TreeData
{
Id = "15",
Pid = "11",
Name = "South Australia"
});
TreeDataSource.Add(new TreeData
{
Id = "16",
Name = "France",
HasChild = true
});
TreeDataSource.Add(new TreeData
{
Id = "17",
Pid = "16",
Name = "Pays de la Loire"
});
TreeDataSource.Add(new TreeData
{
Id = "18",
Pid = "16",
Name = "Aquitaine"
});
TreeDataSource.Add(new TreeData
{
Id = "19",
Pid = "16",
Name = "Brittany"
});
TreeDataSource.Add(new TreeData
{
Id = "20",
Pid = "16",
Name = "Lorraine"
});
TreeDataSource.Add(new TreeData
{
Id = "21",
Name = "Brazil",
HasChild = true
});
TreeDataSource.Add(new TreeData
{
Id = "22",
Pid = "21",
Name = "Mato Grosso"
});
TreeDataSource.Add(new TreeData
{
Id = "23",
Pid = "21",
Name = "Roraima"
});
TreeDataSource.Add(new TreeData
{
Id = "24",
Pid = "21",
Name = "Acre"
});
}
class TreeData
{
public string Id { get; set; } = string.Empty;
public string? Pid { get; set; }
public bool HasChild { get; set; }
public bool Expanded { get; set; }
public bool IsSelected { get; set; }
public string Name { get; set; } = string.Empty;
}
}
I wanted to test the horizontal and vertical scroll bars and I made only one small change.
In the div element <div id='ControlRegion'> I added style and now it looks like this:
<div id='ControlRegion' style='width: 150px; height: 300px; overflow: auto'>
When that change is made, the following is obtained:
As you can see, the vertical scroll bar appears normally, but the problem with the horizontal scroll bar is that it is not there!
However, if we scroll down we can see the following:
The horizontal scroll bar exists; however, it appears on some inner <div> element which is a bug.
My question is, should I add some more styling or is this a bug?
Hi Aleksandar,
Greetings from Syncfusion support.
Based on the details you shared, we understand that you prepared the Blazor TreeView sample using the Syncfusion Blazor Template Studio on your end, and you want to add horizontal and vertical scrollbars to the TreeView component.
However, we prepared the TreeView sample using the same Syncfusion extension with the same features you selected on your end. To achieve your requirement, the height and width of the TreeView component will exceed its parent container, with the overflow set to 'auto'.
Refer to the below code snippets:
[TreeViewFeatures.razor]
|
<div id="ControlRegion" style='width: 150px; height: 300px; overflow: auto'> <SfTreeView CssClass="sf-treeview" TValue="TreeData" AllowEditing="true" AllowDragAndDrop="true" SortOrder="Syncfusion.Blazor.Navigations.SortOrder.None"> <TreeViewFieldsSettings DataSource="@TreeDataSource" Id="Id" ParentID="Pid" Text="Name" HasChildren="HasChild" Expanded="Expanded" ></TreeViewFieldsSettings> </SfTreeView> </div> <br/> … <style> …
.sf-treeview { width: 250px; }
</style> |
For your reference, we have attached the sample and screenshot.
Sample: Attached as a zip file.
Screenshot:
|
|
Check out the shared details and get back to us if you need any further assistance.
Regards,
Prasanth Madhaiyan.
Attachment: SyncfusionBlazorApp1_59de62b3.zip
Thank you for your reply, but this is not the solution I need. I guess I didn't explain the problem well enough.
I will try to explain in another way.
So, I started again from the basic page that is obtained when using the standard Syncfusion Template.
The following changes were made:
- In the div element <div id='ControlRegion'> I added a style and now it looks like this:
- In the code, where the 'Australia' node data is added, the Expanded property is set to false.
<div id='ControlRegion' style='width: 150px; height: 300px; overflow: auto'>
So now we have the following situation:
When the 'Australia' node is expanded, both vertical and horizontal scroll bars should appear,
however, the following is obtained:
The vertical scroll bar is there, but the horizontal scroll bar is not. If you scroll to the end, you will see that the horizontal scroll bar exists inside TreeView control.
To conclude, my goal is very simple. Put the TreeView control in a DIV with fixed dimensions, and the horizontal and
vertical scroll bars should appear after expanding (one or more).
I am sending you a file with the project too.
Thank you.
Attachment: SyncfusionBlazorApp1_10e6d525.zip
Hi Aleksandar,
We checked the shared sample and understood that you want to show the vertical and horizontal scroll bars when expanding a TreeView node item. You can achieve this by specifying display: inline-table; for the Blazor TreeView component.
Refer to the below code changes:
[TreeViewFeatures.razor]
|
<div id="ControlRegion" style="width: 150px; height: 300px; overflow: auto"> <SfTreeView CssClass="sf-treeview" TValue="TreeData" AllowEditing="true" AllowDragAndDrop="true" SortOrder="Syncfusion.Blazor.Navigations.SortOrder.None"> <TreeViewFieldsSettings DataSource="@TreeDataSource" Id="Id" ParentID="Pid" Text="Name" HasChildren="HasChild" Expanded="Expanded" ></TreeViewFieldsSettings> </SfTreeView> </div> <br/> <div> <h3>Selected Features:</h3> <ul class="ulstyle"> <li class="list"> Node Editing</li> <li class="list"> Drag and Drop</li> <li class="list"> Sort Order - None</li> <li class="list"> Theme - Fluent</li> </ul> </div> <br/> <style> … .sf-treeview { display: inline-table; } … </style> |
Screenshot:
|
|
For your reference, we have attached the sample and screenshot.
Sample: Attached as a zip file.
Check out the shared details and get back to us if you need any further assistance.
Regards,
Prasanth Madhaiyan.
Attachment: SyncfusionBlazorApp1_a12d9cad.zip
Thanks for the answer, but I think this solution is not good enough.
There is another problem now:
I increased the length of the DIV element from 150px to 250px and then the following is obtained:
As you can see, the selected row is not marked for its entire length.
If we expand the 'Australia' node, we get the following:
Again, the selected row is not marked to the end, but the marked length differs from the previous case.
This does not look nice, and the marked part must be the entire length of the DIV element.
