Skip to main content

Create and Delete Columns

  • 4 minutes to read

This topic covers column creation and deletion within a grid View. But the term “column” should be substituted by item, because the concept covers columns in a Table View and rows in a Card View.

Every View provides an Items property and this maintains a collection of items created within the View. The Rows property in a Card View and the Columns property in a (Banded) Table View implement the same functionality and they both refer to elements of the Items collection. The difference between them is in the class of the object returned. The Items property addresses objects of the TcxCustomGridTableItem class (the base class for all items), while the Columns and Rows properties refer to items of the specific classes (TcxGridColumn, TcxGridDBColumn, TcxGridBandedColumn and TcxGridDBBandedColumn, TcxGridCardViewRow and TcxGridDBCardViewRow).

You can refer to the Views and Items topics to learn more about View and item types.

In this topic, the StylesSimpleDemo program is used to illustrate column creation and deletion. It displays data from the PERSONS table which contains information on the people in our video catalog.

There are two methods you can employ to add items within a View.

Adding Columns Manually

This first method is applicable to data-aware and non data-aware Views. The CreateItem (CreateColumn in a Table View or CreateRow in a Card View) method creates a new item (column or row) and adds it to the Items collection. In a data-aware View, CreateItem does not bind the column to a specific datasource field. You need to perform this manually by using the item’s DataBinding property.

The following code creates a column within a View and links it to the FIRSTNAME field from the PERSONS table (linked via the View’s DataController.DataSource property).

var
  ADBColumn: TcxGridDBColumn;
//...
  ADBColumn := tvPersons.CreateColumn;
  ADBColumn.DataBinding.FieldName := 'FIRSTNAME';
  ADBColumn.Name := 'tvPersonsFIRSTNAME';

Adding Columns Within Data-Aware Views

For data-aware Views designed to work in bound mode, you can use the CreateAllItems method declared in the View’s DataController property. This method creates items for all the fields in the data source and automatically links them to the corresponding fields via the DataBinding property.

At design time, you can create all items within a data-aware View via the Structure Navigator or Component Editor. Refer to the corresponding topics to learn about this capability.

In the Structure Navigator, right-click the label of the data-aware View (already linked to an active dataset) and select the Create All Columns option:

or press the Retrieve Fields button in the Component Editor:

If there are existing columns, you will be prompted to save or remove them before creating the new ones.

As a result, columns will appear within the Component Editor and the View. If a table contains any records, the View is also populated with data.

In addition, you can open the IDE’s Fields Editor available for a dataset, table, query, or any other TDataSet descendant, and drag its fields directly to a data-aware Table View, Banded Table View, Card View, or Layout View to automatically create View items bound to these fields. The grid will automatically bind to a data source linked to the dataset (if there is no linked data source, it will be created and linked on the fly) before creating bound View items.

To add all columns via code, write the following:

tvPersons.DataController.CreateAllItems;

Deleting Columns

To delete a column at runtime, you just need to invoke the column’s destructor. The following code is used to dispose of the tvPersonsID column from the current demo program:

tvPersonsID.Free;

The View’s ClearItems method allows you to destroy all items within a View.

tvPersons.ClearItems;

At design time, use the Structure Navigator or the Component Editor to delete columns. To delete all columns within a View, select the Delete All Columns option from the View’s context menu in the Structure Navigator.

The Component Editor allows you to delete individual columns. Switch to the Columns panel, select the columns to delete and press the Delete button.

See Also