Card View Tutorial. Step 1: View Creation
- 4 minutes to read
Topics in this tutorial describe how to create a fully functional data-aware application using ExpressQuantumGrid. This control is used together with Card View data representation to display and access data.
This topic explains how to create an ExpressQuantumGrid control with Card View data representation and bind it to data.
First, create an empty application project. Then go to the DevExpress tab of the component palette and select TcxGrid:
Double-click it to add an ExpressQuantumGrid to the form. After the control appears, adjust its size as required. The following screenshot demonstrates a TcxGrid component placed on the form:
The Structure Navigator situated at the bottom right part of the grid control is used for displaying and managing the grid structure. Currently, the grid control shown above contains only one grid level (cxGrid1Level) with an associated DB Table View (cxGrid1DBTableView1). To display the properties of the level or the Table 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 Card View. Right-click the Table View box within the Structure Navigator and select the Delete View item within 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 Card View from the list. Now the grid contains an empty data-aware Card 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, cvCars, and lvCars, respectively.
Now to create a grid data source, you should:
- Create a database which will be connected to the CARS table. Place a TDatabase component
on a form. Set its properties as follows:
DatabaseName to DemosDB
DriverName to STANDARD
In order to specify connection parameters for the database, double-click on the component. In the opened Database Editor dialog click the Defaults button to obtain a list of all 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.
- Activate the BDE tab of the component palette and place a query component
on the form. Set its properties as follows:
DatabaseName to DemosDB
Name to qryCars
- SQL to “SELECT * from Cars”. This specifies the query which will select all the fields in the CARS table. To set the query, click the ellipsis button in the SQL property:
This activates the editor to enter the query text so you can type the required string.
- Active to True. Note that this property must be set after all the other properties have been set.
- 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 appropriate View. Select the cvCars View within the Structure Navigator. The Object Inspector will display the View properties.
Expand the DataController property. It allows editing of the data-aware properties of a View. Use the combo box near the DataSource property to choose the TDataSource instance as a View data source:
The Data Grid control displays no data at this stage because the Card View has no rows. Refer to the next tutorial step for information on how to create Card View rows.