Paged Datagrid using Syncfusion in Xamarin.Forms

I am trying to display a paged grid using MVVM architecture and Syncfusion controls. I managed to do just that using SfDataGrid in UWP, but I can't seem to get it right in Xamarin.Forms.

If I do not use the pager, the lines appear in the grid. (please see code below)

    <xForms:SfDataGrid
     x:Name="datagrid"
     AutoGenerateColumns="False"
     ItemsSource="{Binding Lines}"
     ColumnSizer="Star"
     DefaultColumnWidth="200"
     Columns="{Binding GridColumns, Mode=TwoWay}" />

But when I try to use the pager like this:

        <xForms:SfDataGrid
            x:Name="datagrid"
            AutoGenerateColumns="False"
            ItemsSource="{Binding PagedSource, Source={x:Reference Name=dataPager}}"
            ColumnSizer="Star"
            DefaultColumnWidth="200"
            Columns="{Binding GridColumns, Mode=TwoWay}" />

        <dataPager:SfDataPager
            Source="{Binding Lines, Mode=TwoWay}"
            x:Name="dataPager"
            Margin="5" Grid.Row="1" PageSize="7"
            HorizontalOptions="FillAndExpand" />

I get the following result: the Grid is empty, no exception is thrown and I can not find any binding errors in the output.

Also, I think the paging example in the official Syncfusion documentation might be incomplete, since it states that a binding must be done between the ItemsSource of the Grid and the Source of the Pager, but this does not appear in the xaml code sample presented there.

https://help.syncfusion.com/xamarin/sfdatagrid/paging?cs-save-lang=1&cs-lang=csharp

Is it something that I am missing or do I need to use code behind to make it work?

Solution

Thanks for using Syncfusion Product.

We checked your query and the code shared, you need to set the Source of Binding, while setting value to the “SfDataGrid.Columns” property. Please find the code snippet of the same below.

<ContentPage.BindingContext> 
    <local:ViewModel x:Name="viewModel" /> 
</ContentPage.BindingContext> 
<ContentPage.Content> 
    <Grid> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="*" /> 
            <RowDefinition Height="Auto" /> 
        </Grid.RowDefinitions> 
        <sfgrid:SfDataGrid x:Name="sfGrid"  
                           Grid.Row="0" 
                           AutoGenerateColumns="False" 
                           ColumnSizer="Star" 
                           DefaultColumnWidth="200" 
                           ItemsSource="{Binding PagedSource, Source={x:ReferencedataPager}}" 
                           Columns="{Binding GridColumns, Source={x:ReferenceviewModel}}" 
                           /> 
        <sfpager:SfDataPager x:Name ="dataPager" 
                             Margin="5" 
                             HorizontalOptions="FillAndExpand" 
                             Grid.Row="1" 
                             PageSize="7" 
                             HeightRequest ="50" 
                             Source="{Binding OrdersInfo}" 
                     /> 
    </Grid> 
</ContentPage.Content>

We have prepared the sample to achieve your requirement, you can download the same from the below link. Sample Link: http://www.syncfusion.com/downloads/support/directtrac/221044/ze/DataGridDemo-741889615

Regarding your query on documentation of the XAML code “Binding must be done between the ItemsSource of the Grid and the Source of the Pager”, we will update the XAML code of the documentation.

Regards, Vigneshkumar R