在kendo-multi中，选择如何显示"+".图标添加字段 [英] In the kendo-multiselect how to Show "+" icon to add a field

问题描述

在我的Angular应用中，我正在使用kendo-multiselect.我想要实现的是:

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

从下拉列表中选择一个值，然后在kendo-multiselect上单击+图标，然后打开一个新页面(基于下拉值).

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

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

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!

推荐答案

您可以在<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.
}

这篇关于在kendo-multi中，选择如何显示"+".图标添加字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！