How to use SfDataGrid in Prism?

Prism helps us to implement collection of design patterns with well-structured and maintainable XAML applications, including MVVM, dependency injection, commands, Event Aggregator.

Prism MVVM helps to clean separation of concerns between the user interface and the model behind it. A major advantage of MVVM is data-binding to display information and respond to user input.

Installing and using the Prism Template Pack

Go to Tools > Extensions and Updates select Online and search for Prism Template Pack. Locate the extensions, click Download, and complete the installation. Click the Restart Now button.

Now that we have the Template Pack installed, lets create a new solution. Go to File > New > Project... select Installed > Templates > Visual C# > Prism. Here you will find all the templates available for a new Prism project/solution.

Select Prism Unity App (Forms) Visual C# fill in the name of your project/solution and click OK

Create SfDataGrid using Prism

Within the Portable project there is a Views folder. This folder will contain all your view related code.

Right click on the Views folder, click Add > New Item... under Installed > Visual C# > Prism > Forms select Prism Content Page (Forms)->your view page name and click Add. This creates a blank content page and equivalent ViewModel class in ViewModels folder.

You can define the SfDataGrid using the below code example:

XML/XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="PrismUnitySfDataGrid.Views.SfDataGridPage" 
             xmlns:syncfusion="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms">
    <ContentPage.Content>
        <syncfusion:SfDataGrid x:Name="dataGrid"
                        ItemsSource="{Binding OrdersInfo}">
        </syncfusion:SfDataGrid>
    </ContentPage.Content>
</ContentPage>

xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" is prism namespace

We need to set prism:ViewModelLocator.AutowireViewModel as True to the view model (MainPageViewModel.cs) automatically via naming conventions allowing for databinding to the view model.

Using the below code example, you can navigate the page to View page and register the classes using RegisterTypes override method.

C#

using Prism.Unity;
using PrismUnitySfDataGrid.Views;
using Xamarin.Forms;
 
namespace PrismUnitySfDataGrid
{
    public partial class App : PrismApplication
    {
        public App(IPlatformInitializer initializer = null) : base(initializer) { }
 
        protected override void OnInitialized()
        {
            InitializeComponent();
 
            NavigationService.NavigateAsync("NavigationPage/SfDataGridPage");
        }
 
        protected override void RegisterTypes()
        {
            Container.RegisterTypeForNavigation<NavigationPage>();
            Container.RegisterTypeForNavigation<MainPage>();
            Container.RegisterTypeForNavigation<SfDataGridPage>();
        }
    }
}

Sample link: How to load SfDataGrid using prism library?