ToolTip Kendo MVC Widget Combobox

4 posts, 0 answers
  1. Russ
    Russ avatar
    6 posts
    Member since:
    Apr 2014

    Posted 04 Oct 2014 Link to this post

    I found help from http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip in getting this far.  However, we are using Kendo MVC Widgets so, the line of code
    below "return target.text() is never populated.  I did find by poking around in debugger that e.target.context.value had the values for each generated <input> tag in both the Html.Kendo().TextBox() and Html.Kendo().ComboBox().

    Here's the code that displays a Kendo Tooltip for every input html element within a specific div.

    $(document).ready(function () {
            $("#project-tabs").kendoTooltip({
                 filter: "input",
                 content: function (e) {
                         var target = e.target; // the element for which the tooltip is shown
                         //return target.text(); // set the element text as content of the tooltip --> This does not work on MVC.
                         return e.target.context.value;  // This does work on MVC Widget
                }
        });
    });

    Is there a better way?
  2. Russ
    Russ avatar
    6 posts
    Member since:
    Apr 2014

    Posted 04 Oct 2014 in reply to Russ Link to this post

    Moving ahead, I tried to add additional logic to only show the tooltip if the length of the input tag is 25 or more characters, otherwise, the input fields are large enough to see on the web page.  All is well except, if I change the Kendo Combobox, the tooltip shows the old value.  If I go over and hover over a different field with 25 or more characters and then come back to the previous Combobox, the tooltip is correct.  Any ideas?

    // customize the _show method to call options.beforeShow
    // to allow preventing the tooltip from being shown..
    kendo.ui.Tooltip.fn._show = function (show) {
        return function (target) {
            if (typeof this.options.beforeShow === "function") {
                var e = {
                    sender: this,
                    target: target,
                    preventDefault: function () {
                        this.isDefaultPrevented = true;
                    }
                }
     
                this.options.beforeShow.call(this, e);
     
                if (!e.isDefaultPrevented) {
                    // only show the tooltip if preventDefault() wasn't called..
                    show.call(this, target);
                }
            }
        };
    }(kendo.ui.Tooltip.fn._show);
     
    $(document).ready(function () {
        $("#project-tabs").kendoTooltip({
            filter: "input",
            width: 200,
            position: "top",
            beforeShow: function (e) {
                if (e.target.context.value.length < 25) {
                    // don't show the tooltip if the name attribute contains less than 25 characters
                    e.preventDefault();
                }
            },
     
            content: function (e) {
                var target = e.target; // the element for which the tooltip is shown
                //return target.text(); // set the element text as content of the tooltip
                return e.target.context.value;
            },
             
        });
    });

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Russ
    Russ avatar
    6 posts
    Member since:
    Apr 2014

    Posted 04 Oct 2014 in reply to Russ Link to this post

    I figured out a solution by reading the API Reference. :)  I added this.refresh() before the show.call(this, target).

    I really wish as a user/developer  using Kendo MVC, and Kendo UI, there were more examples on things we all have to do with every basic project.  What can we do to improve this?  I know this is a challenge for us all.  Putting a tooltip on a Html.Kendo().TextBox() and Html.Kendo().ComboBox() should not take this much time to figure out.  I'm speaking about adding a tooltip that shows the value when the value is larger than the display area for the input.  If I disable the widget, I'm hoping what I've done will work.  Lets make using Kendo the easiest thing to use so more use it.  Telerik/Kendo rocks, I love what we can do with it, but some things take more time than it should.

    this.refresh();
    show.call(this, target);

  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 08 Oct 2014 Link to this post

    Hello Russ,

    Thank you for sharing your solution and the warm words about the KendoUI framework - we really appreciate it. We are trying to do our best with the documentation, however sometimes there are scenarios that are not supported out-of-the-box and we cannot create work-arounds for everyone of them.

    Everyone that wants to help us improve our learning resources are free to:

    Contribute to our documentation:

    https://github.com/telerik/kendo-docs

    Or share code-library demo projects that you find a well-known scenarios that are not demonstrated anywhere else.

    http://www.telerik.com/support/code-library/aspnet-mvc

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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