Unbound Column

23 Sep 20204 minutes to read

SfDataGrid allows you to add additional columns which are not bound with data object from underlying data source. You can add unbound column using SfDataGrid.GridUnboundColumn class.

  • C#
    • SfDataGrid dataGrid = new SfDataGrid ();
UnboundViewModel viewModel = new UnboundViewModel();
dataGrid.ItemsSource = viewModel.Products;

GridUnboundColumn AmountColumn = new GridUnboundColumn();
AmountColumn.MappingName = "Amount";
AmountColumn.HeaderText = "Amount";
AmountColumn.Expression = "UnitPrice * Quantity";
AmountColumn.Format = "C";
AmountColumn.HeaderTextAlignment = UITextAlignment.Center;
AmountColumn.TextAlignment = UITextAlignment.Center;
dataGrid.Columns.Add(AmountColumn);

GridUnboundColumn TotalColumn = new GridUnboundColumn();
TotalColumn.MappingName = "Total";
TotalColumn.HeaderText = "Discounted Total";
TotalColumn.Expression = "(Quantity * UnitPrice) - ((Quantity * UnitPrice)/100 * Quantity)";
TotalColumn.Format = "C";
TotalColumn.HeaderTextAlignment = UITextAlignment.Center;
TotalColumn.TextAlignment = UITextAlignment.Center ;
dataGrid.Columns.Add(TotalColumn);

    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 field in the data object.

    Populating data for unbound column

    You can populate the data for unbound column by setting Expression or Format property.

    Using Expression

    You can specify the arithmetic or logic expression using Expression property to compute the display value. By default GridUnboundColumn evaluates the expression with casing. You can disable the casing while evaluate the expression by setting CaseSensitive property to false.
    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

    Logical operations Operators
    AND (char)135
    OR (char)136
    NOT (char)137
  • C#
    • SfDataGrid dataGrid = new SfDataGrid ();
UnboundViewModel viewModel = new UnboundViewModel();
dataGrid.ItemsSource = viewModel.Products;

GridUnboundColumn TotalColumn = new GridUnboundColumn();
TotalColumn.MappingName = "Total";
TotalColumn.HeaderText = "Discounted Total";
TotalColumn.Expression = "(Quantity * UnitPrice) - ((Quantity * UnitPrice)/100 * Quantity)";
dataGrid.Columns.Add(TotalColumn);

    Using Format

    You can format the values of other columns and display the formatted value in unbound column using Format property.

  • C#
    • SfDataGrid dataGrid = new SfDataGrid ();
UnboundViewModel viewModel = new UnboundViewModel();
dataGrid.ItemsSource = viewModel.Products;

GridUnboundColumn TotalColumn = new GridUnboundColumn();
TotalColumn.MappingName = "Total";
TotalColumn.HeaderText = "Discounted Total";
TotalColumn.Format = "C";
dataGrid.Columns.Add(TotalColumn);

    Using QueryUnboundColumnValue event

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

    GridUnboundColumnEventsArgs provides the following properties:

    • Column - Gets the GridColumn of the cell that triggers this event.
    • OriginalSender - Gets the dataGrid 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.

    You can populate data for the Unbound column by handling QueryUnboundColumnValue event, which allows you to customize 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 the below 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;
    }
}