Video: Introduction to Expression Editor

ComponentOne Studio Enterprise Expression Editor for WinForms, WPF, and UWP can be integrated with a grid or TreeView to shape data, allowing users to create expressions for calculated columns at runtime. It can also be used to filter data and discover meaningful information.

In this example, we have a FlexGrid bound to Products table, and we want to add unbound columns so that users can add calculated data at runtime.

Let’s look at how to add an unbound column at design time:

Go to FlexGrid Tasks.

1. Open the designer.

2. In the designer, add a column using the Insert column button.

3. Set the name and caption of this column to “StockValue”.

4. Set the AllowExpressionEditing property to true. This enables the ExpressionEditor for the column.

5. Set “allow editing” to false.

This can be done in code, as well:

1. First, add a column to FlexGrid’s column collection.

2. Set the Name, Caption and

3. AllowExpressionEditing property.

Save the application and run it.

When the form displays, we see that the two unbound columns we created in designer and code are added to the FlexGrid with a formula icon depicting that expression editing is available for this column.

Left click on the formula icon of the StockValue column. This opens the expression editor.

ExpressionEditor is comprised of an editor at the top and an editor-panel at the bottom. Operator buttons are available at top of the editor-panel.

The EditorPanel lists all the available Function, including Aggregate… Text… DateTime… Logical… Math… and Convert

The panel also lists the Constants and Available data source fields.

Expressions can be entered by double-clicking the functions, fields and operators. You can also type directly into the editor, and you’ll here you’ll see the smart auto-completion.

1. For the StockValue column, let’s enter the expression as the product of UnitPrice & UnitsInStock and click OK.
2. This populates the column with values based on the calculation for each record.

Similarly, we can add expression for the “Status” column. We’ll set BUY or OK status for each product based on current available stock.

1. Click on the formula icon of the status column.

2. Add an Iif condition. The Iif condition takes three parameters: Condition; result when condition is True; and Result when condition is false.

3. Here, set the condition as “UnitsInStock less than ReorderLevel.” “If condition is true, then set BUY else OK”.

4. Click Ok button.

The status column is updated with values based on each record. We can filter and see only the products we need to buy.

ExpressionEditor can also be used to filter data to discover meaningful information. For example, it can be integrated with a Chart control by binding to the same data source. Here, FlexChart displays product price information from a data view. With the help of ExpressionEditor, a user can filter the data based on the category and price level.

Since the Chart and ExpressionEditor share the same data view, the result is instantly displayed in the chart. Removing the expression resets the filter.

ExpressionEditor can be powerful tool for the end user. For more information and examples, please refer to the documentation and samples.

Try ComponentOne Studio Enterprise today