Card View Tutorial. Step 2: Card View Rows
- 3 minutes to read
In the previous topic, we created a grid control containing a Card View. This View was bound to the Cars table from the DemosDB database. Note that the grid control does not display any data yet:
The next step is the creation of Card View rows. There are three ways of creating Card View rows for bound Views. The first is to use the Structure Navigator. Right-click on the cvCars label and choose the Create All Rows option from the dropdown menu:
The second method of creating rows is to use the Component Editor. This is activated by clicking on the Customize… button of the Structure Navigator. The Component Editor contains a Card rows tab on the right. Press the Retrieve Fields button at the bottom of the page to add Card View rows for all data source fields:
The third, and easiest method, connects the grid to the data source and creates the grid’s rows from scratch. This is the method you may want to use whenever the ExpressQuantumGrid is placed onto a form, a View is designated to display the data and all the necessary data sources are created and set up. At this point, all you have to do to connect the grid to a data source is right-click on the grid and choose the Link to <DataSource name> option from the dropdown menu as shown in the image below:
This will automatically connect the grid to the selected data source and retrieve all the fields which will be displayed as View items (columns for a (Banded) Table View and rows for a Card View).
Once Card View rows are added to the View, their names appear within the list on the Card rows Designer page. Select the cvCarsID, cvCarsLiter, cvCarsCyl, cvCarsTransmissionSpeedCount, cvCarsMPG_City, cvCarsMPG_Highway, cvCarsCategory and cvCarsHyperlink rows and press the Delete button or the Del key. This removes the selected rows from the View:
The following screenshots demonstrate how the grid control looks before:
and after removing rows:
Note, that after reducing the number of fields displayed, two records (cards) occupy the vertical space.
Properties of each Card View row can be modified using the Component Editor and the Object Inspector. Select the cvCarsTransmissAutomatic row and change its caption to “Automatic Transmission”.
Select the cvCarsTrademark and the cvCarsModel rows and set their Kind property to rkCaption in the Object Inspector. The following image demonstrates the result:
Similarly, you can change any of the Card View row properties, even the data binding settings of a row. See the TcxGridCardViewRow class description for details on the Card View row settings.
See the next topic for a snapshot of the View options setup.