在 kendo-multiselect 如何显示“+”图标添加字段

Question

在我的 Angular 应用程序中，我使用的是 kendo-multiselect。我想要实现的是：

从下拉列表中选择一个值，然后单击 kendo-multiselect 上的 + 图标，然后打开一个新页面（基于下拉值）。

我已使用 [clearButton]="false" 从多选中删除了默认的 x 图标，但我无法弄清楚如何在同一位置显示 + 图标！

Answer 1

您可以在<kendo-multiselect> 中使用<ng-template kendoMultiSelectGroupTagTemplate let-dataItems>。

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