New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI DataGrid Column Reordering

The DataGrid exposes a reordering feature allowing the user to drag and drop columns and change their order.

DataGrid Reordering Desktop

Properties

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:

DataGrid Reordering Phone

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:

DataGrid Reordering Indicator Phone

See Also

In this article
Not finding the help you need?