Card View Tutorial.

Step 1: View Creation

Prev: Overview Next: Card View Rows

Topics in this tutorial describe how to create a fully functional data-aware application using
ExpressQuantumGrid4. 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 "CX Grid" tab of the component palette
and select the cxGrid control:

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

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). For detailed information
on the Structure Navigator, see the Structure Navigator topic.
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 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 we should create a grid data source.

Activate the ADO tab of the component palette and place an ADODataset
component onto a form:

Specify the connection string for that component as a path to one of the
ExpressQuantumGrid4 demo databases, for instance, CarsDB.mdb.
Specify the command text to select all fields from the Cars table: "select * from Cars":
Activate the DataSet then by setting the Active property to True.
Switch to the Data Access tab of the component palette and place a DataSource
component onto a form.
Specify the created TADODataSet instance as the DataSet property value for the
DataSource object:

Note: Delphi 4 and 5 users are provided with BDE demo tables and therefore need to use BDE
connection techniques instead of ADO.

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 window. 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:
Currently, the grid will not display any data, because there are no card view rows created yet for the
cvCars view. For more details on the creation and binding of a grid to data, see the Connecting To
Data topic.

See the next topic for information on card view rows creation.