[Solved] Kendo Grid ellipsis

[Pradeep]

Hello,

  My requirement has to show ellipsis in Grid if text is long and when user click or mouse over the ellipsis the full text should come up as bubble or popup window.
This page is show the history of data. there this column has both new value and old value. mock up of the design is attached. 

1st Attached before clicking to ellipsis and 2nd after clicking to ellipsis

[Dimo]

Hi Pradeep,

The described behavior requires several imlpementation steps:

1. The "more" string must be shown only if needed, which requires using a Grid column template with a conditional statement inside.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template

http://docs.telerik.com/kendo-ui/framework/templates/overview#template-syntax

2a. The ToolTip instance can be initialized from a Grid ancestor element and use some custom class of the "more" element as a filter.

http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip#configuration-filter

http://demos.telerik.com/kendo-ui/tooltip/index

2b. The content of the ToolTip can be defined as a function, which locates the Grid table row from the target element, then the respective data item and takes the needed value

http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip#configuration-content

http://api.jquery.com/closest/

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

http://docs.telerik.com/kendo-ui/api/javascript/data/model

$("#myID").kendoTooltip({
    filter: ".myMoreClass",
    content: function (e) {
        var grid = e.target.closest(".k-grid").data("kendoGrid");
        var dataItem = grid.dataItem(e.target.closest("tr"));
        return dataItem.myFieldName;
    }
});

Regards,
Dimo
Telerik