Edit Breadcrumb Items

Environment

Description

How to edit and update the Breadcrumb items?

Solution

The Breadcrumb can be transformed into a textbox and let the user update its content dynamically.

1. Create a custom edit button and handle its click event. When the button is clicked replace the Breadcrumb with TextBox component:

   Copy Code<ng-container
       *ngTemplateOutlet="editing ? editTmpl : breadcrumbTmpl"
   ></ng-container>
   
   <ng-template #breadcrumbTmpl>
       <kendo-breadcrumb [items]="items"></kendo-breadcrumb>
       <button kendoButton (click)="startEditing()"...></button>
   </ng-template>
   
   <ng-template #editTmpl>
       <kendo-textbox ... ><kendo-textbox>
   </ng-template>

   Copy Codepublic editing = false;
   ...
   public startEditing(): void {
     this.editing = true;
   ...
   }

2. Handle the valueChange event of the TextBox component and update the items collection of the Breadcrumb component.

3. You can further handle the blur event of the TextBox, Esc or Enter keydown events to exit the editing mode:

   Copy Code<kendo-textbox (blur)="blur()" (keydown.enter)="confirmEdit($event)" (keydown.esc)="cancelEdit($event)" ...></kendo-textbox>

   Copy Codepublic confirmEdit(ev: KeyboardEvent): void {
     this.editing = false;
   }
   
   public cancelEdit(ev: KeyboardEvent): void {
     this.editing = false;
   }

The following example demonstrates the implementation of the suggested approach.

Suggested Links

• API Reference of the Breadcrumb