devexpress-components

DevExpress Components — Skill

Use this skill when developing rich interfaces with DevExpress VCL components for Delphi.

Naming note: do not call these components "Dext" or "DEXT" — that name is reserved for the unrelated Dext Framework (dext-framework skill, a .NET-style backend/DI/ORM framework). See .kiro/steering/frameworks.md for the disambiguation.

When to Use

• When creating advanced grids with TcxGrid
• When using TcxDBTreeList for hierarchical structures
• When implementing layout managers (TdxLayoutControl)
• When customizing skins and themes

Main Components

Component	Usage	Prefix
TcxGrid	Advanced grid with grouping, filters, summaries	grd
TcxGridDBTableView	Data-aware tabular view	tvw
TcxGridDBBandedTableView	View with grouped bands/columns	btvw
TcxGridDBCardView	Card view	cvw
TcxDBTreeList	TreeList data-aware	trl
TdxLayoutControl	Responsive layout manager	lyt
TdxLayoutGroup	Grupo dentro de layout	lgrp
TdxLayoutItem	Item within layout	litm
TcxDBTextEdit	Edit text data-aware	edt
TcxDBComboBox	ComboBox data-aware	cmb
TcxDBDateEdit	Date picker data-aware	dte
TcxDBCurrencyEdit	Data-aware currency editor	cur
TcxDBCheckBox	Checkbox data-aware	chk
TcxDBLookupComboBox	Lookup combo data-aware	lcb
TcxDBMemo	Memo data-aware	mmo
TdxBarManager	Toolbar/ribbon	bar
TdxRibbon	Ribbon UI	rbn
TdxNavBar	Navigation Bar	nav
TdxSkinController	Skin controller	skn
TcxPageControl	Advanced PageControl	pgc
TcxGroupBox	Styled GroupBox	grp

TcxGrid Configuration

//Programmatic column creation
procedure TfrmCustomerList.ConfigureGrid;
var
  LView: TcxGridDBTableView;
begin
  LView := grdCustomers.Views[0] as TcxGridDBTableView;
  LView.DataController.DataSource := dsCustomers;

  //Configure behavior
  LView.OptionsData.Editing := False;        //Read only
  LView.OptionsData.Deleting := False;
  LView.OptionsData.Inserting := False;
  LView.OptionsView.GroupByBox := True;       //Visual grouping
  LView.OptionsView.Footer := True;          //Footer with summaries
  LView.OptionsView.Indicator := True;       //Line indicator
  LView.OptionsCustomize.ColumnFiltering := True;
  LView.OptionsCustomize.ColumnSorting := True;
  LView.OptionsSelection.MultiSelect := True;

  //Configure columns individually
  ConfigureColumn(LView.GetColumnByFieldName('name'), 'Nome', 200);
  ConfigureColumn(LView.GetColumnByFieldName('cpf'), 'CPF', 120);
  ConfigureColumn(LView.GetColumnByFieldName('email'), 'E-mail', 250);
end;

procedure TfrmCustomerList.ConfigureColumn(
  AColumn: TcxGridDBColumn; const ACaption: string; AWidth: Integer);
begin
  if not Assigned(AColumn) then Exit;
  AColumn.Caption := ACaption;
  AColumn.Width := AWidth;
  AColumn.HeaderAlignmentHorz := taCenter;
end;