FM.Application.MAUI.DataGrid 1.0.1

FM MAUI DataGrid

The features offered in the Maui.DataGrid (https://github.com/akgulebubekir/Maui.DataGrid) repository did not fully meet my needs, so I cloned the repository and made the necessary modifications. I appreciate and thank you for the contributions from the original developers.

Features added:

• Added support for “load more” or pagination when scrolling to the bottom of the grid.
• Loading Added When Loading Data Indicator Will Be Shown.

Features to be added:

• Horizontal scrolling wasn’t working.

Pagination and Loading Indicators

This implementation supports pagination, allowing you to load more items as you scroll to the bottom. Below are the key properties and commands you can use:

Commands

• ScrollToLoadMoreCommand: Set this command to trigger the loading of more items when you scroll to the bottom of the list.

Properties

• IsLoadingMore: Set this property to true to show a loading indicator while more items are being loaded.
• LoadingMoreColor: Customize the color of the loading indicator by setting this property.
• ScrollAfterIndex: Specify the index after which the loading command will be triggered.

Initial Loading

If you're loading or adding items for the first time, or if you want to display a loading indication, use the following properties:

• IsLoading: Set this property to true to show an initial loading indicator.
• LoadingColor: Customize the color of the initial loading indicator by setting this property.

Horizontal Scrolling with DataGrid

To enable horizontal scrolling for the DataGrid, you can wrap the DataGrid in a Grid with ColumnDefinitions set to Auto, and then wrap that Grid in a ScrollView. This allows the DataGrid to scroll horizontally. Note that this functionality is not implemented in the package by default.

Example Implementation

<ScrollView Grid.Row="0" Orientation="Horizontal" CompressedLayout.IsHeadless="True">
    <Grid CompressedLayout.IsHeadless="True" Margin="0,0,0,100" ColumnDefinitions="Auto">
        <dg:DataGrid Grid.Row="0" Grid.Column="0" 
                     IsLoading="{Binding DataLoading}" 
                     IsLoadingMore="{Binding DataLoadingMore}" 
                     ScrollToLoadMoreCommand="{Binding LoadMoreDataCommand}" 
                     ItemsSource="{Binding AdData}"
                     BorderColor="Transparent" 
                     HeaderBackground="#2A2A2A" 
                     RowHeight="30">
            <dg:DataGrid.NoDataView>
                <Label Text="No Results Found" IsVisible="{Binding IsNotBusy}" Style="{StaticResource NoData}"/>
            </dg:DataGrid.NoDataView>
            <dg:DataGrid.Columns>
                <dg:DataGridColumn Title="Date Aired" Width="100" 
                                   HeaderLabelStyle="{StaticResource LeftColumnTitle}"
                                   PropertyName="DateAired" 
                                   SortingEnabled="True">
                    <dg:DataGridColumn.CellTemplate>
                        <DataTemplate>
                            <Label Text="{Binding}" Style="{StaticResource LeftColumnValue}" />
                        </DataTemplate>
                    </dg:DataGridColumn.CellTemplate>
                </dg:DataGridColumn>
            </dg:DataGrid.Columns>
            <dg:DataGrid.RowsBackgroundColorPalette>
                <dg:PaletteCollection>
                    <Color>#393939</Color>
                    <Color>#2A2A2A</Color>
                </dg:PaletteCollection>
            </dg:DataGrid.RowsBackgroundColorPalette>
        </dg:DataGrid>
    </Grid>
</ScrollView>