Utility method usage for grid cells with big values

4 posts, 2 answers
  1. Shafi
    Shafi avatar
    42 posts
    Member since:
    Dec 2014

    Posted 23 Jun Link to this post

    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?

  2. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 27 Jun Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Shafi
    Shafi avatar
    42 posts
    Member since:
    Dec 2014

    Posted 28 Jul in reply to Dimiter Topalov Link to this post

    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.

  5. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 01 Aug Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top
Kendo UI is VS 2017 Ready