Kendo Angular Grid --> Column values not displaying with Text warp/tooltip

[Sankar]

Hi Team,

I am using Kendo Angular Grid. I have two columns and if I have 20 chars [without space in the text] in the column value, it is not wrapping or showing any tooltip, instead of  three dots are showing {ex: "110..."  }

Refer the screen shot as well. How to resolve this issue?

Note :I dont want to increase the size of the column

 

 

Thanks,

Sankar

[Svet]

Hi Sankar,

Thank you for the provided screenshot.

Indeed, this is expected behavior. We could extend the grid cells using the autoFitColumns() function, but as long as the scenario does not allow columns resizing we could use the Tooltip component in order to display the whole text contained within any cell. Check the following example demonstrating this approach:

https://stackblitz.com/edit/kendo-grouped-grid-3-qnwnhx 

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Sankar]

Hi Svetlin,

Thanks for given solution. But still I am not got full solution.

My requirement is when I have large amount data ( like ssankartestapplication...) for that particular text I want the tooltip, instead of entire gird all column values with tooltips.

Thanks

 

 

[Svet]

Hi Sankar,

We could achieve the desired custom functionality by displaying conditionally the tooltip only for elements that have a specific class.

We could check the length of the text within a column's kendoGridCellTemplate. We can calculate the length of the text in pixels by multiplying each character by 7 and the width of the cell by subtracting the padding on both sides - 24, from the column width:

<kendo-grid-column  field="Category.CategoryName" title="Category" width="90">
        <ng-template kendoGridCellTemplate let-dataItem>
            <span [class.tooLong]="dataItem.Category.CategoryName.length * 6 > 90 - 24">{{dataItem.Category.CategoryName}}</span>
        </ng-template>
      </kendo-grid-column>

If the condition passes then I am assigning the tooLong class to this cell.

The tooltip will be displayed only for td elements that also have the tooLong class:

<div kendoTooltip #tooltip="kendoTooltip" filter='td .tooLong' [tooltipTemplate]="template">

Here is an updated example demonstrating this approach:

https://stackblitz.com/edit/kendo-grouped-grid-3-qnwnhx

Another custom solution relying on some JavaScript logic would be on mouseover event to toggle the tooLong class conditionally:

onGridMouseOver(e) {
      const target = e.target;
      if (target.nodeName == "TD" && target.matches(".k-grid-content td")) {
        target.classList.toggle('tooLong', e.target.offsetWidth < e.target.scrollWidth);
      }
    }

Check the example at the following link:

https://stackblitz.com/edit/kendo-grouped-grid-3-8ifujv

Note that the requested functionality is not supported as it is not available as a built in feature. Indeed, the suggested approaches have drawbacks and may need to be adjusted for the specific scenario. I hope that they point you in the right direction of achieving the required custom functionality.

Regards,
Svetlin
Progress Telerik

[Sankar]

Hi Svetlin,

Thanks for your response. looks like good solution.

I tried to implement kendo-angular-tooltip with this solution in my project, I installed the @kendo-angular-tooltip in project and added the need text in systemjs.config.js and also added TooltipModule in app.module.ts as well.  

When I go to my page, I am getting "ERROR Error: Uncaught (in promise): TypeError: a.debounceTime is not a function
TypeError: a.debounceTime is not a function" - Please refer the screen shot. 

Note : all the peer dependency files also added/installed.

Can you please help me to fix this error? then only I can implement tooltip concept.

Thanks.

 

 

[Svet]

Hi Sankar,

It looks like the issue is related to a version of RxJS or probably its missing from the project. Could you check if it is available.

Also I would like to add, that systemJS may require a not straightforward approach of setting it up properly. This is why, Angular recommends to use the CLI tool for projects based on the Angular framework as a best practice. Check the following article for details on how to setup a project based on CLI:

https://angular.io/guide/quickstart

I hope this helps. Let me know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik