Chart View Tutorial. Step 1: View Creation

• Jul 28, 2023
• 4 minutes to read

This topic explains how to create an ExpressQuantumGrid control which uses a Chart View and demonstrates how to bind it to a data source.

First, create an empty application project. Then go to the DevExpress tab of the component palette and select TcxGrid:

Double-click it to add the ExpressQuantumGrid to a form. After the control appears, adjust its size as required. The following screenshot demonstrates a form with a TcxGrid component on it:

The Structure Navigator located at the bottom right part of the grid control is used to display and manage the grid’s structure. At the moment, the grid control shown above contains only one grid level (cxGrid1Level1) with an associated DB Table View (cxGrid1DBTableView1). To display the properties of a level or a View in the Object Inspector, click on the corresponding label in the Structure Navigator (alternatively, you can use the Object TreeView).

Since the existing View is a Table View, we need to replace it with a Chart View. Right-click the Table View box within the Structure Navigator and select the Delete View item from the dropdown menu:

After the Table View has been removed, right-click the level box within the Structure Navigator and expand the Create View item within the dropdown menu. Select “DB Chart” from the list to create a data-aware Chart View (“Chart” corresponds to an unbound version of the View).

Now the grid contains an empty Chart View:

Sequentially select the grid control, the created View and the existing level to use the Object Inspector to set their Name properties to Grid, chvCars and lvCars, respectively. Here’s how the form looks at this point:

Now to create a grid data source, you should:

1. Create a database which will be connected to the CARS table. Place a TDatabase component onto a form. Set its properties as follows:

• DatabaseName to DemosDB

• DriverName to STANDARD

In order to specify the connection parameters for the database, double-click on the component. In the Database Editor dialog which opens click the Defaults button to obtain a list of all the parameters, as well as their default values. Set the PATH parameter to a string which defines a path to the directory where the CARS table is located. Click OK to close the Database Editor dialog.

To connect the database to the table, set its Connected property to True.

2. Activate the BDE tab of the component palette and place a query component onto the form. Set its properties as follows:

• DatabaseName to DemosDB

• Name to qryCars

• SQL to “ SELECT Category, Cyl, Liter, Trademark + ‘ ‘ + Model As Model From Cars “. This specifies the query which will select the Category, Cyl, Liter fields and also the Model field which represents the concatenated string produced by the Trademark and Model fields’ values in the CARS table. To set the query, click the ellipsis button in the SQL property:

This activates the editor used to enter the query’s text so you can type in the required string.

• Active to True. Note that this property must be set after all the other properties have been set.

3. Switch to the Data Access tab of the component palette and place a TDataSource component on the form and connect it to the qryCars dataset by setting its DataSet property to qryCars. Rename the component to dsCars.

After the data source has been created and set up, it must be connected to the GridView. Select the chvCars View from within the Structure Navigator. The Object Inspector will display the View’s properties.

Expand the DataController property. It allows the data-aware properties of a View to be edited. Use the combo box near the DataSource property to specify the TDataSource instance as the View’s data source:

There’s also another and easier way to connect the grid to a data source. You may want to use this approach whenever the ExpressQuantumGrid is placed on a form, a View is designated to display the data and all the necessary data sources have already been created and set up. At this point, all you have to do to connect the grid to a data source is to right-click on the grid and choose the Link to <DataSource name> option from the dropdown menu as shown in the image below:

The Data Grid control displays no data at this stage because the Chart View does not contain categories and series. Refer to the next tutorial step for information on how to create categories and series.