Utility method usage for grid cells with big values

[Shafi]

I was looking at thread dealing with two things:

• Truncate long values by showing '...' in order to maintain the row height standard throughout the grid

• Activate tool-tip to show the complete cell value

I stumbled across this thread: listview make content ellipses and show tooltip when width of content exceeds 240px

Someone posted this utility method over there:

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

How do I use this (or where do i plug it) to achieve my two points above?

[Dimiter Topalov]

Hi Shafi,

You can check out the following how-to article from our documentation:

http://docs.telerik.com/kendo-ui/controls/layout/tooltip/how-to/show-on-length-condition

... and customize it to fit your custom logic and requirements. I have prepared a simple example with a possible implementation:

http://dojo.telerik.com/iZayi

I hope this helps.

Regards,
Dimiter Topalov
Telerik

 

 

[Shafi]

Hi!

Your fiddle and the linked article somehow suppose that I'd know the length beforehand. That's is not the case. I want it to show ellipsis if the length is longer than the 'space in cell' available. The cell resizes with the grid, so it has to be automatic: If any value in any cell finds itself getting truncated, it should shift to 'tooltip assist with an ellipsis' technique.

[Dimiter Topalov]

Hi Shafi,

Kendo UI does not provide the desired functionality out-of-the-box, but it can be achieved via some custom logic. You can get the currently hovered element in the function, from the content option (via e.target), and store it in a variable, that can be subsequently used in the condition in the show event handler, e.g.:

var target;
...
// ToolTip Configuration
...

content: function(e){

var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));

var content = dataItem.ProductName;

target = e.target;

return content;

}

...

show: function(e){

if(target[0].offsetWidth < target[0].scrollWidth){

this.content.parent().css("visibility", "visible");

}

},
...

I have modified the dojo to illustrate a sample implementation of the described approach:

http://dojo.telerik.com/iZayi/3

I hope this helps, but please note, that as this is a custom workaround, it is not properly tested, and can have some unexpected side effects, or not function flawlessly in all scenarios.

Regards,
Dimiter Topalov
Telerik by Progress