如何在 Kendo Multiselect 中悬停时显示弹出窗口

Question

我有一个很好用的剑道多选组件，但是当我的下拉列表中的文本太长时，我必须截断它。我会在悬停时至少显示一个带有全文的工具提示。这是所需结果的示例（在此示例中，我将鼠标悬停在第一个结果上，弹出一个带有全文的弹出窗口）：

这是我的实际 html：

        <kendo-multiselect kendoMultiSelectSummaryTag
                           [data]="enData"
                           [(ngModel)]="allCo"
                           [ngModelOptions]="{standalone: true}"
                           (filterChange)="handleFilterEn($event)"
                           [filterable]="true"
                           textField="text"
                           [virtual]="virtual"
                           valueField="coId"
                           (valueChange)="onValueChange($event)"
                           [value]="selectedCoToFilter"
                           class="form-control">
        </kendo-multiselect>

Answer 1

您可以使用模板完成您想做的事情。使用模板，您可以自定义下拉项目的显示方式、所选项目的显示方式等。因此，您可以添加任何您想要的 HTML，包括长名称值的工具提示。

这是在 Kendo Angular 中自定义模板的一种方法示例

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],
    template: `
      <div class="example-config">
        Current value: {{value | json}}
      </div>
      <div class="example-wrapper">
        <p>T-shirt size:</p>
        <kendo-multiselect
          [data]="listItems"
          [(ngModel)]="value"
          [textField]="'text'"
          [valueField]="'value'"
        >
        <ng-template kendoMultiSelectTagTemplate let-dataItem>
          <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
        </ng-template>
        </kendo-multiselect>
      </div>
    `
})
export class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: 'Small', value: 1 },
        { text: 'Medium', value: 2 },
        { text: 'Large', value: 3 }
    ];
    public value: any = [{ text: 'Medium', value: 2 }];
}

这里有多个示例和代码： https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates/

一种可能的方式来做你正在寻找的模板 - 我不精通 Angular，所以这可能需要一些调整。这是 StackBlitz 上此示例的链接：https://stackblitz.com/edit/angular-3c7ve2?file=app/app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],
    template: `
      <div class="example-config">
        Current value: {{value | json}}
      </div>
      <div class="example-wrapper">
        <p>T-shirt size:</p>
        <kendo-multiselect
          [data]="listItems"
          [(ngModel)]='value'
          [textField]="'text'"
          [valueField]="'value'"
        >
        <ng-template kendoMultiSelectItemTemplate let-dataItem>
          <div title="{{ dataItem.title }}">{{ dataItem.text }} </div>
        </ng-template>
        </kendo-multiselect>
      </div>
    `
})
export class AppComponent {
    public listItems: Array<{ text: string, title: string, value: number }> = [
        { text: 'Small but really long ...', title: 'Small but really long text here and here and some more here but extra extra long long long', value: 1 },
        { text: 'Medium', title: 'Medium but title length', value: 2 },
        { text: 'Large', title: 'Large but title lenght', value: 3 }
    ];
    public value: any = [{ text: 'Medium', value: 2 }];
}