How to: Create Breadcrumb Nodes at Runtime

  • 3 minutes to read

This example illustrates how to populate the BreadCrumbEdit control with nodes in code.

Dynamic Population

This method is based on handling control and node events.

  1. Set the BreadCrumbEdit.Path property that will reflect the path from the root node to the last visible node. This path will be the start-up path for your Breadcrumb Edit Control.

    breadCrumbEdit1.Path = "Node 1\\Node 2\\Node 3";
  2. Nodes 1, 2 and 3 were not created at runtime, so the BreadCrumbEdit cannot navigate through them, and it raises the RepositoryItemBreadCrumbEdit.ValidatePath event. Handle this event to create new nodes or cancel the navigation. In this case, Nodes 1, 2 and 3 need to be created.

    private void breadCrumbEdit1_Properties_ValidatePath(object sender, DevExpress.XtraEditors.BreadCrumbValidatePathEventArgs e) {
        if (e.Path == "Node 1\\Node 2\\Node 3") e.ValidationResult = DevExpress.XtraEditors.BreadCrumbValidatePathResult.CreateNodes;
        else e.ValidationResult = DevExpress.XtraEditors.BreadCrumbValidatePathResult.Cancel;
  3. Your path is now valid and the RepositoryItemBreadCrumbEdit.NewNodeAdding event is raised. This event indicates that a new node is about to be added. Handle this event to customize the new node properties. Note that you should set the BreadCrumbNode.PopulateOnDemand property to true for all nodes that should have child nodes within.

    private void breadCrumbEdit1_Properties_NewNodeAdding(object sender, DevExpress.XtraEditors.BreadCrumbNewNodeAddingEventArgs e) {
        e.Node.Caption = "My Node 1";
        . . .
        e.Node.PopulateOnDemand = true;
  4. Finally, when an end-user expands any of the newly created nodes to view its child nodes, the RepositoryItemBreadCrumbEdit.QueryChildNodes event will fire. Handle this event to dynamically populate the BreadCrumbNode.ChildNodes collection.

    private void breadCrumbEdit1_Properties_QueryChildNodes(object sender, DevExpress.XtraEditors.BreadCrumbQueryChildNodesEventArgs e) {
        switch (e.Node.Caption) {
            case "Node 1":
                    e.Node.ChildNodes.Add(new DevExpress.XtraEditors.BreadCrumbNode("New Node 1", "newValue1", true));
                    . . .
            case "Node 2":
                    . . .
            case "Node 3":
                    . . .

Static Node Collection

The code below illustrates a simplified approach where you create the BreadCrumbNode class instances and add them to the RepositoryItemBreadCrumbEdit.Nodes and BreadCrumbNode.ChildNodes collections.

BreadCrumbNode node1 = new BreadCrumbNode("Root Node 1");
BreadCrumbNode node2 = new BreadCrumbNode("Root Node 2");
BreadCrumbNode node3 = new BreadCrumbNode("Root Node 3");
BreadCrumbNode node4 = new BreadCrumbNode("Child Node 4");
BreadCrumbNode node5 = new BreadCrumbNode("Child Node 5");
breadCrumbEdit1.Properties.Nodes.AddRange(new BreadCrumbNode[] { node1});
node1.ChildNodes.AddRange(new BreadCrumbNode[] { node2 });
node2.ChildNodes.AddRange(new BreadCrumbNode[] { node3 });
node3.ChildNodes.AddRange(new BreadCrumbNode[] { node4, node5 });
breadCrumbEdit1.Path = "Root Node 1\\Root Node 2\\Root Node 3";