# data-grid-data-binding

> Data grid binds an Employees collection to numeric and text columns with formatted employee IDs.

**Framework:** maui  **Component:** data-grid  **Variant:** data-binding

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/maui/data-grid-data-binding.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Maui.DataGrid
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/data-grid-data-binding/Grid.xaml

```xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:model="clr-namespace:MAUI.Controls.DataGrid.DataBinding"
             xmlns:sfgrid="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
             x:Class="MAUI.Controls.DataGrid.DataBinding.DataBindingView"
             x:DataType="model:DataBindingViewModel">

    <sfgrid:SfDataGrid x:Name="dataGrid"
                       HeaderRowHeight="52"
                       RowHeight="48"
                       ItemsSource="{Binding Employees}"
                       ColumnWidthMode="Fill"
                       SelectionMode="Multiple"
                       NavigationMode="Row"
                       HeaderGridLinesVisibility="Both"
                       GridLinesVisibility="Both"
                       HorizontalScrollBarVisibility="Always"
                       VerticalScrollBarVisibility="Always">

        <sfgrid:SfDataGrid.Columns>
            <!-- EmployeeID -> int -> formatted with D (long form of int literal) -->
            <sfgrid:DataGridNumericColumn Format="D"
                                          MappingName="EmployeeID"
                                          HeaderText="Employee ID" />

            <!-- Simple auto-bound text columns -->
            <sfgrid:DataGridTextColumn MappingName="Name"        HeaderText="Name"         MinimumWidth="160" />
            <sfgrid:DataGridTextColumn MappingName="Designation" HeaderText="Designation"   MinimumWidth="180" />
            <sfgrid:DataGridTextColumn MappingName="Country"     HeaderText="Country"      MinimumWidth="140" />
            <sfgrid:DataGridTextColumn MappingName="Telephone"   HeaderText="Telephone"    MinimumWidth="160" />
            <sfgrid:DataGridTextColumn MappingName="Email"       HeaderText="E-mail"       MinimumWidth="240" />
        </sfgrid:SfDataGrid.Columns>
    </sfgrid:SfDataGrid>
</ContentPage>
```