88
Exploring Column Types in WinUI 3 DataGrid
The 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.
| Data Type | Column |
| string, object, dynamic | GridTextColumn |
| double and it's nullable | GridNumericColumn |
| DateTimeOffset and its nullable | GridDateColumn |
| Uri, Uri? | GridHyperLinkColumn |
| bool, bool? | GridCheckBoxColumn |
You can also disable the AutoGenerateColumns property in the WinUI DataGrid and manually create columns instead. The following code demonstrates this.
<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.
The following are the built-in column types in the WinUI DataGrid. Each column has properties to handle different types of data:
The text column holds textual content in its cells. The framework TextBox control is loaded as the editor to edit the cell values.
Refer to the following code example.
<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>
Note: For more information, refer to the GridTextColumn documentation.
The numeric column displays numeric values in its cells. The Syncfusion SfNumberBox control is loaded as the editor to edit the cell values.
The numeric column supports formatting the values using the DisplayNumberFormat or NumberFormatter. You can show the values in currency, decimal, and percentage formats.
Refer to the following code example.
<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>
Note: For more information, refer to the GridNumericColumn documentation.
The date column shows date values in its cells. The Syncfusion SfCalanderDatePicker control is loaded as the editor to edit the cell values.
The date column supports formatting the values using the DisplayDateFormat property. Using this, you can show the values in date, month, and year formats.
Refer to the following code example.
<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>
Note: For more details, refer to the GridDateColumn documentation.
The time column holds a time value in its cells. The Syncfusion SfTimePicker control is loaded as the editor to edit the cell values.
The time column supports formatting the values using the DisplayTimeFormat 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.
<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>
Note: For more details, refer to the GridTimeColumn documentation.
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 property. By default, the GridComboBoxColumn displays the value using the *MappingName * property.
Refer to the following code example.
<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>
Note: For more details, refer to the GridComboBoxColumn documentation.
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 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.
<dataGrid:SfDataGrid AutoGenerateColumns="False"
AllowEditing="True"
ItemsSource="{Binding Employees}">
<dataGrid:SfDataGrid.Columns>
……
<dataGrid:GridCheckBoxColumn HeaderText="Availability" MappingName="EmployeeStatus"/>
……
</dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
Note: For more details, refer to the GridCheckBoxColumn documentation.
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 event in the DataGrid.
Refer to the following code example.
<dataGrid:SfDataGrid
AllowEditing="True"
AutoGenerateColumns="False"
ItemsSource="{Binding Employees}">
<dataGrid:SfDataGrid.Columns>
……
<dataGrid:GridHyperlinkColumn MappingName="City"/>
……
</dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
Note: For more details, refer to the GridHyperlinkColumn documentation.
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.
<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>
Note: Refer to the GridImageColumn documentation for more details.
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.
<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>
Note: Refer to the GridToggleSwitchColumn documentation for more information.
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 and EditTemplate 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.
<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>
Note: Refer to the GridTemplateColumn documentation for more information.
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 event.
Refer to the following code.
<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>
Note: Refer to the Unbound Column in the WinUI DataGrid for more information.
Thanks for reading! I hope you now have enough information about the various column types in the WinUI DataGrid. Try out these column types and leave your feedback in the comments section below!
Browse our WinUI documentation for complete details about our WinUI controls. Also, don’t miss our demo app in the Microsoft Store.
For current customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our newest features.
Also, you can contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
88