TreeView - vertical and horizontal scroll bars-from 195679

[Aleksandar]

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.

[Prasanth Madhaiyan]

Hi Aleksandar,

To resolve the scrolling issue, we set the display to inline-table for the TreeView component. However, this set the width of the TreeView component to be based on the content element's width, rather than the width of the parent div element. To ensure the TreeView component occupies the parent div container's width, you need to set the width of the TreeView component to 100%.

Refer to the below code snippet.

…

<div id="ControlRegion" style="width: 250px; 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>

    #ControlRegion {

        margin: 0 auto;

        border: 1px solid #dddddd;

    }

 

    .sf-treeview {

        display: inline-table;

        width: 100%;

    }

</style>

For your reference, we have attached the sample and screenshots.

Sample: Attached as a zip file.

Screenshots:

Initial rendering	Expanded state

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: SyncfusionBlazorApp1_b7469e42.zip

[Aleksandar]

Thank you very much for your assistance. :) 

[Kalpana Ganesan]

Hi Aleksandar,

You are welcome. Please get back to us for further assistance.

Regards, 

Kalpana.

[Aleksandar]

Hi Kalpana. 

Unfortunately, I have noticed one more problem here. 

When I tried drag & drop, during the drag I've got the following:

As you can see, width of the dragged item is huge. 

Tell me how to fix that, please :)

Best regards,

Aleksandar

[Prasanth Madhaiyan]

Hi Aleksandar,

To resolve the issue of the dragged item having a large width when performing drag-and-drop actions in the Blazor TreeView component, you need to set display: inline-table; and width: auto; for the e-drag-item element.

Refer to the below code snippets:

[TreeViewFeatures.razor]

…

<style>

    …

    .sf-treeview.e-treeview.e-drag-item {

        display: inline-table;

        width: auto;

    }

</style>

…

For your reference, we have attached the sample.

Sample: Attached as a zip file.

However, regarding the “Dragged element icons alignment issue in the Blazor TreeView component,” we consider it a bug on our end. The fix for this issue will be included in the Volume 4 SP release, scheduled for the end of January 2025.

You can track the status of the fix through the following link.

Feedback: https://www.syncfusion.com/feedback/64622/dragged-element-icons-alignment-issue-in-the-blazor-treeview-component

Check out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: SyncfusionBlazorApp1_4609eef3.zip

[Aleksandar]

Thank you very much for your effort. This is the solution. :) 

[Kalpana Ganesan]

Hi Aleksandar,

Glad you got the solution. Please get back to us for further assistance.

Regards,

Kalpana.

[Prasanth Madhaiyan]

Hi Aleksandar,

We are glad to announce that our Essential Studio® 2024 Volume 4 SP Release v28.2.3 is rolled out and is available for download under the following link.

 

https://www.syncfusion.com/forums/195939/essential-studio-2024-volume-4-service-pack-release-v28-2-3-is-available-for-download

The issue with the “Dragged element icons alignment issue in the Blazor TreeView component” has been resolved in this release. To access this fix, we suggest you update the package to 28.2.3 and we include the sample in the latest version for your reference.

Sample: Attached as a zip file.

Feedback: https://www.syncfusion.com/feedback/64622/dragged-element-icons-alignment-issue-in-the-blazor-treeview-component

Release notes: https://blazor.syncfusion.com/documentation/release-notes/28.2.3?type=all#treeview

Root Cause: The alignment issue occurred due to the Fluent theme applying an incorrect padding value to the drag icon, which caused it to appear misaligned.

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: SyncfusionBlazorApp1_df6e29a9.zip