How to have GUI show the add row in the correct position for add root, add sibling, and add child

[Scott Peal]

The TreeGrid control really needs some extra toolbar options verses the Grid. For example, we need to add to root, add as a sibling, and add as a child. In addition, when those are selected, we need to blank empty row being edited to appear in the correct location. Currently, using this code the location is not correct.

<SfTreeGrid @ref="TreeGrid" DataSource="@Locations" IdMapping="Id" ParentIdMapping="ParentId" TreeColumnIndex="1"
            Toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel", "Print", "Search" })"
            ContextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending", "AddRow", "Copy", "Edit", "Delete", "Save", "Cancel","PdfExport", "ExcelExport", "CsvExport", "FirstPage", "PrevPage","LastPage", "NextPage"})">
    <TreeGridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Row"></TreeGridSelectionSettings>
    <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Row" NewRowPosition="RowPosition.Below"></TreeGridEditSettings>
    <TreeGridEvents TValue="Location" OnActionBegin="ActionBeginHandler" RowSelected="RowSelectedHandler" OnToolbarClick="ToolbarClickHandler"></TreeGridEvents>
    <TreeGridColumns>
        <TreeGridColumn Field="Id" HeaderText="ID" Width="100" IsPrimaryKey="true" Visible="false"></TreeGridColumn>
        <TreeGridColumn Field="Name" HeaderText="Name" Width="200"></TreeGridColumn>
        <TreeGridColumn Field="Description" HeaderText="Description" Width="300"></TreeGridColumn>
    </TreeGridColumns>
</SfTreeGrid>

Has anyone figured out how to accomplish this?

[Scott Peal]

Also, for the code above, the AddRow is not showing the context menu for it either. Maybe a bug?

[Pon Selva Jeganathan]

Hi Scott Peal,

Query:  we need to add to root, add as a sibling, and add as a child. In addition, when those are selected, we need to blank empty row being edited to appear in the correct location.

You can achieve this by using the custom toolbar feature along with the AddRecordAsync method and the NewRowPosition property of the TreeGrid. The ToolbarClickHandler method handles click events for these custom toolbar items, allowing you to add nodes to the TreeGrid based on the selected action. When calling AddRecordAsync without parameters, it creates a new empty row. You can set the row position using the NewRowPosition property in EditSettings.

Refer to the below code example,

 

<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" AllowSelection="true" ParentIdMapping="ParentId" TreeColumnIndex="1" Toolbar=@Toolbaritems

   <TreeGridSelectionSettings …

    <TreeGridEvents OnToolbarClick="ToolbarClickHandler" TValue="TreeData.BusinessObject"></TreeGridEvents>

   

….

</SfTreeGrid>

 

@code {

..

    private List<Object> Toolbaritems = new List<Object>() { "Add", "Delete", "Edit", "Update", "Cancel",

               new ItemModel { Text = "Add to Root", Id = "AddRoot", TooltipText = "Add to Root"},

            new ItemModel { Text = "Add as Sibling", Id = "AddSibling", TooltipText = "Add as Sibling" },

            new ItemModel { Text = "Add as Child", Id = "AddChild", TooltipText = "Add as Child" }

    };

 

.

    public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.Id == "AddRoot")

        {

            TreeGrid.EditSettings.NewRowPosition = Syncfusion.Blazor.TreeGrid.RowPosition.Above;

            TreeGrid.AddRecordAsync();

            // Logic to add a new root node

        }

        else if (args.Item.Id == "AddSibling")

        {

            TreeGrid.EditSettings.NewRowPosition = Syncfusion.Blazor.TreeGrid.RowPosition.Below;

            TreeGrid.AddRecordAsync();

            // Logic to add a sibling node

        }

        else if (args.Item.Id == "AddChild")

        {

            // Logic to add a child node

            TreeGrid.EditSettings.NewRowPosition = Syncfusion.Blazor.TreeGrid.RowPosition.Child;

            TreeGrid.AddRecordAsync();

        }

    }

 

Refer to the below sample,

https://blazorplayground.syncfusion.com/BjLJCitsqYIYfOty

Refer to the below API documentation,

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AddRecordAsync

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEditSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridEditSettings_NewRowPosition

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_OnToolbarClick

Query:  the AddRow is not showing the context menu for it either.

We are able to replicate the issue at our end. Upon further validation, we have considered the reported issue (“The AddRow option in the context menu is not showing”) as a bug. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and will include the fix in our upcoming weekly Nuget release which is expected to be rolled out on November 19, 2024. Until then we appreciate your patience.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below feedback link, 

Feedback link: https://www.syncfusion.com/feedback/62708/the-addrow-option-in-the-context-menu-is-not-showing

Note: To view the above feedback, kindly login into your account. 

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization

Regards,

Pon selva

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi Scott Peal,

Root Cause:
The issue occurred because support for the AddRow option in the context menu was not yet provided.

We are pleased to inform you that the AddRow option has now been included in the context menu. The issue, “The AddRow option in the context menu is not showing,” has been resolved in our weekly patch release (v27.2.3).Make sure to update to latest version Nuget package.

Resources:

• Feedback Link:https://www.syncfusion.com/feedback/62708/the-addrow-option-in-the-context-menu-is-not-showing

We appreciate your patience and support while we worked on this fix. Please upgrade to the latest version of the Syncfusion package to resolve the reported issue.

If you need further assistance, please don’t hesitate to contact us.

Best regards,
Sreedhar Kumar