Tooltip not working for DorpDownlistFor and MultiSelectFor controls

8 posts, 1 answers
  1. Nageswara
    Nageswara avatar
    1 posts
    Member since:
    Jun 2012

    Posted 26 Jul 2013 Link to this post

    How to display tooltip when mouse hover over the Kendo MultiSelectFor and DorpDownlistFor controls in MVC?

    Please provide the sample code.
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 30 Jul 2013 Link to this post

    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();
      }
    });
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 20 Dec 2015 in reply to Iliana Nikolova Link to this post

    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

  5. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 22 Dec 2015 in reply to hkdave95 Link to this post

    Hi Iliana

     The current ReqestStart Code is:

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

    Kind Regards

    David

     

     

     

  6. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 22 Dec 2015 in reply to hkdave95 Link to this post

    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

     


     
     
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 23 Dec 2015 Link to this post

    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
  8. Julien
    Julien avatar
    2 posts
    Member since:
    Dec 2015

    Posted 26 Jan Link to this post

    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)
                                        )

     

  9. Julien
    Julien avatar
    2 posts
    Member since:
    Dec 2015

    Posted 26 Jan in reply to Julien Link to this post

    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

Back to Top
UI for ASP.NET MVC is VS 2017 Ready