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

Posted 2023-05-07

【中文标题】如何在 Kendo Multiselect 中悬停时显示弹出窗口

【英文标题】：How to show a popup on hover in Kendo Multiselect

【发布时间】：2021-07-15 09:55:09

【问题描述】：

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

这是我的实际 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>

【参考方案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 ];

【讨论】：

非常感谢您的回答。你能为我的问题举个例子吗？

我不是 Angular 开发人员 - 不过我可以在 ASP.NET MVC 中向您展示 :) - 但我会尝试添加一个示例来满足您的需求不过做了一些调整。

非常感谢您的帮助 :)

OK - 添加的示例在下拉列表中显示截断的文本，但带有长文本的悬停标题工具提示。

好的，我让它与标题一起使用，现在它不适用于我的 ngbtooltip，但这是我将轻松解决的次要问题。非常感谢您的帮助：）