listview make content ellipses and show tooltip when width of content exceeds 240px

7 posts, 1 answers
  1. Manan
    Manan avatar
    5 posts
    Member since:
    Apr 2014

    Posted 26 Apr 2014 Link to this post

    Hi ,

    I am using Kendo Listview component as shown below:

    $("#showHide").kendoListView({dataSource: vals,template: "<div style='overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin:4px;'>#:name#</div>",selectable: "multiple",
    change:  function() {
    selected = $.map(this.select(), function(item) {
    return vals[$(item).index()].name;
                  });     
    },
    });

    Now as per requirement , i have to set the width to 240px for div ("showHide"). Now ellipses part is working fine when data is greater than 240px but i am not able to show tooltip on that. After searching on Internet, I found that using offsetwidth and maxwidth we can do that but when i am trying to apply here it is not working.

    Please see below code for offsetwidth and maxwidth which is not working :

    _getMaxLiWidth : function(i){
     var maxWidth = 0;
     $('#showHide').each(function(i){
       if(this.offsetWidth > maxWidth)
         maxWidth = this.offsetWidth;
     });
     return maxWidth;
    }

    Is there any other alternative to implement the tooltip other then this. Please help.

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 29 Apr 2014 Link to this post

    Hi Manan,

    I would recommend using a Kendo UI Tooltip widget with a custom content function to get the value of the desired field. Here is an example showing how this could be achieved.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Manan
    Manan avatar
    5 posts
    Member since:
    Apr 2014

    Posted 03 May 2014 in reply to Alexander Popov Link to this post

    Hi Alexander,

    Tooltip functionality is fine. But can you please tell me way using kendo or anything where i can find the content with Ellipsis applied on that content. So on that in can apply tooltip only where the ellipsis is applied.

    Data is coming like this on run time:

    <div id="showHide" class="showHideSelect k-widget k-listview k-selectable" data-role="listview" role="listbox" aria-multiselectable="true">

    <ul style="display: table-row;" data-uid="201dcfc1-cd85-4e9f-bd83-4f137ef40750" role="option" aria-selected="false"><li class="confContent" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin:4px;max-width:200px;">asdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li></ul>

    <ul style="display: table-row;" data-uid="714e63c7-8004-4e1f-8281-38b698691fe3" role="option" aria-selected="false"><li class="confContent" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin:4px;max-width:200px;">asdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li></ul>

    </div>

    $('ul li').each(function(i){
      if(this.offsetWidth > this.scrollWidth && !$this.attr('title'))
      $this.attr('title', "asdf");
    });
    After this it is not working. so can you please help me how to find the content with ellipses applied.

    Thanks,
    manan
  5. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 06 May 2014 Link to this post

    Hi Manan,

    Detecting where ellipsis is applied is not supported out of the box. This behavior however, could be achieved using a custom solution:
    1. Use the content method to check whether ellipsis is applied and if it is - return an empty string
    2. Set the Tooltip's visibility option to hidden 
    3. Use the show event handler to display the Tooltip if its content is different from an empty string
    4. Use the hide event to make the Tooltip invisible again

    Here is an example illustrating the above.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Manan
    Manan avatar
    5 posts
    Member since:
    Apr 2014

    Posted 06 May 2014 in reply to Alexander Popov Link to this post

    Thanks Alexander. really appreciate your help. Thank you.
  7. Jarno
    Jarno avatar
    3 posts
    Member since:
    May 2013

    Posted 06 May 2015 Link to this post

    function gridHeaderTooltip( kendoGrid, tooltipPosition, filterSelector ) {
        kendoGrid.kendoTooltip({
            filter: filterSelector,
            position: tooltipPosition,
            content: function (e) {
                var target = e.target;
                return $(target).text();
            },
            beforeShow: function (e) {
                var isActive = isEllipsisActive(e.target[0]);
                if (!isActive) {
                    e.preventDefault();
                }
            }
        });
    }
     
    function isEllipsisActive(e) {
        return (e.offsetWidth < e.scrollWidth);
    }
     
    kendo.ui.Tooltip.fn._show = function (show) {
        return function (target) {
            var e = {
                sender: this,
                target: target,
                preventDefault: function () {
                    this.isDefaultPrevented = true;
                }
            };
     
            if (typeof this.options.beforeShow === "function") {
                this.options.beforeShow.call(this, e);
            }
            if (!e.isDefaultPrevented) {
                show.call(this, target);
            }
        };
    }(kendo.ui.Tooltip.fn._show);
  8. Shafi
    Shafi avatar
    44 posts
    Member since:
    Dec 2014

    Posted 12 Jun in reply to Jarno Link to this post

    Jarno said:
    function gridHeaderTooltip( kendoGrid, tooltipPosition, filterSelector ) {
        kendoGrid.kendoTooltip({
            filter: filterSelector,
            position: tooltipPosition,
            content: function (e) {
                var target = e.target;
                return $(target).text();
            },
            beforeShow: function (e) {
                var isActive = isEllipsisActive(e.target[0]);
                if (!isActive) {
                    e.preventDefault();
                }
            }
        });
    }
     
    function isEllipsisActive(e) {
        return (e.offsetWidth < e.scrollWidth);
    }
     
    kendo.ui.Tooltip.fn._show = function (show) {
        return function (target) {
            var e = {
                sender: this,
                target: target,
                preventDefault: function () {
                    this.isDefaultPrevented = true;
                }
            };
     
            if (typeof this.options.beforeShow === "function") {
                this.options.beforeShow.call(this, e);
            }
            if (!e.isDefaultPrevented) {
                show.call(this, target);
            }
        };
    }(kendo.ui.Tooltip.fn._show);

    Dear Jarno, 

    How do I go about using your helper methods for an MVC declared grid?

Back to Top
Kendo UI is VS 2017 Ready