How to attach Tooltip to Html.Kendo().DropDownListFor

[James]

Hi  - I need help in attaching a Tooltip to a dropdown in my grid – to display additional details for each item in the dropdown list

I have not been able to adapt any of the Tooltip examples I have found – hoping someone can help

My mvc grid column editor template is defined as

columns.Bound(c => c.MostRecentTollGate).EditorTemplateName("MostRecentTollGateDDL").Width(150).Filterable(ftb => ftb.Multi(true).Search(true))

My editor dropdown is as follows

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("MostRecentTollGate1")
    .DataTextField("MostRecentTollGate1")
    .Filter("contains")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("TableRead", "ForecastDetails", new { tableIn = "MostRecentTollGate" }).Data("getGroupType");
        });
    })
)

 

the drop down works fine - now i need to add a tooltip

Thanks

Jim

 

 

[Marin Bratanov]

Hi Jim,

The following article shows the general approach to do this: https://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/appearance/show-tooltip-for-items. The key points are:

• the tooltip content function goes through the DOM element of the dropdownlist item to fetch data for it. You can replace it with other logic suitable for your case
• the tooltip filter selector tells it to attach to all items that match the given class - in this case - the dropdown element. You can change to work for a specific instance by adding a class to the dropdown - an example is available below

@(Html.Kendo().DropDownListFor(model => model.ClassId)
                                      .DataTextField("Name")
                                      .DataValueField("ClassId")
                                      .DataSource(source =>
                                      {
                                          source.Read(read =>
                                          {
                                              read.Action("Questions_GetClasses", "Questions");
                                          });
                                      })
                                      .Events(ev => ev.DataBound("attachTooltipCssCascadeClass"))
                                      .SelectedIndex(1290)
                                      .HtmlAttributes(new { style = "width: 60%" })
)
@Html.ValidationMessageFor(model => model.ClassId, "", new { @class = "text-danger" })
<script>
    function attachTooltipCssCascadeClass(evt) {
        evt.sender.list.addClass("ttipCascade");
    }

    $('body').kendoTooltip({
        filter: '.ttipCascade li.k-item', //or "#ClassId_listbox li.k-item" if the model field is "ClassId" - you can skip the dataBound handler then
        position: 'right',
        content: function (e) {
            var item = $("#ClassId").data("kendoDropDownList").dataItem($(e.target));
            var result = '<h3>' + item.Name + '</h3>' +
                '<h4>' + item.ClassId + '</h4>';

            return result;
        },
        width: 220,
        height: 280
    });
</script>

Regards,
Marin Bratanov
Progress Telerik