Drag and drop between child grids in a hierarchy grid?

[Al]

Is this possible? I tried to configure a child grid inside the detail template of a hierarchy grid to enable multi-selection, drag & drop however it doesn't seem to be working. I'm using the hierarchy grid example on the official syncfusion blazor demo page as the basis for my test. I set the id of the child grid to be grid-employee-<employee.EmployeeID> and hard-coded GridRowDropSettings TargetID to grid-employee-1 and grid-employee-2 just to see if I can drag and drop between the first two child grids. No luck so far.

Here is my code:

@page "/datagrid/hierarchy-grid"

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Data

<div class="col-lg-12 control-section">

<div class="content-wrapper">

<div class="row">

<SfGrid DataSource="@Employees" AllowRowDragAndDrop="true" Toolbar="@ToolbarItems" AllowSelection="true">

<GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple">GridSelectionSettings>

<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true">GridEditSettings>

<GridTemplates>

<DetailTemplate>

@{

var employee = (context as EmployeeData);

var gridId = $"grid-employee-{employee.EmployeeID}";

<SfGrid id="@gridId" TValue="Order"

Query="@GetEmployeesQuery(employee)" AllowPaging="true" AllowRowDragAndDrop="true"

Toolbar="@ToolbarItems" AllowSelection="true">

<GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple">

GridSelectionSettings>

<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true">

GridEditSettings>

<GridPageSettings PageSize="8">GridPageSettings>

<GridRowDropSettings TargetID="grid-employee-1">GridRowDropSettings>

<GridRowDropSettings TargetID="grid-employee-2">GridRowDropSettings>

<SfDataManager Url="https://js.syncfusion.com/demos/ejservices/Wcf/Northwind.svc/Orders"

CrossDomain="true">SfDataManager>

<GridTemplates>

<DetailTemplate Context="CustomerContext">

@{

var orders = (CustomerContext as Order);

<SfGrid TValue="CustomerDetails" Query="@GetOrderQuery(orders)">

<SfDataManager

Url="https://js.syncfusion.com/demos/ejservices/Wcf/Northwind.svc/Customers"

CrossDomain="true">SfDataManager>

<GridColumns>

<GridColumn Field=@nameof(CustomerDetails.CustomerID)

HeaderText="Customer ID" Width="110">GridColumn>

<GridColumn Field=@nameof(CustomerDetails.ContactTitle) HeaderText="Title"

Width="110">GridColumn>

<GridColumn Field=@nameof(CustomerDetails.Address) Width="110">GridColumn>

<GridColumn Field=@nameof(CustomerDetails.Country) Width="110">GridColumn>

GridColumns>

SfGrid>

}

DetailTemplate>

GridTemplates>

<GridColumns>

<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID"

TextAlign="TextAlign.Right" Width="110"> GridColumn>

<GridColumn Field=@nameof(Order.Freight) Format="c2" TextAlign="TextAlign.Right"

Width="110">GridColumn>

<GridColumn Field=@nameof(Order.ShipName) HeaderText="Ship Name" Width="110">

GridColumn>

<GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="110">

GridColumn>

GridColumns>

SfGrid>

}

DetailTemplate>

GridTemplates>

<GridColumns>

<GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID"

TextAlign="TextAlign.Right" Width="110"> GridColumn>

<GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="110">GridColumn>

<GridColumn Field=@nameof(EmployeeData.Title) Width="110">GridColumn>

<GridColumn Field=@nameof(EmployeeData.City) Width="110">GridColumn>

<GridColumn Field=@nameof(EmployeeData.Country) Width="110">GridColumn>

GridColumns>

SfGrid>

div>

div>

div>

@code {

private List<string> ToolbarItems { get; set; }

public Query GetOrderQuery(Order value)

{

return new Query().Where("CustomerID", "equal", value.CustomerID);

}

public Query GetEmployeesQuery(EmployeeData value)

{

return new Query().Where("EmployeeID", "equal", value.EmployeeID);

}

public List<EmployeeData> Employees { get; set; }

protected override void OnInitialized()

{

this.ToolbarItems = new List<string>() { "Add", "Delete", "Update", "Cancel" };

Employees = new List<EmployeeData>

{

new EmployeeData() {EmployeeID = 1, FirstName="Nancy", Title="Sales Representative",City="Texas", Country="USA"},

new EmployeeData() {EmployeeID = 2, FirstName="Andrew", Title="Vice President",City="London", Country="UK"},

new EmployeeData() {EmployeeID = 3, FirstName="Janet", Title="Sales",City="London", Country="UK"},

new EmployeeData() {EmployeeID = 4, FirstName="Margaret", Title="Sales Manager",City="London", Country="UK"},

new EmployeeData() {EmployeeID = 5, FirstName="Steven", Title="Inside Sales Coordinator",City="Vegas", Country="USA"},

new EmployeeData() {EmployeeID = 6, FirstName="Smith", Title="HR Manager",City="Dubai", Country="UAE"},

new EmployeeData() {EmployeeID = 7, FirstName="Steven", Title="Inside Sales Coordinator",City="Paris",

Country="France"},

new EmployeeData() {EmployeeID = 8, FirstName="Smith", Title="HR Manager",City="Mumbai", Country="India"},

new EmployeeData() {EmployeeID = 9, FirstName="Smith", Title="HR Manager",City="Chennai", Country="India"},

};

}

public class EmployeeData

{

public int? EmployeeID { get; set; }

public string FirstName { get; set; }

public string Title { get; set; }

public string City { get; set; }

public string Country { get; set; }

}

public class Order

{

public int? EmployeeID { get; set; }

public int? OrderID { get; set; }

public string CustomerID { get; set; }

public string ShipName { get; set; }

public string ShipCity { get; set; }

public double? Freight { get; set; }

}

public class CustomerDetails

{

public string CustomerID { get; set; }

public string ContactTitle { get; set; }

public string Country { get; set; }

public string Address { get; set; }

}

}

[Rahul Narayanasamy]

Hi AI,

Greetings from Syncfusion.

It is not possible to achieve your requirement using Hierarchy Grid. Because Hierarchy Grid (using DetailTemplate)  uses the same data source for all the child grid, where datasource are separate by specific field value. You can drag and drop records from Normal Grid to Hierarchy Grid. but it is not possible to drag and drop records between 2 child grids (details template).

Please let us know if you have any concerns.

Regards,

Rahul