Continuing the discussion from Re-Order DataGrid Drag and Drop Row- Radzen:
Dears @enchev @iustin94
You can apply this easily. I will write an example code for one level for you, and it can be applied easily.
<RadzenDataGrid Data="@Employees" TItem="Employee" AllowFiltering="true" @ref="Grid">
<Columns>
<RadzenDataGridColumn TItem="Employee" Filterable="false" Sortable="true">
<HeaderTemplate>
<div class="row">
<div class="col-3">
Name
</div>
<div class="col-3">
Job Title
</div>
<div class="col-3">
Salary
</div>
<div class="col-3">
Department
</div>
</div>
</HeaderTemplate>
<Template Context="data">
<div draggable="true" @ondragstart="@(() => OnDragStart(data))" ondragover="event.preventDefault()" @ondrop="@(() => OnDropAsync(data))" class="drag-and-drop">
<div class="row" style="cursor:move;">
<div class="col-3">
@data.Name
</div>
<div class="col-3">
@data.JobTitle
</div>
<div class="col-3">
@data.Salary
</div>
<div class="col-3">
@data.Department
</div>
</div>
</div>
</Template>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
@code {
RadzenDataGrid<Employee>? Grid;
Employee? _selectedNode;
Employee? _droppedNode;
private List<Employee> Employees = new List<Employee>
{
new Employee("Robin", 28, "Bangladesh", "Developer", 5000, "IT", new DateTime(2022, 1, 15), "robin@example.com", "123456"),
new Employee("Tuhin", 27, "USA", "Designer", 4500, "Design", new DateTime(2021, 12, 10), "tuhin@example.com", "789012"),
new Employee("Nion", 26, "Canada", "Manager", 6000, "Management", new DateTime(2022, 2, 20), "nion@example.com", "345678"),
new Employee("Papon", 25, "Africa", "Engineer", 5500, "Engineering", new DateTime(2022, 3, 25), "papon@example.com", "901234"),
new Employee("Faysal", 24, "Netherland", "Analyst", 4800, "Analysis", new DateTime(2022, 4, 30), "faysal@example.com", "567890"),
new Employee("Nahid", 23, "China", "Coordinator", 4700, "Coordination", new DateTime(2022, 5, 5), "nahid@example.com", "234567"),
new Employee("Nayem", 22, "Brazil", "Supervisor", 5200, "Supervision", new DateTime(2022, 6, 10), "nayem@example.com", "890123"),
new Employee("John", 21, "Uganda", "Assistant", 4600, "Assistantship", new DateTime(2022, 7, 15), "john@example.com", "456789"),
};
void OnDragStart(Employee employee)
{
_selectedNode = employee;
}
void OnDropAsync(Employee employee, bool isUp = false)
{
_droppedNode = employee;
if (_selectedNode != null && _selectedNode != employee)
{
int originalIndex = Employees.IndexOf(_selectedNode);
Employees.Remove(_selectedNode);
int droppedIndex = Employees.IndexOf(_droppedNode); // Move to position after the target node
// Check if moving downwards and adjust the index if needed
if (originalIndex <= droppedIndex)
{
droppedIndex++; // Adjust index to account for the removed item
}
Employees.Insert(droppedIndex, _selectedNode);
//..............
// here put your code to save order in db if you want
// await UpdateAllNodesAsync(); // Update all nodes' positions
//..............
Grid!.Reload();
}
}
}
public class Employee
{
public Employee(string name, int age, string country, string jobTitle, double salary, string department, DateTime hireDate, string email, string phoneNumber)
{
Name = name;
Age = age;
Country = country;
JobTitle = jobTitle;
Salary = salary;
Department = department;
HireDate = hireDate;
Email = email;
PhoneNumber = phoneNumber;
}
public string Name { get; set; } = string.Empty;
public int Age { get; set; }
public string Country { get; set; } = string.Empty;
public string JobTitle { get; set; } = string.Empty;
public double Salary { get; set; }
public string Department { get; set; } = string.Empty;
public DateTime HireDate { get; set; } = DateTime.Now;
public string Email { get; set; } = string.Empty;
public string PhoneNumber { get; set; } = string.Empty;
}
