Exploring Column Types in WinUI 3 DataGrid
Tags: winui, csharp, dotnet, desktop
Published: 2021-11-11 12:36:04

---
title: Exploring Column Types in WinUI 3 DataGrid
published: true
date: 2021-11-11 11:30:19 UTC
tags: winui, csharp, dotnet, desktop
canonical_url: https://www.syncfusion.com/blogs/post/exploring-column-types-in-winui-3-datagrid.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58r2syqryrdoh9rrgogq.png
---

The [WinUI DataGrid](https://www.syncfusion.com/winui-controls/datagrid "Link to WinUI DataGrid") is used for efficiently displaying and manipulating tabular data. Its rich feature set includes data binding, editing, sorting, filtering, grouping, and data virtualization.

It provides various built-in columns to easily edit the values in a cell. While editing a cell, an editor will be loaded based on the data type of its column. DataGrid columns are automatically generated based on the type of data object bound to the DataGrid.

The following table shows the data type and its corresponding column type.
<table style="height: 138px;">
<tbody>
<tr style="height: 23px;">
<td style="height: 23px;" width="312"><strong>Data Type</strong></td>
<td style="height: 23px;" width="312"><strong>Column</strong></td>
</tr>
<tr style="height: 23px;">
<td style="height: 23px;" width="312">string, object, dynamic</td>
<td style="height: 23px;" width="312"><a title="Link to the GridTextColumn Class of WinUI DataGrid" href="https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridTextColumn.html">GridTextColumn</a></td>
</tr>
<tr style="height: 23px;">
<td style="height: 23px;" width="312">double and it's nullable</td>
<td style="height: 23px;" width="312"><a title="Link to the GridNumericColumn Class of WinUI DataGrid" href="https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridNumericColumn.html">GridNumericColumn</a></td>
</tr>
<tr style="height: 23px;">
<td style="height: 23px;" width="312">DateTimeOffset and its nullable</td>
<td style="height: 23px;" width="312"><a title="Link to the GridDateColumn Class of WinUI DataGrid" href="https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridDateColumn.html">GridDateColumn</a></td>
</tr>
<tr style="height: 23px;">
<td style="height: 23px;" width="312">Uri, Uri?</td>
<td style="height: 23px;" width="312"><a title="Link to the GridHyperlinkColumn Class of WinUI DataGrid" href="https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridHyperlinkColumn.html">GridHyperLinkColumn</a></td>
</tr>
<tr style="height: 23px;">
<td style="height: 23px;" width="312">bool, bool?</td>
<td style="height: 23px;" width="312"><a title="Link to the GridCheckBoxColumn Class of WinUI DataGrid" href="https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridCheckBoxColumn.html">GridCheckBoxColumn</a></td>
</tr>
</tbody>
</table>

You can also disable the [AutoGenerateColumns](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Grids.SfGridBase.html#Syncfusion_UI_Xaml_Grids_SfGridBase_AutoGenerateColumns "Link to the AutoGenerateColumns property of WinUI DataGrid") property in the WinUI DataGrid and manually create columns instead. The following code demonstrates this.

```html
<dataGrid:SfDataGrid AutoGenerateColumns="False"
                ItemsSource="{Binding Employees}">
    <dataGrid:SfDataGrid.Columns>
        <dataGrid:GridCheckBoxColumn MappingName="EmployeeStatus" />
        <dataGrid:GridNumericColumn MappingName="EmployeeID"/>
        <dataGrid:GridTextColumn MappingName="Name" />
        <dataGrid:GridTextColumn MappingName="Gender" />
        <dataGrid:GridDateColumn MappingName="HireDate" />        
    </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```

In this blog, we are going to see how to use the different column types in the WinUI DataGrid with code examples.

## Types of columns

The following are the built-in column types in the WinUI DataGrid. Each column has properties to handle different types of data:

- [Text column](#text-column)
- [Numeric column](#numeric-column)
- [Date column](#date-column)
- [Time column](#time-column)
- [Combo box column](#combo-box-column)
- [Checkbox column](#checkbox-column)
- [Hyperlink column](#hyperlink-column)
- [Image column](#image-column)
- [Toggle switch column](#toggle-switch-column)
- [Template column](#template-column)
- [Unbound column](#unbound-column)

### Text column

The text column holds textual content in its cells. The framework [TextBox](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.textbox "Link to the TextBox Class of WinUI framework") control is loaded as the editor to edit the cell values.

Refer to the following code example.

```html
<dataGrid:SfDataGrid AutoGenerateColumns="False"
                ItemsSource="{Binding Employees}">
    <dataGrid:SfDataGrid.Columns>
        ……
        <dataGrid:GridTextColumn HeaderText="Employee Name" MappingName="Name" />
        <dataGrid:GridTextColumn MappingName="Gender" />
        ……
    </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```

![Text Column in WinUI DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Text-Column-in-WinUI-DataGrid.gif)
<figcaption>Text Column in WinUI DataGrid</figcaption>

**Note:** For more information, refer to the [GridTextColumn](https://help.syncfusion.com/winui/datagrid/column-types#gridtextcolumn "Documentation link to the GridTextColumn of WinUI DataGrid") documentation.

### Numeric column

The numeric column displays numeric values in its cells. The Syncfusion [SfNumberBox](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfNumberBox.html "Link to the Class SfNumberBox") control is loaded as the editor to edit the cell values.

The numeric column supports formatting the values using the [DisplayNumberFormat](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridNumericColumn.html#Syncfusion_UI_Xaml_DataGrid_GridNumericColumn_DisplayNumberFormat "Link to the DisplayNumberFormat property of WinUI DataGrid") or [NumberFormatter](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridNumericColumn.html#Syncfusion_UI_Xaml_DataGrid_GridNumericColumn_NumberFormatter "Link to the NumberFormatter property of WinUI DataGrid"). You can show the values in currency, decimal, and percentage formats.

Refer to the following code example.

```html
<dataGrid:SfDataGrid
                AllowEditing="True"
                AutoGenerateColumns="False"
                ItemsSource="{Binding Employees}">
    <dataGrid:SfDataGrid.Columns>
        ……
        <dataGrid:GridNumericColumn HeaderText="Employee ID" MappingName="EmployeeID" TextAlignment="Right" />
        ……
    </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```

![Numeric Column in WinUI DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Numeric-Column-in-WinUI-DataGrid.gif)
<figcaption>Numeric Column in WinUI DataGrid</figcaption>

**Note:** For more information, refer to the [GridNumericColumn](https://help.syncfusion.com/winui/datagrid/column-types#gridnumericcolumn "Documentation link to GridNumericColumn of WinUI DataGrid") documentation.

### Date column

The date column shows date values in its cells. The Syncfusion [SfCalanderDatePicker](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html "Link to SfCalendarDatePicker Class") control is loaded as the editor to edit the cell values.

The date column supports formatting the values using the  [DisplayDateFormat](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridDateColumn.html#Syncfusion_UI_Xaml_DataGrid_GridDateColumn_DisplayDateFormat "Link to the DisplayDateFormat property of WinUI DataGrid") property. Using this, you can show the values in date, month, and year formats.

Refer to the following code example.

```html
<dataGrid:SfDataGrid
                AllowEditing="True"
                AutoGenerateColumns="False"
                ItemsSource="{Binding Employees}">
    <dataGrid:SfDataGrid.Columns>
        ……

        <dataGrid:GridDateColumn MappingName="HireDate"
                        HeaderText="Hire Date"
                        TextAlignment="Right" />
        ……
    </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```

![Date Column in WinUI DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Date-Column-in-WinUI-DataGrid.gif)
<figcaption>Date Column in WinUI DataGrid</figcaption>

**Note:** For more details, refer to the [GridDateColumn](https://help.syncfusion.com/winui/datagrid/column-types#griddatecolumn "Documentation link to the GridDateColumn of WinUI DataGrid") documentation.

### Time column

The time column holds a time value in its cells. The Syncfusion [SfTimePicker](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfTimePicker.html "Link to the Class SfTimePicker") control is loaded as the editor to edit the cell values.

The time column supports formatting the values using the [DisplayTimeFormat](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridTimeColumn.html#Syncfusion_UI_Xaml_DataGrid_GridTimeColumn_DisplayTimeFormat "Link to the DisplayTimeFormat property of WinUI DataGrid") property. With this, you can show the time in hours, minutes, seconds, meridian, 12-Hour, and 24-Hour formats.

**Note:** This is not an autogenerated column. You can create the column manually and add it to the DataGrid.

```html
<dataGrid:SfDataGrid
                AllowEditing="True"
                AutoGenerateColumns="False"
                ItemsSource="{Binding Employees}">
    <dataGrid:SfDataGrid.Columns>
        ……
        <dataGrid:GridTimeColumn MappingName="CheckInTime" HeaderText="Check In Time" 
                                 AllowNull="True" 
                                 DisplayTimeFormat="HH:mm:ss" 
                                 EditMode="Mask" 
                                 PlaceholderText="Enter a Time" 
                                 TextAlignment="Right"/>
        ……
    </dataGrid:SfDataGrid.Columns>
```

![Time Column in WinUI DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Time-Column-in-WinUI-DataGrid.gif)
<figcaption>Time Column in WinUI DataGrid</figcaption>

**Note:** For more details, refer to the [GridTimeColumn](https://help.syncfusion.com/winui/datagrid/column-types#gridtimecolumn "Documentation link to the DisplayTimeFormat property of WinUI DataGrid") documentation.

### Combo box column

The combo box column holds the IEnumerable type value and displays the selected value in its cells. The framework ComboBox control is loaded as the editor to select and change the values in the cell. You can set the data source of the ComboBox using the [GridComboBoxColumn.ItemsSource](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridComboBoxColumn.html#Syncfusion_UI_Xaml_DataGrid_GridComboBoxColumn_ItemsSource "Link to the ItemsSource property of WinUI DataGrid") property. By default, the **GridComboBoxColumn**  displays the value using the  **MappingName ** property.

Refer to the following code example.

```html
<dataGrid:SfDataGrid
                AllowEditing="True"
                AutoGenerateColumns="False"
                ItemsSource="{Binding Employees}">
    <dataGrid:SfDataGrid.Columns>
            ……
        <dataGrid:GridComboBoxColumn HeaderText="Designation"  
                                     MappingName="Title" 
                                     ItemsSource="{Binding TitleCollection, Source={StaticResource employeeViewModel}}" />
             ……
    </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```

![ComboBox Column in WinUI DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/ComboBox-Column-in-WinUI-DataGrid.gif)
<figcaption>ComboBox Column in WinUI DataGrid</figcaption>

**Note:** For more details, refer to the [GridComboBoxColumn](https://help.syncfusion.com/winui/datagrid/column-types#gridcomboboxcolumn "Documentation link to the GridComboBoxColumn of WinUI DataGrid") documentation.

### Checkbox column

The check box column holds Boolean values in its cells. Here, we will load the framework CheckBox control as the editor to edit the cell values.

By default, the checked and unchecked states represent a true or false value, respectively. If you set the [IsThreeState](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridCheckBoxColumn.html#Syncfusion_UI_Xaml_DataGrid_GridCheckBoxColumn_IsThreeState "Link to the IsThreeState property of WinUI DataGrid") property to true, the checkbox will have an intermediate state. This will work when you set the type of the property to nullable Boolean.

Refer to the following code example.

```html
<dataGrid:SfDataGrid AutoGenerateColumns="False"
                AllowEditing="True"
                ItemsSource="{Binding Employees}">
    <dataGrid:SfDataGrid.Columns>
            ……
        <dataGrid:GridCheckBoxColumn HeaderText="Availability" MappingName="EmployeeStatus"/>
            ……
    </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```

![Checkbox Column in WinUI DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Checkbox-Column-in-WinUI-DataGrid.gif)
<figcaption>Checkbox Column in WinUI DataGrid</figcaption>

**Note:** For more details, refer to the [GridCheckBoxColumn](https://help.syncfusion.com/winui/datagrid/column-types#gridcheckboxcolumn "Documentation link to the GridCheckBoxColumn of WinUI DataGrid") documentation.

### Hyperlink column

The hyperlink column holds the URI data in its cells. Here, we will load the framework HyperlinkButton control as the editor to edit the cell values. You can navigate to the corresponding URI using the [CurrentCellRequestNavigate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.SfDataGrid.html#Syncfusion_UI_Xaml_DataGrid_SfDataGrid_CurrentCellRequestNavigate "Link to the CurrentCellRequestNavigate property of WinUI DataGrid") event in the DataGrid.

Refer to the following code example.

```html
<dataGrid:SfDataGrid
                 AllowEditing="True"
                 AutoGenerateColumns="False"
                 ItemsSource="{Binding Employees}">
     <dataGrid:SfDataGrid.Columns>
            ……
         <dataGrid:GridHyperlinkColumn MappingName="City"/>
            ……         
     </dataGrid:SfDataGrid.Columns>
 </dataGrid:SfDataGrid>
```

![Hyperlink Column in WinUI DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Hyperlink-Column-in-WinUI-DataGrid.png)
<figcaption>Hyperlink Column in WinUI DataGrid</figcaption>

**Note:** For more details, refer to the [GridHyperlinkColumn](https://help.syncfusion.com/winui/datagrid/column-types#gridhyperlinkcolumn "Documentation link to the GridHyperlinkColumn of WinUI DataGrid") documentation.

### Image column

This image column holds the image in its cells. The framework Image control is loaded to display the grid cell content.

**Note:** This is not an autogenerated column. You can create the column manually and add it to the DataGrid.

```html
<dataGrid:SfDataGrid x:Name="dataGrid"
               AutoGenerateColumns="False" 
               ItemsSource="{Binding Orders}">
    <dataGrid:SfDataGrid.Columns>
            ……
        <dataGrid:GridImageColumn MappingName="ImageLink"
                            HeaderText="Flag"
                            Stretch="Uniform"
                            TextAlignment="Center" />
            ……
    </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```

![Image Column in WinUI DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Image-Column-in-WinUI-DataGrid.png)
<figcaption>Image Column in WinUI DataGrid</figcaption>

**Note:** Refer to the [GridImageColumn ](https://help.syncfusion.com/winui/datagrid/column-types#gridimagecolumn "Documentation link to the GridImageColumn of WinUI DataGrid")documentation for more details.

### Toggle switch column

This toggle switch column holds Boolean value in its cells. We will load the framework ToggleSwitch control to display the cell values. With this, you can display both text and toggle switches.

**Note:** This is not an autogenerated column. You can create the column manually and add it to the DataGrid.

```html
<dataGrid:SfDataGrid
                AllowEditing="True"
                AutoGenerateColumns="False"
                ItemsSource="{Binding Employees}">
    <dataGrid:SfDataGrid.Columns>
            ……
        <dataGrid:GridToggleSwitchColumn HeaderText="Availability"
                                         MappingName="EmployeeStatus" 
                                         AllowEditing="True"/>
            ……
    </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```

![Toggle Switch Column in WinUI DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Toggle-Switch-Column-in-WinUI-DataGrid.gif)
<figcaption>Toggle Switch Column in WinUI DataGrid</figcaption>

**Note:** Refer to the [GridToggleSwitchColumn](https://help.syncfusion.com/winui/datagrid/column-types#gridtoggleswitchcolumn "Documentation link to the GridToggleSwitchColumn of WinUI DataGrid") documentation for more information.

### Template column

This column displays template-specified cell content. You can load any kind of WinUI control in the display and edit modes for all columns by setting the [CellTemplate ](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Grids.GridColumnBase.html#Syncfusion_UI_Xaml_Grids_GridColumnBase_CellTemplate "Link to the CellTemplate property of WinUI DataGrid")and [EditTemplate ](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridTemplateColumn.html#Syncfusion_UI_Xaml_DataGrid_GridTemplateColumn_EditTemplate "Link to the EditTemplate property of WinUI DataGrid")properties, respectively.

By default, the underlying record is  **DataContext**  for **CellTemplate**. So, you have to define the template for each column to display values based on the  **MappingName** property.

Refer to the following code example.

```html
<dataGrid:SfDataGrid AutoGenerateColumns="False"
                       AllowEditing="True"
                       ItemsSource="{Binding Orders}">
    <dataGrid:SfDataGrid.Columns>
            ……
        <dataGrid:GridTemplateColumn MappingName="Name" HeaderText="Employee Name" >
            <dataGrid:GridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" />
                </DataTemplate>
            </dataGrid:GridTemplateColumn.CellTemplate>
            <dataGrid:GridTemplateColumn.EditTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding CustomerName, Mode=TwoWay}" FontStyle="Italic" FontWeight="Bold" />
                </DataTemplate>
            </dataGrid:GridTemplateColumn.EditTemplate>
        </dataGrid:GridTemplateColumn>
            ……
    </dataGrid:SfDataGrid>
```

![Template Column in WinUI DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Template-Column-in-WinUI-DataGrid.gif)
<figcaption>Template Column in WinUI DataGrid</figcaption>

**Note:** Refer to the [GridTemplateColumn](https://help.syncfusion.com/winui/datagrid/column-types#gridtemplatecolumn "Documentation link to the GridTemplateColumn of WinUI DataGrid") documentation for more information.

### Unbound column

The WinUI DataGrid also allows you to add additional columns that are not bound with the data object from the underlying data source. You can add an unbound column using the **GridUnboundColumn**  class. The data for an unbound column is populated by setting the **Expression** or **Format** property or through the [QueryUnboundColumnValue ](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.SfDataGrid.html#Syncfusion_UI_Xaml_DataGrid_SfDataGrid_QueryUnboundColumnValue "Link to the QueryUnboundColumnValue property of WinUI DataGrid")event.

Refer to the following code.

```html
<dataGrid:SfDataGrid
                AllowEditing="True"
                AutoGenerateColumns="False"
                ItemsSource="{Binding Employees}">
    <dataGrid:SfDataGrid.Columns>
            ……
        <dataGrid:GridUnboundColumn MappingName="CurrentSalary" 
                                    Expression="Salary*Rating/100" 
                                    HeaderText="Hike Salary" 
                                    TextAlignment="Right" />
            ……
    </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```

![Unbound Column in WinUI DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Unbound-Column-in-WinUI-DataGrid.png)
<figcaption>Unbound Column in WinUI DataGrid</figcaption>

**Note:** Refer to the [Unbound Column in the WinUI DataGrid](https://help.syncfusion.com/winui/datagrid/unbound-column "Documentation link to Unbound Column in WinUI DataGrid") for more information.

## Conclusion

Thanks for reading! I hope you now have enough information about the various column types in the [WinUI DataGrid](https://www.syncfusion.com/winui-controls/datagrid "Link to WinUI DataGrid"). Try out these column types and leave your feedback in the comments section below!

Browse our [WinUI documentation](https://help.syncfusion.com/winui/overview "Documentation link to the Syncfusion WinUI Controls") for complete details about our WinUI controls. Also, don’t miss our demo app in the [Microsoft Store](https://install.appcenter.ms/orgs/syncfusion-demos/apps/winui-demos/distribution_groups/release "Link to Syncfusion WinUI Demos on the App Center").

For current customers, the new version is available for download from the [License and Downloads ](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio")page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our newest features.

Also, you can contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/winui "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Everything You Need to Know About WinUI 3 Linear Gauge](https://dev.to/syncfusion/everything-you-need-to-know-about-winui-3-linear-gauge-43b7 "Link to Everything You Need to Know About WinUI 3 Linear Gauge blog")
- [New WinUI Segmented Control Is Here!](https://dev.to/kartik110895/new-winui-segmented-control-is-here-38i-temp-slug-3162889 "Link to New WinUI Segmented Control Is Here! blog")
- [Introducing the New WinUI 3 ComboBox](https://dev.to/kartik110895/introducing-the-new-winui-3-combobox-1p15-temp-slug-5893511 "Link to Introducing the New WinUI 3 ComboBox blog")
- [Everything You Need to Know About the WinUI 3 Range Slider](https://dev.to/karthickramasamy08/everything-you-need-to-know-about-the-winui-3-range-slider-6le-temp-slug-6280309 "Link to Everything You Need to Know About the WinUI 3 Range Slider blog")