Unbound Column in Xamarin DataGrid (SfDataGrid)

8 Aug 20237 minutes to read

The data grid allows adding additional columns which are not bound with data object from the underlying data source. The unbound column can be added using the SfDataGrid.GridUnboundColumn class.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid" 
                       ItemsSource="{Binding Orders}">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridUnboundColumn MappingName="DiscountPrice"
                                      HeaderText="Discount Price"
                                      Expression="UnitPrice*Discount"
                                      Format="C">
        </syncfusion:GridUnboundColumn>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

C#

SfDataGrid dataGrid = new SfDataGrid();
ViewModel viewModel = new ViewModel();
dataGrid.ItemsSource = viewModel.Orders;

GridUnboundColumn DiscountColumn = new GridUnboundColumn()
{
    MappingName = "DiscountPrice",
    HeaderText = "Discount Price",
    Expression = "UnitPrice*Discount",
    Format = "C"
};
this.dataGrid.Columns.Add(DiscountColumn);

NOTE

It is mandatory to specify the GridColumn.MappingName for SfDataGrid.GridUnboundColumn with some name to identify the column. It is not necessary to define name of the field in the data object.

Populating data for the unbound column

Data for the unbound column can be populated by setting the Expression or Format property.

Using expression

The arithmetic or logic expression can be specified by using the Expression property to compute the display value. By default, GridUnboundColumn evaluates the expression with casing. The casing will be disabled while evaluating the expression by setting the CaseSensitive property to false.

List of supported arithmetic and logical operations are as follows:

Arithmetic operations	Operator
Add	+
Subtract	-
Multiply	*
Divide	/
Power	^
Mod	%
Greater Than	>
Less Than	<
Equal	=
GreaterThanOrEqual	>=
LessThanOrEqual	<=

Logical Operations

Logical operations	Operators
AND	(char)135
OR	(char)136
NOT	(char)137

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"                                                                       
                       ItemsSource="{Binding Orders}">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridUnboundColumn MappingName="UnboundColumn"
                                      HeaderText="Unbound Column"
                                      Expression="UnitPrice*Discount" />
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

C#

SfDataGrid dataGrid = new SfDataGrid();
ViewModel viewModel = new ViewModel();
dataGrid.ItemsSource = viewModel.Orders;

GridUnboundColumn DiscountColumn = new GridUnboundColumn()
{
    MappingName = "DiscountPrice",
    HeaderText = "Discount Price",
    Expression = "UnitPrice*Discount"
};
this.dataGrid.Columns.Add(DiscountColumn);

Using format

Value of other columns can be formatted, and the formatted value displayed in the unbound column using the Format property.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding Orders}">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridUnboundColumn MappingName="DiscountPrice"
                                      HeaderText="Discount Price"
                                      Format="'{Discount}% for {OrderID}'" />
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

C#

SfDataGrid dataGrid = new SfDataGrid();
ViewModel viewModel = new ViewModel();
dataGrid.ItemsSource = viewModel.Orders;

GridUnboundColumn DiscountColumn = new GridUnboundColumn()
{
    MappingName = "DiscountPrice",
    HeaderText = "Discount Price",
    Format = "'{Discount}% for {OrderID}'"
};
this.dataGrid.Columns.Add(DiscountColumn);

Using QueryUnboundColumnValue event

The QueryUnboundColumnValue event is fired when value for the unbound column is queried. It provides the information about the cell that triggered this event. So, you can set the desired value for the grid cells of the unbound column. This event is triggered with the GridUnboundColumnEventsArgs.

The GridUnboundColumnEventsArgs provides the following properties:

• Column: Gets GridColumn of the cell that triggers this event.
• OriginalSender: Gets the data grid raising this event.
• Record: Gets the underlying row data.
• UnboundAction: Defines the action for triggering this event.
• Value: Gets or sets the value for GridUnboundColumn cell based on UnboundAction.

NOTE

UnboundActions.CommitData and UnboundActions.PasteData are currently not supported, and likely to be supported in future.

Populate the data for the unbound column by handling QueryUnboundColumnValue event which allows customizing the value of the GridUnboundColumn. GridUnboundColumnEventsArgs exposes Value property, by which you can set the value for the grid cells of the unbound column based on the UnboundAction.

Refer to the following code example in which data for the unbound column is populated by handling the QueryUnboundColumnValue event:

C#

dataGrid.QueryUnboundColumnValue += DataGrid_QueryUnboundColumnValue;

private void DataGrid_QueryUnboundColumnValue(object sender, GridUnboundColumnEventsArgs e)
{
    if (e.UnboundAction == UnboundActions.QueryData)
    {
        var quantity = Convert.ToInt16(e.Record.GetType().GetProperty("Quantity").GetValue(e.Record));
        var unitPrice = Convert.ToInt16(e.Record.GetType().GetProperty("UnitPrice").GetValue(e.Record));
        var amount = quantity * unitPrice;
        e.Value = amount;
    }
}

NOTE

You can refer to our Xamarin DataGrid feature tour page for its groundbreaking feature representations. You can also explore our Xamarin.Forms DataGrid example to knows various chart types and how to easily configured with built-in support for creating stunning visual effects.