In the kendo-multiselect how to Show "+" icon to add a field

0
votes

In my Angular app, I am using kendo-multiselect. What I am trying to achieve is:

Select a value from dropdown and the click on + icon on the kendo-multiselect and then open a new page (based on the dropdown value).

I have removed the default x icon from the multi-select, using [clearButton]="false", but I am unable to figure out how to show + icon at the same place!

1
angularkendo-ui

1 Answers

0
votes

You can use the <ng-template kendoMultiSelectGroupTagTemplate let-dataItems> in <kendo-multiselect>.

HTML :

<kendo-multiselect
kendoMultiSelectSummaryTag
[data]="data"
[filterable]="true"
[textField]="textField"
[valueField]="valueField"
[clearButton]="false"
[autoClose]="false"
[value]="selectedValue">
  <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>
    <i class="fas fa-plus-circle fa-lg" (click)="redirectPage(selectedValue)"></i>
  </ng-template>
</kendo-multiselect>

TS :

/** 
 * redirectPage() method is used to redirect into a new component on click of + icon.
 * @param selectedValue {object} - Object of the selected option from the dropdown.
 */
redirectPage(selectedValue) {
  // redirection logic will come here.
}