This is a migrated thread and some comments may be shown as answers.
Tooltip not working for DorpDownlistFor and MultiSelectFor controls
7 Answers 115 Views
This is a migrated thread and some comments may be shown as answers.
Nageswara
Top achievements
Rank 1
Nageswara asked on 26 Jul 2013, 08:33 PM
How to display tooltip when mouse hover over the Kendo MultiSelectFor and DorpDownlistFor controls in MVC?

Please provide the sample code.

7 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 30 Jul 2013, 07:44 PM
Hello Nageswara,

In order to achieve this you should attach Kendo UI Tooltip widget to the DropDownList / Multiselect. Please pay attention to the content and filter configuration options. For example: 

var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");
  ddl.ul.kendoTooltip({
     filter: "li",
     content: function (e) {
        var target = e.target; // element for which the tooltip is shown
        return $(target).text();
     }
});
On a side note, I believe this blog post will be useful. Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");
  ddl.ul.kendoTooltip({
     filter: "li",
     content: function (e) {
        var target = e.target; // element for which the tooltip is shown
        return $(target).text();
  }
});
var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");
  ddl.ul.kendoTooltip({
     filter: "li",
     content: function (e) {
        var target = e.target; // element for which the tooltip is shown
        return $(target).text();
  }
});
var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");
  ddl.ul.kendoTooltip({
     filter: "li",
     content: function (e) {
        var target = e.target; // element for which the tooltip is shown
        return $(target).text();
  }
});
var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");
  ddl.ul.kendoTooltip({
     filter: "li",
     content: function (e) {
        var target = e.target; // element for which the tooltip is shown
        return $(target).text();
  }
});
var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");
  ddl.ul.kendoTooltip({
     filter: "li",
     content: function (e) {
        var target = e.target; // element for which the tooltip is shown
        return $(target).text();
  }
});
0
hkdave95
Top achievements
Rank 2
answered on 20 Dec 2015, 03:42 PM

Hi Iliana

...And how does one obtain the "ValueMember"?

 .value() does not work.

 I am trying to obtain the value of the "hovered" multiselect from within the RequestStart method.

 Cannot seem to find out how to do this after much research.

 Kind Regards

 David

0
hkdave95
Top achievements
Rank 2
answered on 22 Dec 2015, 01:11 PM

Hi Iliana

 The current ReqestStart Code is:

    function LinkNamesMultiSelectRequestStart(e)
    {
        var oTarget = e.target;
        e.options.data = { lgMLINK_gId: $(oTarget).value() };
    }

Kind Regards

David

 

 

 

0
hkdave95
Top achievements
Rank 2
answered on 22 Dec 2015, 01:19 PM

Hi Iliana

 One more piece to the puzzle.

 I have tried e.target.data("Value"), where Value is the Value Member.

                            @(Html.Kendo().MultiSelect()
                                .Name("LinkNamesMultiSelect")
                                .HtmlAttributes(new { style = "width: 100%;" })
                                .DataTextField("Text")
                                .DataValueField("Value")
                                .AutoBind(true)
                                .AutoClose(false)
                                .Events(E => E.Change("LinkNamesMultiSelectChange"))
                                .Placeholder(Heron9.OpenAccess.Classes.Dictionary.LookupText(Heron9.Classes.Configuration._eDefaultCountry, "litSelectLinkName", "Please select link name(s)"))
                                .DataSource(DS => DS.Read(R => R.Action("_ReadLinkNames", "Shared").Data("LinkNamesMultiSelectData")))
                                .Value(this.Model._oSelectedLinkNames)
                            )   

@(Html.Kendo().Tooltip()
    .For(".k-multiselect")
    .Filter("li")
    .LoadContentFrom("LinkNamesTooltipPartial", "Shared")
    .Position(TooltipPosition.Top)
    .Width(250)
    .Height(100)
    .AutoHide(false)
    .Events(events => events.RequestStart("LinkNamesMultiSelectRequestStart"))
)

 Kind Regards

 David

 


 
 
0
Iliana Nikolova
Telerik team
answered on 23 Dec 2015, 11:55 AM
Hi David,

Apologies for the delayed reply - we are short on staff due to the Christmas holidays.

For this requirement you will need to retrieve the whole dataitem of the hovered element. This way you will get an access to the value and text simultaneously. Something like: 
var multiSelect = $("#LinkNamesMultiSelect").data("kendoMultiSelect")
var target = $(e.target);
var idx = target.index();
var dataItem = multiSelect.dataSource.data()[idx];
 
return dataItem.Text + " " + dataItem.Value;

Notice how the data item is retrieved from the data source based on the LI index.

Regards,
Iliana Nikolova
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Julien
Top achievements
Rank 1
answered on 26 Jan 2016, 03:21 PM

Hello guys,

 

The solution of Iliana didn't worked for me, but I found an other solution by combining MVC and js documentation.

 Let's say you you a MultiSelect like bellow :

@(Html.Kendo().MultiSelect()
    .Name("selectedCounts")
    .Placeholder("Select counts...")
.DataTextField("Name") //Specifies which property of the Product to be used by the multiselect as a text.
                                    .DataValueField("ID") //Specifies which property of the Product to be used by the multiselect as a value.
                                    .ItemTemplate("<span title=' #: data.Tooltip #'> #: data.Name #</span>")
                                    .Filter(FilterType.Contains)
                                    .AutoClose(false)
                                    .BindTo(Model.Filters.Counts)
                                    )

 

0
Julien
Top achievements
Rank 1
answered on 26 Jan 2016, 03:35 PM

Missed the post click and cannot edit, so going on here.

Let's say you have a MultiSelect like bellow :
@(Html.Kendo().MultiSelect()
                                    .Name("selectedCounts")
                                    .Placeholder("Select counts...")
                                    .DataTextField("Name") //Specifies which property of the Product to be used by the multiselect as a text.
                                    .DataValueField("ID") //Specifies which property of the Product to be used by the multiselect as a value.
                                    .ItemTemplate("<span title=' #: data.Tooltip #'> #: data.Name #</span>")
                                    .Filter(FilterType.Contains)
                                    .AutoClose(false)
                                    .BindTo(Model.Filters.Counts)
                                    )
where Model.Filters.Counts is a List of Objects with an ID (int), a Name (string) and a Tooltip (string).

The most important thing is that I used the "ItemTemplate" property and that I can access my Tooltip with "data.Tooltip".

 

Then have a look at your HTML generated and search the ID of your "ul" element containing your "li" dropdown list. It's always named like : "Name_of_your_multiselect_listbox", so for my exemple : ''selectedCounts_listbox"

 

Now you just have to add this javascript in your View :

$(document).ready(function () {
        $("#selectedCounts_listbox").kendoTooltip({
            filter: "li span",
            width: 120,
            position: "top"
        }).data("kendoTooltip");
        $("#selectedCounts_listbox").find("li span").click(false);
    });

 

The "li span" is a reference to the "ItemTemplate" that I've created, but you can adjust to your own template. For exemple "li p" if you used a paragraph, etc...

 

Hope this helped

Asked by
Nageswara
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
hkdave95
Top achievements
Rank 2
Julien
Top achievements
Rank 1
Share this question
or