Forever loading

[Andreas Bosteen]

Hi,

I have this issue where when I add a new node as a sub-node the parent-node keeps displaying this "loading"-animation. I have attached a video that shows this.

What could cause this or is there a way to force the animation to stop?

Thanks in advance :)

My Code:    

protected async Task UpdateFolders()

    {

        folders.Clear();

        folders = await _schedulePlanningService.LoadFolderTreeWithoutElements(schoolYearId);

        FolderTreeView.AddNodes(folders);

        StateHasChanged();

    }

    protected async void CreateFolder() //Triggered when "+" button is clicked

    {

        var ParentId = FolderTreeView?.SelectedNodes?[0];

        var result = await Api.Command(new CreateFolderCommand(schoolYearId, ParentId == null? null :                         Guid.Parse(ParentId), "New Folder", Guid.NewGuid())).Result();

        await UpdateFolders();

        if(ParentId != null) OpenFolder(ParentId);

        var newFolder = folders.Aggregate((x, y) => x.Id > y.Id ? x : y);

        StateHasChanged();

        FolderTreeView.BeginEditAsync(newFolder.ViewGuid.ToString());

    }

    protected void OpenFolder(string Id)

    {

        var expandedNodes = FolderTreeView.ExpandedNodes.ToList();

        expandedNodes.Add(Id);

        FolderTreeView.ExpandedNodes = expandedNodes.ToArray();

    }

 

Attachment: 20220707_135732_a3842af4.7z

[Sivakumar ShunmugaSundaram]

Hi Andreas,

Greetings from Syncfusion support.

We have validated your reported query in the Blazor TreeView component. As per the request we have prepared a simple sample of Blazor TreeView component. We have added a node for the selected node while clicking on the "add new" button. But we are unable to replicate the reported issue at our end. we have attached the sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11834597327.zip

Please check the attached sample. If the issue persists, share the below details. It will help us to provide a prompt solution.

1. Share the complete TreeView code example. 

2. If possible, replicate the issue in the attached sample. 

3. Syncfusion Package Version. 

Please check the sample and get back to us with required details, if you need any further assistance. 

Regards,

Sivakumar S

[Andreas Bosteen]

Here is the TreeView Code:

<div id="folderview">

    <SfTreeView TValue="FolderTreeViewModel" AllowDragAndDrop="true" AllowEditing="true" @ref="FolderTreeView" SortOrder="SortOrder.Descending">

        <TreeViewEvents TValue="FolderTreeViewModel" NodeEdited="OnNodeEdited" NodeClicked="OnClicked" NodeSelected="OnSelected"/>

        <TreeViewFieldsSettings DataSource="@folders" Id="ViewGuid" ParentID="ParentViewGuid" Text="Value.Name" HasChildren="HasChildren" Expanded="IsExpanded" ImageUrl="Value.Icon">         </TreeViewFieldsSettings>

        <SfContextMenu Target="#folderview" TValue="MenuItem" @ref="Menu" Items="@MenuItems">

            <MenuEvents TValue="MenuItem" ItemSelected="@selectedHandler"></MenuEvents>

        </SfContextMenu>

    </SfTreeView>

</div>

Package version: 20.1.0.61

Also, so far I haven't been able to recreate the issue in the sample.

[Sivakumar ShunmugaSundaram]

Hi Andreas,

Based on the shared details, we have checked the reported issue in the Blazor TreeView component with 20.1.0.61 package version along with mentioned properties where the TreeView is working fine. We suspect that the issue is due to the sample level customization in the TreeView or Menu events. Please share the complete code details related to the TreeView and Menu component which will help us to recreate the issue from our end and provide a prompt solution.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11188171141.zip

Please check the attached sample and let us know if you need any further assistance.

Regards,

Sivakumar S

[Andreas Bosteen]

Hi, sorry for the "small" delay ;)

The context menu you see in the code is not used for the issue, but the button with the "+" in it  add a new node to the selected node.

<div class="SchedulerBase SchedulerBaseRadius SchedulerTitle SchedulerTitleLeft d-flex"><h3>@Local["folders"]</h3><button onclick="@CreateFolder">+</button></div>

        <div id="folderview">

            <SfTreeView TValue="FolderTreeViewModel" AllowDragAndDrop="true" AllowEditing="true" @ref="FolderTreeView" SortOrder="SortOrder.Descending">

                <TreeViewEvents TValue="FolderTreeViewModel" NodeEdited="OnNodeEdited" NodeClicked="OnClicked" NodeSelected="OnSelected" />

                <TreeViewFieldsSettings DataSource="@folders" Id="ViewGuid" ParentID="ParentViewGuid" Text="Value.Name" HasChildren="HasChildren" Expanded="IsExpanded" ImageUrl="Value.Icon"></TreeViewFieldsSettings>

                <SfContextMenu Target="#folderview" TValue="MenuItem" @ref="Menu" Items="@FolderMenuItems">

                    <MenuEvents TValue="MenuItem" ItemSelected="@contextFolderHandler"></MenuEvents>

                </SfContextMenu>

            </SfTreeView>

        </div>

I also have these methods:

private async void DeleteFolder()

    {

        await Api.Command(new DeleteFolderCommand(folders.SingleOrDefault(f => f.ViewGuid.ToString() == clickedFolder.Id).ElementId)).Result();

        await UpdateFolders();

        CloseEmptyExpandedFolders();

        StateHasChanged();

    }

    private void CloseEmptyExpandedFolders()

    {

        foreach(var Folder in FolderTreeView.ExpandedNodes)

        {

            if (FolderHasNoChildren(Folder))

            {

                var expandedList = FolderTreeView.ExpandedNodes.ToList();

                expandedList.Remove(Folder);

                FolderTreeView.ExpandedNodes = expandedList.ToArray();

            }

        }

    }

    private bool FolderHasNoChildren(string folder)

    {

        return folders.Count(f => f.ParentViewGuid.ToString() == folder) <= 0;

    }

    public async void OnNodeEdited(NodeEditEventArgs args)

    {

        var id = folders.Where(f => f.ViewGuid.ToString() == args.NodeData.Id).First().ElementId;

        await Api.Command(new EditFolderNameCommand(id, args.NewText)).Result();

        await UpdateFolders();

        await FolderTreeView.Refresh();

    }

    public Guid GetSelectedFolderGuid()

    {

        if (FolderTreeView?.SelectedNodes?.Count() >= 1)

        {

            return Guid.Parse(FolderTreeView.SelectedNodes.First());

        }

        else

        {

            return Guid.Empty;

        }

    }

And I thinks that's about it...

[Sivakumar ShunmugaSundaram]

Hi Andreas,

As per the shared code details, we have checked the reported issue in the Blazor TreeView component. We have checked the reported issue with the mentioned property in your shared code and we are unable to replicate the reported issue from our side. We have also checked the reported issue with Guid as the node id in the TreeView data source.

But we were not able to replicate the exact issue you are facing at our end. As mentioned earlier, we suspect that the issue is due to the sample level customization in the TreeView. Please share the complete code details related to the TreeView component, which will help us to recreate the issue from our end and provide a prompt solution. Otherwise, please share with us an issue replicated sample.

We appreciate your patience.

Regards,

Sivakumar S

[Andreas Bosteen]

The issue has stopped, maybe because of an update, maybe something else. Either way, thanks for the help :)

[Indhumathy Loganathan]

Hi Andreas,

We are glad that the reported query has been resolved. Please get back to us if you need any further assistance.

Regards,

Indhumathy L