How to Perform Swiping Smoothly in .NET MAUI DataGrid?

In this article, we will show you how to perform swiping smoothly when using DataGridTemplateColumn in .NET MAUI DataGrid.

xaml
The code below demonstrates how to perform swiping smoothly when using DataGridTemplateColumn.

<ContentPage.BindingContext>
    <local:EmployeeViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding Employees}"
                       ColumnWidthMode="Auto"
                       AutoGenerateColumnsMode="None"
                       AllowSwiping="True"
                       GridLinesVisibility="Both"
                       MaxSwipeOffset="150"
                       RowHeight="60"
                       HeaderGridLinesVisibility="Both">

    <syncfusion:SfDataGrid.LeftSwipeTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#6750A4"
                  Padding="0">
                <Label Text="EDIT"
                       HorizontalTextAlignment="Center"
                       TextColor="#FFFFFF"
                       VerticalTextAlignment="Center"
                       LineBreakMode="NoWrap"
                       BackgroundColor="Transparent" />
            </Grid>
        </DataTemplate>
    </syncfusion:SfDataGrid.LeftSwipeTemplate>

    <syncfusion:SfDataGrid.Columns>
        <syncfusion:DataGridNumericColumn MappingName="EmployeeID"
                                          Format="#"
                                          HeaderText="Employee ID" />
        <syncfusion:DataGridTemplateColumn MappingName="Name"
                                           HeaderText="Employee Details">
            <syncfusion:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid InputTransparent="True"
                          ColumnSpacing="0"
                          RowSpacing="0"
                          HorizontalOptions="FillAndExpand"
                          Margin="0"
                          ColumnDefinitions="*,*,*"
                          RowDefinitions="10,*,10">
                        <StackLayout Margin="2"
                                     BackgroundColor="White"
                                     Orientation="Vertical"
                                     HorizontalOptions="FillAndExpand"
                                     VerticalOptions="FillAndExpand"
                                     Grid.Column="0"
                                     Grid.ColumnSpan="3"
                                     Grid.Row="1">
                            <StackLayout Orientation="Horizontal"
                                         HorizontalOptions="FillAndExpand">
                                <Label Text="Employee ID: "
                                       HorizontalTextAlignment="Start"
                                       FontSize="13"
                                       Padding="0,0,4,0" />
                                <Label Text="{Binding EmployeeID}"
                                       FontAttributes="Bold"
                                       TextColor="Black"
                                       FontSize="13"
                                       HorizontalTextAlignment="Start" />
                            </StackLayout>
                            <StackLayout Orientation="Horizontal"
                                         HorizontalOptions="FillAndExpand">
                                <Label Text="Employee Name:"
                                       HorizontalTextAlignment="Start"
                                       FontSize="13"
                                       Padding="0,0,4,0" />
                                <Label Text="{Binding Name}"
                                       FontAttributes="Bold"
                                       TextColor="Black"
                                       FontSize="13"
                                       HorizontalTextAlignment="Start" />
                            </StackLayout>
                        </StackLayout>
                    </Grid>
                </DataTemplate>
            </syncfusion:DataGridTemplateColumn.CellTemplate>
        </syncfusion:DataGridTemplateColumn>
        <syncfusion:DataGridTextColumn MappingName="Title"
                                       HeaderText="Designation" />
        <syncfusion:DataGridDateColumn MappingName="HireDate"
                                       HeaderText="Hire Date" />

    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

Output

Download the complete sample from GitHub

Conclusion

I hope you enjoyed learning how to perform swiping smoothly in .NET MAUI DataGrid.

You can refer to our .NET MAUI DataGrid feature tour page to learn about its other groundbreaking feature representations and documentation to understand how to present and manipulate data.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!