Custom Button for Adding Rows in TreeGrid
Hello,
When using TreeGrid, I want to use a custom button to add rows. My specific requirement is as follows:
Requirement:
- Clicking the "Add" button for a node should create a new child row under that node. For example, clicking the "Add" button on the "root" node should create a new child node at the same level as "result." Similarly, the functionality should work for all hierarchical levels.
What I Have Tried:
- I attempted to use the Command Editing feature (link to documentation), but it does not provide an "Add" option.
Expected Result:
- A customizable "Add" button for each row that allows dynamically adding a child row under the corresponding node.
Question:
- Is there a way to customize the "Add Row" button to achieve this functionality? (This could involve customizing the existing command or using any other approach that works best for this scenario)
My Code (Please Use This Code for Updates):
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.TreeGrid
<SfTreeGrid @ref="TreeGrid" IdMapping="TaskId" ParentIdMapping="ParentId"
DataSource="@TreeData" TreeColumnIndex="1"
AutoCheckHierarchy="true">
<TreeGridEvents CommandClicked="OnCommandClicked" TValue="BusinessObject"></TreeGridEvents>
<TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Row"></TreeGridEditSettings>
<TreeGridColumns>
<TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="90"></TreeGridColumn>
<TreeGridColumn HeaderText="Manage Records" Width="180">
<TreeGridCommandColumns>
<TreeGridCommandColumn ButtonOption="@(new CommandButtonOptions() { Content = "Add", CssClass = "e-flat" })"></TreeGridCommandColumn>
<TreeGridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></TreeGridCommandColumn>
<TreeGridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></TreeGridCommandColumn>
<TreeGridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-save", CssClass = "e-flat" })"></TreeGridCommandColumn>
<TreeGridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-cancel-icon", CssClass = "e-flat" })"></TreeGridCommandColumn>
</TreeGridCommandColumns>
</TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
@code{
public class BusinessObject
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateOnly? StartDate { get; set; }
public TimeOnly? StartTime { get; set; }
public int Duration { get; set; }
public int Progress { get; set; }
public string Priority { get; set; }
public int? ParentId { get; set; }
}
public List<BusinessObject> TreeData = new List<BusinessObject>();
SfTreeGrid<BusinessObject> TreeGrid;
protected override void OnInitialized()
{
TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
} }
Thank you for the support! I have successfully implemented the inline add functionality in the TreeGrid.
However, I have encountered a new issue while using the inline add feature.
Currently, as shown in the image below:
The Cancel button for the inline add row appears in a separate column, specifically in the column for TreeGridCommandColumns.
What I have tried:
To address this, I attempted to merge the column containing the Add button with the column that holds the TreeGridCommandColumns (which includes buttons like Edit, Delete, Save, and Cancel).
My goal is to have:
- A single action column that contains all buttons, including Add, Edit, Delete, Save, and Cancel.
- The Cancel button for the inline add row placed in the same cell as the Add button, within the same unified column.
As shown in the following image (Expected):
Could you provide guidance on how to customize the action column to meet this requirement?
Thank you for your assistance!
Best regards,
