Unbound Columns

• Nov 14, 2018
• 3 minutes to read

The Bootstrap Card View supports bound and unbound columns. Bound columns obtain their data from a control’s data source. Unbound columns are not bound to any field in a data source. These columns can be populated manually by handling the ASPxCardView.CustomUnboundColumnData event or by specifying an expression using the CardViewColumn.UnboundExpression used to evaluate values for this field. The Expressions section describes the syntax for creating expressions.

There is no difference between working with bound and unbound columns. You can sort, filter, and display summaries for unbound columns in the same manner as bound columns.

An unbound column meets the following requirements.

• Its CardViewColumn.FieldName property must be set to a unique value and not refer to any field in the Card View’s data source.
• The column’s CardViewColumn.UnboundType property must be set to an appropriate value based on the type of data the column is supposed to display (Boolean, DataTime, Decimal, Integer, String, Object). It shouldn’t be set to UnboundColumnType.Bound.

Providing Data for Unbound Columns

Data for unbound columns is generally obtained from a custom data source or is calculated based upon the values of bound columns.

To allow data editing for an unbound column, its data should be retrieved from a custom data source. When an end-user modifies column data within the Card View, it should then be saved back to the data source.

To provide data for unbound columns and save the changes made by end-users, handle the ASPxCardView.CustomUnboundColumnData event. This event is raised only for unbound columns.

• Get Data

  If the ASPxGridColumnDataEventArgs.IsGetData parameter is set to true, the event handler should supply data for an unbound column. A value should be assigned to the ASPxGridColumnDataEventArgs.Value parameter according to the card currently being processed. The current data card can be identified using the ASPxGridColumnDataEventArgs.ListSourceRowIndex parameter, which specifies the card’s index in the Card View’s data source. It is not affected by any sorting or filtering settings.

• Set Data

  The event’s ASPxGridColumnDataEventArgs.IsSetData parameter isn’t in effect. To post data to a datasouce, handle the ASPxCardView.CardUpdating event.

Example

Assume that the Card View is bound to an “Orders” data table (NWind database), which contains the “UnitPrice”, “Quantity” and “Discount” fields. There is no field that represents the total sum, as this can be calculated manually as follows: UnitPrice*Quantity*(1-Discount). This example shows how to add an unbound column to the Card View control to represent the total sum of an order.

C#

using DevExpress.Web.Bootstrap;
// ...        

protected void Page_Load(object sender, EventArgs e) {
    if (!IsCallback) {
        // Creates a column, customizes its settings and appends it to the Columns collection;
        BootstrapCardViewTextColumn colTotal = new BootstrapCardViewTextColumn();
        colTotal.Caption = "Total";
        colTotal.FieldName = "Total";
        colTotal.UnboundType = DevExpress.Data.UnboundColumnType.Integer;
        colTotal.VisibleIndex = BootstrapCardView1.VisibleColumns.Count;
        colTotal.PropertiesTextEdit.DisplayFormatString = "c2";
        BootstrapCardView1.Columns.Add(colTotal);
    }

}

protected void BootstrapCardView1_CustomUnboundColumnData(object sender, DevExpress.Web.Bootstrap.BootstrapCardViewColumnDataEventArgs e) {
    if (e.Column.FieldName == "Total") {
        decimal unitPrice = Convert.ToDecimal(e.GetListSourceFieldValue("UnitPrice"));
        int quantity = Convert.ToInt32(e.GetListSourceFieldValue("Quantity"));
        decimal discount = Convert.ToDecimal(e.GetListSourceFieldValue("Discount"));
        e.Value = unitPrice * quantity * (1 - discount);
    }
}

The image below shows the result.