Kendo MVC DropDownList-items with Tooltips答案

【问题标题】：Kendo MVC DropDownList-items with TooltipsKendo MVC DropDownList-items with Tooltips
【发布时间】：2017-08-23 22:05:00
【问题描述】：

首先，How to add a tooltip based on a DropDown list with Kendo wrappers? 似乎不起作用，我似乎找不到任何有用的东西。

我要做的就是为以下 Kendo DropDownList 内的项目添加工具提示。

@(Html.Kendo().DropDownList()
    .Name("ddl-ebm")
    .DataTextField("EBMNummer")
    .DataValueField("Id")
    .OptionLabel("Neuer Datensatz...")
    .DataSource(ds => ds.Read("GetEbmNummern", "Rechner"))
    .Events(e => e.Select("onEbmSelect")))

Kendo Tooltip 元素当前如下所示。

@(Html.Kendo().Tooltip()
    .For("#ddl-ebm")
    .Position(TooltipPosition.Top)
    .Content("!!!")
    .Width(120)
    .Events(events => events.Show("onHoverShowToolTip")))

我唯一要做的就是在 DropDownList 本身上放置一个工具提示，但前提是我为 For() 设置围绕它的容器并在 .k-dropdown 上设置一个过滤器，但这并不是我想要的.

提前致谢。

【问题讨论】：

标签： asp.net-mvc kendo-ui

【解决方案1】：

首先，使用模板给item添加标准标题：

@(Html.Kendo().DropDownList()
.Name("ddl-ebm")
.DataTextField("EBMNummer")
.DataValueField("Id")
.OptionLabel("Neuer Datensatz...")
.DataSource(ds => ds.Read("GetEbmNummern", "Rechner"))
.Template("<span class=\"drop-down-list-item\" title=\"#=EBMNummer#\">#=EBMNummer#</span>")
.Events(e => e.Select("onEbmSelect")))

在加载文档时，您应该像这样添加剑道功能：

$(".drop-down-list-item").each(function () {
    $(this).kendoTooltip();
});

【讨论】：