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

[Manan]

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.

[Alexander Popov]

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

 

 

[Manan]

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

[Alexander Popov]

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

 

 

[Manan]

Thanks Alexander. really appreciate your help. Thank you.

[Jarno]

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

[Shafi]

[quote]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);

[/quote]

Dear Jarno, 

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