Empty view in MAUI DataGrid (SfDataGrid)

11 May 202610 minutes to read

The SfDataGrid provides options to display and customize an empty view when no data is available to display using the following properties,

• EmptyView object can be set to a string or view when SfDataGrid has no items. The default value is null.
• EmptyViewTemplate is used to customize the appearance of EmptyView. The default value is null.

Display a string when DataGrid has no items

We can specify the EmptyView property to a string that will be shown when the ItemsSource property is null or when the collection that the ItemsSource property specifies is empty or null.

MainPage.xaml

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding Orders}"
                       EmptyView="No records">
</syncfusion:SfDataGrid>

MainPage.xaml.cs

SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel orderInfoViewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = orderInfoViewModel.Orders;
dataGrid.EmptyView = "No records";
this.Content = dataGrid;

Display views when DataGrid has no items

The EmptyView property can be set to a view, which will be displayed when the ItemsSource property is null, or when the collection specified by the ItemsSource property is null or empty.

MainPage.xaml

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding Orders}">
    <syncfusion:SfDataGrid.EmptyView>
        <StackLayout HorizontalOptions="Center"
                     VerticalOptions="Center">
            <Label Text="&#xE7A4;"
                   FontSize="20"
                   TextColor="Black"
                   FontFamily="MauiMaterialAssets.ttf"
                   HorizontalOptions="Center"/>
            <Label Text="No records"
                   FontSize="14"
                   TextColor="Black"/>
        </StackLayout>
    </syncfusion:SfDataGrid.EmptyView>
</syncfusion:SfDataGrid>

MainPage.xaml.cs

SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel orderInfoViewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = orderInfoViewModel.Orders;

// Customizing the empty view of the DataGrid
StackLayout stackLayout = new StackLayout() { HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };

var label1 = new Label()
{
    Text = "\uE7A4",
    FontSize = 20,
    TextColor = Colors.Black,
    FontFamily = "MauiMaterialAssets.ttf",
    HorizontalOptions = LayoutOptions.Center,
};
var label2 = new Label()
{
    Text = "No records",
    FontSize = 14,
    TextColor = Colors.Black,
};
stackLayout.Children.Add(label1);
stackLayout.Children.Add(label2);

dataGrid.EmptyView = stackLayout;
this.Content = dataGrid;

NOTE

The view that the EmptyView displays may be a single view or a view that has multiple child views.

Display a DataTemplate when DataGrid has no items

We can set the EmptyView to a custom type that will displayed when the ItemsSource is null or the collection that the ItemsSource parameter specifies is empty or null. The EmptyViewTemplate can be used to modify the EmptyView’s appearance.

MainPage.xaml

<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
             xmlns:local="clr-namespace:EmptyViewTemplate">
    <StackLayout>
        <SearchBar x:Name="filterText"
                   FontSize="16"
                   Placeholder="Filter Inventory"
                   WidthRequest="200"
                   Margin="0,0,0,10"/>
        <syncfusion:SfDataGrid x:Name="dataGrid"
                               ItemsSource="{Binding Orders}">
            <syncfusion:SfDataGrid.EmptyView>
                <local:FilterItem Filter="{Binding Source={x:Reference filterText},Path=Text}"
                                  x:Name="filter"/>
            </syncfusion:SfDataGrid.EmptyView>
            <syncfusion:SfDataGrid.EmptyViewTemplate>
                <DataTemplate>
                    <Label Text="{Binding Source={x:Reference filterText},Path=Text, StringFormat='{0} is not found'}"
                           TextColor="Black"
                           HorizontalTextAlignment="Center"
                           VerticalOptions="Center"
                           FontSize="14"
                           FontFamily="Roboto-Regular"/>
                </DataTemplate>
            </syncfusion:SfDataGrid.EmptyViewTemplate>
        </syncfusion:SfDataGrid>
    </StackLayout>
</ContentPage>

MainPage.xaml.cs

// Create a StackLayout to hold the SearchBar and SfDataGrid
StackLayout stackLayout = new StackLayout();

// SearchBar (x:Name="filterText")
var filterText = new SearchBar()
{
    FontSize = 16,
    Placeholder = "Filter Inventory",
    WidthRequest = 200,
    Margin = new Thickness(0, 0, 0, 10), // set margin as required
};

// Initialize SfDataGrid and set its ItemsSource
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel orderInfoViewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = orderInfoViewModel.Orders;

// EmptyView
var filterItem = new FilterItem();
// Binding: Filter="{Binding Source={x:Reference filterText}, Path=Text}"
filterItem.SetBinding(
    FilterItem.FilterProperty,
    new Binding(
        path: nameof(SearchBar.Text),
        source: filterText
    )
);

dataGrid.EmptyView = filterItem;

// EmptyViewTemplate
dataGrid.EmptyViewTemplate = new DataTemplate(() =>
{
    var label = new Label
    {
        TextColor = Colors.Black,
        HorizontalTextAlignment = TextAlignment.Center,
        VerticalOptions = LayoutOptions.Center,
        FontSize = 14,
        FontFamily = "Roboto-Regular"
    };

    // Text binding with StringFormat
    label.SetBinding(
        Label.TextProperty,
        new Binding(
            path: nameof(SearchBar.Text),
            source: filterText,
            stringFormat: "{0} is not found"
        )
    );

    return label;
});

stackLayout.Children.Add(filterText);
stackLayout.Children.Add(dataGrid);
this.Content = stackLayout;

The FilterItem type defines a Filter property.

FilterItem.cs

public class FilterItem : BindableObject
{
    public static readonly BindableProperty FilterProperty = BindableProperty.Create(nameof(Filter), typeof(string), typeof(FilterItem), null);

    public string Filter
    {
        get { return (string)GetValue(FilterProperty); }
        set { SetValue(FilterProperty, value); }
    }
}

FilterItem object is set to the EmptyView property, and the Filter property is bound to the SearchBar.Text property. When SearchBar.TextChanged event is raised, the value of the SearchBar.Text property is stored in the Filter property.