TStyledDbNavigator - Technical Reference

Overview

TStyledDbNavigator is a styled database navigator component that replaces the standard TDBNavigator with modern styled buttons and enhanced visual features.

Class Hierarchy

TWinControl
  └─ TCustomPanel
      └─ TStyledDbNavigator

Unit

Vcl.StyledDbNavigator

Description

TStyledDbNavigator provides all functionality of TDBNavigator while offering modern styling, better icons (especially for vertical orientation), optional button captions, and full customization of button appearance.

Each navigation button is a TStyledNavButton with complete styling control.

Key Features

• All TDBNavigator functionality: First, Prior, Next, Last, Insert, Delete, Edit, Post, Cancel, Refresh
• Styled buttons: Full StyleFamily/Class/Appearance support
• Optional captions: Show/hide button captions
• Better vertical icons: Improved up/down arrow icons for vertical layout
• Custom ImageList support: Use your own icons
• Per-button styling: Each button can have its own style
• Orientation: Horizontal or vertical layout
• Hints and captions: Customizable for each button

Main Properties

Database Properties

Property	Type	Description
DataSource	TDataSource	Data source to navigate
VisibleButtons	TButtonSet	Which buttons to show ([nbFirst, nbPrior, nbNext, nbLast, nbInsert, nbDelete, nbEdit, nbPost, nbCancel, nbRefresh])
ConfirmDelete	Boolean	Show confirmation before deleting (default: True)

Layout Properties

Property	Type	Description
Orientation	TNavigatorOrientation	Horizontal or vertical button layout (nboHorizontal, nboVertical)
ShowCaptions	Boolean	Show button captions (default: False)
ShowHints	Boolean	Show button hints
Kind	TDBNavigatorKind	Navigator kind (dbnHorizontal, dbnVertical) - sets Orientation

Styling Properties

Property	Type	Description
StyleFamily	TStyledButtonFamily	Style family for all buttons
StyleClass	TStyledButtonClass	Style class for all buttons
StyleAppearance	TStyledButtonAppearance	Appearance for all buttons
StyleDrawType	TStyledButtonDrawType	Button shape
StyleRadius	Integer	Corner radius
Flat	Boolean	Flat button appearance

Images

Property	Type	Description
Images	TCustomImageList	Custom ImageList for button icons
ImageWidth	Integer	Width of images
ImageHeight	Integer	Height of images

Button Properties

Property	Type	Description
Buttons[Index]	TStyledNavButton	Access to individual navigation buttons (read-only)
ButtonWidth	Integer	Width of buttons (0 = auto)
ButtonHeight	Integer	Height of buttons (0 = auto)

Navigation Buttons

The navigator contains these standard buttons:

Button	Purpose	Default Caption
nbFirst	Go to first record	First
nbPrior	Go to previous record	Prior
nbNext	Go to next record	Next
nbLast	Go to last record	Last
nbInsert	Insert new record	Insert
nbDelete	Delete current record	Delete
nbEdit	Edit current record	Edit
nbPost	Post changes	Post
nbCancel	Cancel changes	Cancel
nbRefresh	Refresh dataset	Refresh

Events

Event	Description
OnClick	Button clicked - parameter indicates which button
BeforeAction	Before navigation action - can be canceled
OnEnableNavBtn	Enable/disable specific buttons dynamically

Usage Examples

Basic DbNavigator

var
  Nav: TStyledDbNavigator;
begin
  Nav := TStyledDbNavigator.CreateStyled(Self,
    BOOTSTRAP_FAMILY,
    btn_primary,
    BOOTSTRAP_NORMAL);
  Nav.Parent := Self;
  Nav.DataSource := DataSource1;
  Nav.Align := alBottom;
end;

DbNavigator with Captions

Nav := TStyledDbNavigator.CreateStyled(Self,
  BOOTSTRAP_FAMILY,
  btn_secondary,
  BOOTSTRAP_NORMAL);
Nav.Parent := Self;
Nav.DataSource := DataSource1;
Nav.ShowCaptions := True;
Nav.ButtonWidth := 80;
Nav.StyleDrawType := btRounded;

Vertical DbNavigator

Nav := TStyledDbNavigator.CreateStyled(Self,
  ANGULAR_LIGHT_FAMILY,
  acl_primary,
  ANGULAR_RAISED);
Nav.Parent := Self;
Nav.DataSource := DataSource1;
Nav.Align := alLeft;
Nav.Orientation := nboVertical;  // or Kind := dbnVertical
Nav.Width := 40;

Navigator with Custom Buttons

Nav := TStyledDbNavigator.CreateStyled(Self,
  BOOTSTRAP_FAMILY,
  btn_secondary,
  BOOTSTRAP_NORMAL);
Nav.DataSource := DataSource1;
Nav.VisibleButtons := [nbFirst, nbPrior, nbNext, nbLast, nbRefresh];  // Hide edit buttons
Nav.ShowCaptions := True;

Navigator with Custom ImageList

Nav := TStyledDbNavigator.CreateStyled(Self,
  BOOTSTRAP_FAMILY,
  btn_secondary,
  BOOTSTRAP_NORMAL);
Nav.DataSource := DataSource1;
Nav.Images := MyNavigatorImageList;
// Assign custom images to buttons
// Image indices: 0=First, 1=Prior, 2=Next, 3=Last, 4=Insert,
//               5=Delete, 6=Edit, 7=Post, 8=Cancel, 9=Refresh

Customizing Individual Buttons

Nav := TStyledDbNavigator.CreateStyled(Self,
  BOOTSTRAP_FAMILY,
  btn_secondary,
  BOOTSTRAP_NORMAL);
Nav.DataSource := DataSource1;

// Customize Delete button to be red
Nav.Buttons[nbDelete].StyleClass := btn_danger;
Nav.Buttons[nbDelete].Hint := 'Delete this record';

// Customize Post button to be green
Nav.Buttons[nbPost].StyleClass := btn_success;
Nav.Buttons[nbPost].Caption := 'Save';

Handling OnClick Event

procedure TForm1.Navigator1Click(Sender: TObject; Button: TNavigateBtn);
begin
  case Button of
    nbInsert: ShowMessage('Inserting new record');
    nbDelete: ShowMessage('Deleting record');
    nbPost: ShowMessage('Saving changes');
  end;
end;

Disabling Confirm Delete

Nav := TStyledDbNavigator.Create(Self);
Nav.DataSource := DataSource1;
Nav.ConfirmDelete := False;  // Delete without confirmation

Main Methods

RegisterDefaultRenderingStyle (Class Method)

Sets the default rendering style for all TStyledDbNavigator instances.

class procedure RegisterDefaultRenderingStyle(
  const ADrawType: TStyledButtonDrawType;
  const AFamily: TStyledButtonFamily = DEFAULT_CLASSIC_FAMILY;
  const AClass: TStyledButtonClass = DEFAULT_WINDOWS_CLASS;
  const AAppearance: TStyledButtonAppearance = DEFAULT_APPEARANCE;
  const AStyleRadius: Integer = DEFAULT_RADIUS); virtual;

BtnClick

Programmatically clicks a navigation button.

procedure BtnClick(Index: TNavigateBtn); virtual;

Important Notes

• DataSource Required: Must be connected to a TDataSource
• Button Auto-Enable: Buttons automatically enable/disable based on dataset state
• Vertical Icons: Improved icons for vertical orientation (up/down arrows)
• Custom Captions: All button captions and hints can be customized
• DPI Aware: Automatically scales with DPI changes

See Also

• TStyledBindNavigator - LiveBindings navigator
• TStyledToolbar - Styled toolbar