How to create WinUI DataGrid (SfDataGrid) with calculated columns (Unbound Columns)?
WinUI DataGrid (SfDataGrid) allows adding additional columns which are not bound with data object from the underlying data source. GridUnboundColumn class used to add an unbound column. Unbound columns supports for sorting, filtering, grouping, exporting and printing as normal columns.
<syncfusion:GridUnboundColumn Width="150" AllowEditing="False" Expression="Quantity*Amount" HeaderText="Grand Total" MappingName="GrandTotal" TextAlignment="Right" />
It is mandatory to specify the GridColumn.MappingName for GridUnboundColumn with some name to identify the column. It is not necessary to define name of field in the data object.
Populating data for unbound column Using Expression
Expression property used to compute and display expressions like arithmetic or logic. By default, GridUnboundColumn evaluates the expression with casing. Disable the casing while evaluating the expression by setting CaseSensitive property to false.
<syncfusion:SfDataGrid x:Name="dataGrid"
AutoGenerateColumns="False"
AllowFiltering="True"
ColumnWidthMode="Star"
AllowEditing="True"
ItemsSource="{Binding ProductInfo}">
<syncfusion:SfDataGrid.Columns>
<!-- UnBoundColumn with Expressions -->
<syncfusion:GridUnboundColumn Width="150"
AllowEditing="False"
Expression="Quantity*Amount"
HeaderText="Grand Total"
MappingName="GrandTotal"
TextAlignment="Right" />
<syncfusion:GridUnboundColumn Width="150"
AllowEditing="False"
Expression="Amount*Discount/100"
HeaderText="Discount Amount"
MappingName="DiscountAmount"
TextAlignment="Right" />
<syncfusion:GridUnboundColumn Width="150"
Expression="((Quantity*Amount) - (Amount*Discount/100))"
HeaderText="Total Price"
MappingName="TotalPrice" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
Below are the list of Arithmetic and logical operations supported.
Arithmetic operations | Operator |
|---|---|
Add | + |
Subtract | - |
Multiply | * |
Divide | / |
Power | ^ |
Mod | % |
Greater Than | > |
Less Than | < |
Equal | = |
GreaterThanOrEqual | >= |
LessThanOrEqual | <= |
Logical operations | Operators |
|---|---|
AND | (char)135 |
OR | (char)136 |
NOT | (char)137 |
Read unbound column values
GetUnboundCellValue method is used to get the value of GridUnboundColumn.
this.dataGrid.CurrentCellValueChanged += OnCurrentCellValueChanged;
private void OnCurrentCellValueChanged(object sender, CurrentCellValueChangedEventArgs e)
{
var updateValue = this.dataGrid.GetUnboundCellValue(dataGrid.Columns[4], this.dataGrid.CurrentItem);
}
Styling unbound column
The style of unbound column customizes by writing style of TargetType GridCell or setting GridColumn.CellStyle property.
<Grid.Resources>
<Style x:Key="ApplyCellStyle" TargetType="syncfusion:GridCell">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Background" Value="Yellow"/>
</Style>
</Grid.Resources>
<syncfusion:SfDataGrid x:Name="dataGrid"
AutoGenerateColumns="False"
AllowFiltering="True"
ColumnWidthMode="Star"
AllowEditing="True"
ItemsSource="{Binding ProductInfo}">
<syncfusion:SfDataGrid.Columns>
<!-- UnBoundColumn with Expressions -->
<syncfusion:GridUnboundColumn Width="150"
AllowEditing="False"
Expression="Quantity*Amount"
HeaderText="Grand Total"
MappingName="GrandTotal"
TextAlignment="Right" >
<syncfusion:GridUnboundColumn.CellStyle>
<Style TargetType="syncfusion:GridCell">
<Setter Property="Foreground" Value="Red" />
</Style>
</syncfusion:GridUnboundColumn.CellStyle>
</syncfusion:GridUnboundColumn>
<syncfusion:GridUnboundColumn Width="150"
AllowEditing="False"
Expression="Amount*Discount/100"
HeaderText="Discount Amount"
CellStyle="{StaticResource ApplyCellStyle}"
MappingName="DiscountAmount"
TextAlignment="Right" />
<syncfusion:GridUnboundColumn Width="150"
Expression="((Quantity*Amount) - (Amount*Discount/100))"
HeaderText="Total Price"
MappingName="TotalPrice" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
The following screenshot shows the cell style applied GridUnboundColumn,
Take a moment to peruse the WinUI DataGrid - Unbound Column documentation, where you can find about GridUnboundColumn with code examples.
