.NET MAUI DataGrid Columns Reordering
The .NET MAUI DataGrid exposes a reordering feature allowing the user to drag and drop columns and change their order.
CanUserReorderColumns(bool)—Defines whether the user can reorder the DataGridColumns. The default value is True.
ColumnReorderIndicatorTemplate(DataTemplate)—Defines the template that presents the indicator which is shown between two columns during reordering.
Example
Example with Reorder Columns
The following example shows how to bind the CanUserReorderColumns using MVVM.
Define the DataGrid and a control which will change the CanUserReorderColumns value in XAML:
<Grid ColumnDefinitions="Auto, Auto" Margin="0, 0, 0, 10">
<Label Text="Enable Column Reordering: " VerticalOptions="Center"/>
<Switch Grid.Column="1"
IsToggled="{Binding IsReorderingEnabled, Mode=TwoWay}"
VerticalOptions="Center"
HorizontalOptions="End"/>
</Grid>
<telerik:RadDataGrid x:Name="dataGrid"
Grid.Row="1"
CanUserReorderColumns="{Binding IsReorderingEnabled}"
ItemsSource="{Binding Data}"/>
Define the ViewModel:
public class ViewModel : NotifyPropertyChangedBase
{
private bool isReorderingEnabled;
public ViewModel()
{
this.Data = new ObservableCollection<PersonDetails>
{
new PersonDetails { Name = "Juan", Age = 21, Gender = Gender.Male, Weight = 94.2 },
new PersonDetails { Name = "Larry", Age = 22, Gender = Gender.Male, Weight = 68.9 },
new PersonDetails { Name = "Tiffany", Age = 34, Gender = Gender.Female, Weight = 83 },
new PersonDetails { Name = "Sebastian", Age = 16, Gender = Gender.Other, Weight = 72 },
new PersonDetails { Name = "Bojidara", Age = 42, Gender = Gender.Female, Weight = 52 },
};
}
public ObservableCollection<PersonDetails> Data { get; set; }
public bool IsReorderingEnabled
{
get => this.isReorderingEnabled;
set => this.UpdateValue(ref this.isReorderingEnabled, value);
}
}
The result on mobile:
Example with indicator template applied when reordering columns
The following example shows how to define the ColumnReorderIndicatorTemplate in XAML:
Define the DataTemplate for the Indicator in the Resources of the page:
<DataTemplate x:Key="reorderingIndicator">
<telerik:RadBorder BackgroundColor="LightSalmon"
WidthRequest="4"
HeightRequest="55"
HorizontalOptions="Start"
VerticalOptions="Start"
InputTransparent="True" />
</DataTemplate>
Define the property in the DataGrid:
<telerik:RadDataGrid x:Name="dataGrid"
Grid.Row="1"
ColumnReorderIndicatorTemplate="{StaticResource reorderingIndicator}"
ItemsSource="{Binding Data}"/>
The result on mobile:
