How to add record with dynamic NewRowPosition using context menu?

The Syncfusion Blazor Tree Grid component provide support to add the new row in different positions as listed below:

• Top
• Bottom
• Above the selected row
• Below the selected row
• Child of selected row

We can set the position by using TreeGridEditSettings.NewRowPosition property. By default, a new row will be added at the top of the Tree Grid.

The following example shows how to set different NewRowPosition dynamically and add new record with the help of context menu.

Customization

• We need to add the different new row position as context menu items by defining the ContextMenuItems as a collection of ContextMenuItemModel.
• In ContextMenuItemClicked event, we need to call AddRecord method by passing data (data to be added as new record), selected row’s index value and NewRowPosition as parameters to it.
• We can collect the selected row’s index value from the RowSelected event of Tree Grid.

  @{
      List<ContextMenuItemModel> ContextItems = new List<ContextMenuItemModel>();
      ContextItems.Add(new ContextMenuItemModel() { Text = "Add Top", Target = ".e-content", Id = "addtop" });
      ContextItems.Add(new ContextMenuItemModel() { Text = "Add Bottom", Target = ".e-content", Id = "addbottom" });
      ContextItems.Add(new ContextMenuItemModel() { Text = "Add Above", Target = ".e-content", Id = "addabove" });
      ContextItems.Add(new ContextMenuItemModel() { Text = "Add Below", Target = ".e-content", Id = "addbelow" });
      ContextItems.Add(new ContextMenuItemModel() { Text = "Add Child", Target = ".e-content", Id = "addchild" });
  }
   
  <SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId"
              TreeColumnIndex="1" ContextMenuItems="ContextItems" Toolbar="@(new List<string>() { " Edit", "Delete" , "Update" , "Cancel" })">
      <TreeGridEvents TValue="TreeData" RowSelected="RowSelectHandler" ContextMenuItemClicked="OnContextMenuClick"></TreeGridEvents>
      <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"
                            Mode="Syncfusion.Blazor.TreeGrid.EditMode.Row" NewRowPosition="Syncfusion.Blazor.TreeGrid.RowPosition.Below"></TreeGridEditSettings>
      <TreeGridColumns>
          <TreeGridColumn Field="TaskId" HeaderText="Task ID" IsPrimaryKey="true" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
          <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
          <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
          <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
          <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80" EditType="EditType.DropDownEdit"></TreeGridColumn>
      </TreeGridColumns>
  </SfTreeGrid>
  @code{
  SfTreeGrid<TreeData> TreeGrid;
  public List<TreeData> TreeGridData { get; set; }
  public double PreviousSelectedIndex = -1;
  public int value = 20;
   
  protected override void OnInitialized()
  {
      this.TreeGridData = TreeData.GetSelfDataSource().ToList();
  }
  public void RowSelectHandler(RowSelectEventArgs<TreeData> args)
  {
      PreviousSelectedIndex = args.RowIndex; // saving the selected row index
  }
  public void OnContextMenuClick(ContextMenuClickEventArgs<TreeData> args)
  {
      var row = PreviousSelectedIndex;
      ++value;
      var data = new TreeData()
      {
          TaskId = value,
          TaskName = "New Task",
          Duration = 10,
          Progress = 70,
          Priority = "Critical",
          Resources = 1
      };
      if (args.Item.Id == "addtop")
      {
          //adding new record in "Top" NewRowPosition
          this.TreeGrid.AddRecord(data, 0, RowPosition.Top);
      }
      else if (args.Item.Id == "addbottom")
      {
          //adding new record in "Bottom" NewRowPosition
          this.TreeGrid.AddRecord(data, this.TreeGrid.GetCurrentViewRecords().Count - 1, RowPosition.Bottom);
      }
      else if (args.Item.Id == "addabove")
      {
          //adding new record in "Above" NewRowPosition
          this.TreeGrid.AddRecord(data, row, RowPosition.Above);
      }
      else if (args.Item.Id == "addbelow")
      {
          //adding new record in "Below" NewRowPosition
          this.TreeGrid.AddRecord(data, row, RowPosition.Below);
      }
      else if (args.Item.Id == "addchild")
      {
          //adding new record in "Child" NewRowPosition
          this.TreeGrid.AddRecord(data, row, RowPosition.Child);
      }
  }
  }
  

Figure 1: NewRowposition in Tree Grid

Conclusion

I hope you enjoyed learning how to add record with dynamic NewRowPosition using context menu.

You can refer to our Blazor TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor TreeGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!