How to Populate the Virtual Breadcrumb Control

• Jan 20, 2021
• 2 minutes to read

This tutorial shows how to rename the root node of a virtual breadcrumb control and add two child nodes to it programmatically.

Follow the steps below:

• Create a new VCL forms application.

• Place a TdxBreadcrumbEdit control on a form.

• Handle the form’s OnCreate event as shown below.

procedure <Form>.FormCreate(Sender: TObject);
begin
  <dxBreadcrumbEdit>.Root.Name := 'Mail Client';
  <dxBreadcrumbEdit>.Root.HasChildren := True;
end;

This code renames the root node (which is called ‘Root’ by default) and sets the HasChildren property of the root node to True to enable child population for it with the editor’s OnPopulateChildren event. This event fires whenever a node loads its children prior to displaying them in a dropdown window (for instance, when an end-user clicks the node’s dropdown button).

• Handle the OnPopulateChildren event to add child nodes to the node whose dropdown is clicked, as shown below.

procedure <Form>.<dxBreadcrumbEdit>PopulateChildren(Sender: TObject; ANode: TdxBreadcrumbEditNode);
begin
  ANode.AddChild('E-Mail Box 1');
  ANode.AddChild('E-Mail Box 2');
end;

Because the breadcrumb editor contains only one node (the root node) and the event handler is called for this node only, there is no need to ascertain that this node is passed as the ANode event parameter.

• Run the application and click the dropdown button of the ‘Mail Client’ root node to call its dropdown menu populated with two children.