Edit Breadcrumb Items

Environment

Product

Progress® Kendo UI® for Angular Breadcrumb

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:

   html

   <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>

   ts

   public 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:

   html

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

   ts

   public 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.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Breadcrumb