I would like to programatically reorder columns in a RadzenDataGrid, but have been unsuccessful.
Here is my razor markup for the grid and the controls to request the move:
<RadzenDataGrid AllowColumnReorder="true" Data="@addressDataItems" @ref="grdData" AllowFiltering="true" AllowColumnResize="true" PageSize="15" AllowPaging="true" AllowSorting="true" >
<Columns>
@for(int j = 0; j < PropertyNames.Count(); j++)
{
int k = j;
<RadzenDataGridColumn TItem="AddressDataItem" Property="@PropertyNames[k]" Title="@PropertyNames[k]" Width="200px" />
}
</Columns>
</RadzenDataGrid>
<br />
<RadzenDropDown TValue="string" Name="PropertyName" Data="@PropertyNames" @bind-Value="@PropertyName" />
<RadzenTextBox @bind-Value="@NewColumnIdxString" />
<RadzenButton Text="Move" Click="@((args) => MoveByPropertyName())" />
In my codebehind, I am populating the data, and defining the column names:
protected override async Task OnInitializedAsync()
{
addressDataItems = new List<AddressDataItem>();
addressDataItems.Add(new AddressDataItem() { Address = "123 Main St", City = "Cleveland", State = "OH", Zip = "43101", Name = "Brian Sipe" });
addressDataItems.Add(new AddressDataItem() { Address = "666 Turkeyfoot Lake Drive", City = "Akron", State = "OH", Zip = "44309", Name = "Bernie Kozar" });
addressDataItems.Add(new AddressDataItem() { Address = "1313 Mockingbird Lane", City = "Elkhart", State = "IN", Zip = "49101", Name = "Baker Mayfield" });
addressDataItems.Add(new AddressDataItem() { Address = "888 Bonanza", City = "Las Vegas", State = "NV", Zip = "89109", Name = "Brandon Weedon" });
addressDataItems.Add(new AddressDataItem() { Address = "10001 Pacific Coast Highway", City = "Newport Beach", State = "CA", Zip = "92608", Name = "Tim Couch" });
addressDataItems.Add(new AddressDataItem() { Address = "999 Louden Lane", City = "Imperial Beach", State = "CA", Zip = "93901", Name = "Kelly Holcomb" });
PropertyNames = new List<string>();
PropertyNames.Add("Name");
PropertyNames.Add("Address");
PropertyNames.Add("City");
PropertyNames.Add("State");
PropertyNames.Add("Zip");
}
And here is my codebehind for actually moving a column:
protected async Task MoveByPropertyName()
{
int oldIdx = PropertyNames.IndexOf(PropertyName);
PropertyNames.RemoveAt(oldIdx);
PropertyNames.Insert(NewColumnIdx, PropertyName);
grdData.Reload();
StateHasChanged();
}
The problem is that when I invoke the code to move the columns, it re-renders the column headers in the correct order, but does not reorder the data columns as expected.
Before:
After:
How can I reorder the data as well as the column headers?