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

Question

我有一个kendo多选择组件，它工作得很好，但是当我的下拉列表中的文本太长时，我必须截断它。我至少会显示一个工具提示在悬停与全文。下面是一个所需结果的示例(在本例中，我将第一个结果悬停，得到一个带有全文的弹出)：

​

​

下面是我的实际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角模板的方法的示例

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/

一种可能的方法来做你正在寻找的模板-我不精通角度，所以这可能需要一些调整。下面是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 }];
}