1. Help
  2. Application examples
  3. Tutorial: UI
  4. Configure and filter a Data grid object with model based on objects

Configure and filter a Data grid object with model based on objects

Introduction

This tutorial shows how to configure a Data grid object with model based on project objects to display the data of some motors of the same type. It also shows how to use an SQL query to filter the data, whether numeric, literal, or date and time type.

Download the example project from here.

SQL query

In the Data grid, List and Drop-down selection objects, the data of interest of the reference model can be filtered using standard SQL queries.

With a model based on database, the query has no limitations. With a model based on nodes, however, the SELECT * FROM Model part is mandatory to select all the model nodes, followed by the WHERE clause with which to indicate the search conditions. The references that can be used in the conditions are the properties and/or attributes of the model nodes (e.g.: SELECT * FROM Model WHERE Speed > 40).

Steps

  1. Create the Motor object type and the instances

  2. Configure a Data grid object to display numeric data

  3. Configure a Data grid object to display data of date and time type

  4. Configure a text box to set a filter on numeric data at runtime

  5. Filter the data to display

Create the Motor object type and the instances

  1. Create a new standard project.

  2. In the Model folder, create an object and rename it Motor.

  3. In Motor, create the following variables:

    • Speed, of Int32 type

    • Acceleration, of Int32 type

    • ManufactureDate, of DateTime type

  4. To make Motor an object type, drag it into the Types panel, specifically into the Model folder: a Motor(type) object appears in the Model folder, i.e. the new type, and Motor becomes an instance of it.

  5. In the Model folder, create a MotorObjects folder, then move the Motor instance into it and create nine other objects of the same type.

  6. Assigns a value to all the properties of each instance and renames the Motor instance to FaultyMotor.

Configure a Data grid object to display numeric data

  1. In MainWindow, create a Data grid object (New > Data controls > Data grid), then rename it MotorGrid.

  2. To set the different instances of Motor as grid elements, in MotorGrid in the Model property set a dynamic link with the MotorObjects folder.

  3. Set the data to display in MotorGrid:

    1. To create a column, click + next to the Columns property.

    2. Expand the column, and in DataItemTemplate in the Text property, set a dynamic link with Alias > {Item} > Motor and select the BrowseName attribute, then click Select. This column shows the names of the motors, so in the Title property write Motor Name.

    3. Repeat the previous three steps to set the columns that display velocity and acceleration. In the Text property, set a dynamic link with Alias > {Item} > Motor > Speed and Alias > {Item} > Motor > Acceleration respectively. In the Title property, write Speed and Acceleration respectively.

  4. To set the sort order of the grid based on the motor names, in the Column sort order property set a dynamic link with the first column (selectable in UI > MainWindow > MotorGrid > Columns).

Configure a Data grid object to display data of date and time type

In MainWindow, create a Data grid object (New > Data controls > Data grid), then rename it MotorGrid2.

To set the different instances of Motor as grid elements, in the Model property in MotorGrid2 set a dynamic link with the MotorObjects folder.

To set the data to display, in MotorGrid do as follows:

  1. To create a column, click + next to the Columns property.

  2. Expand the column, and in DataItemTemplate, in the Text property set a dynamic link with Alias > {Item} > Motor and select the BrowseName attribute, then click Select. This column shows the names of the motors, so in the Title property write Motor Name.

  3. Repeat the previous two steps to set the column that displays the date of manufacture. In the Text property, set a dynamic link with Alias > {Item} > Motor > ManufactureDate. In the Title property, write Manufacture Date.

To set the sorting of the grid based on the motor names, in the Sorting columnproperty set a dynamic link with the first column (selectable in UI > MainWindow > MotorGrid > Columns).

In MainWindow, create two Date and time objects and rename them From and To, then set their Value property with values of your choice.

Note

these data are used to set the dates in the search query

In the Query property, set an advanced dynamic link using a String formatter and set the following string as format:

SELECT * FROM Model WHERE ManufactureDate BETWEEN {0:sql_literal} and {1:sql_literal}

Links the placeholders {0} and {1} respectively to the Value property of the From and To objects.

Configure a text box to set a filter on numeric data at runtime

Create a Text box object and rename it FilterTextBox. In its Text property, set a dynamic link with the Query property of MotorGrid.

Filter the data to display

  1. Execute the project.

  2. Filter the data:

    • To filter the numerical data to display, in MotorGrid, in the FilterTextBox text box write the search query and press ENTER (see Query examples for numeric and literal data).

    • To filter the MotorGrid2 data based on date and time, change the values of From and To and press ENTER.

Query examples for numeric and literal data

Display only the row of the Motor5 object:

SELECT * FROM Model WHERE BrowseName = 'Motor5'

Display only the rows of objects with Acceleration = 20:

SELECT * FROM Model WHERE Acceleration = 20

Display only the rows of objects with Acceleration > 20 and Speed between 30 and 500:

SELECT * FROM Model WHERE Acceleration > 20 AND Speed BETWEEN 30 AND 500

Display the objects with BrowseName starting with “Faulty”:

SELECT * FROM Model WHERE BrowseName LIKE 'Faulty%'

See also

References

Data grid