Paged Datagrid using Syncfusion in Xamarin.Forms

Question

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?

@NickKovalsky I do not know which solution are you referring to. Can you please provide me with more details? — Cosmin
Install xamarin samples after you install the sdk and open/build SampleBrowser.SfDataGrid.sln — Nick Kovalsky
@NickKovalsky thanks for the suggestion, but that sample contains an unpaged SfDataGrid example. I had managed to bind the lines of the grid, paging seems to be the issue (which I also solved for UWP with some simillar code, can't seem to get it in forms) — Cosmin

Vignesh kumar Vignesh kumar · Accepted Answer · 2018-11-21T09:23:32

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

Paged Datagrid using Syncfusion in Xamarin.Forms

1 Answers