New Line in Cell Comments in jQuery Spreadsheet Widget

[Lieven]

Hi,

In the jQuery Spreadsheet Widget, it is possible to add a comment to a cell. When the comment contains a newline character '\n', then the comment tooltip of the spreadsheet does not show the newline. 

How can we allow newlines in a comment tooltip of a Spreadsheet Cell?

( I think that the js kendo version 2022 contained that functionality)

 

Kind regards!

 

 

[Martin]

Hello, Lieven,

Currently the cell.comment option accepts only string values so there is no way to display a new line through the built-in configuration.

A possible approach would be to use a separate Kendo Tooltip component, but you will need additional checks to display the Tooltip for a specific cell. Here is a small example for reference.

Let me know if you have any questions on the topic.

Regards,
Martin
Progress Telerik

[Lieven]

Hello Martin,

Thanks for your answer. I remember that in earlier Kendo JQuery versions, the newline was possible.

How would you implement in your proposed approach that the content of the Kendo Tooltip is equal to the comment value of the Excel cell?

Kind regards

[Martin]

Hello, Lieven,

If you wish to display the content of the cell in the Tooltip, you can use the code snippet below:

$("#spreadSheetMain").kendoTooltip({
          filter: ".k-spreadsheet-cell",
          position: "right",
          content: function (e) { 
            //var html = "<p>Some content</p>\n\New Line";
            return e.target.children().text();
          }
        }).data("kendoTooltip");

[Lieven]

Hi Martin,

Thanks for your answer. 

I need to show only the comment text in the tooltip, with the ability of new lines. 

Therefore, I have updated the filter property of the 'kendoTooltip' equal to the class .k-spreadsheet-has-comment. 

In this way, the tooltip only shows when a comment of the Excel cell exists.

But my problem is that I cannot get the comment text of that cell. 

Furthermore, I need to hide the default comment popup of the Kendo Spreadsheet.

Can you assist me with that?

$("#spreadSheetMain").kendoTooltip({
          filter: ".k-spreadsheet-has-comment",
          position: "right",
          content: function (e) { 
            //var html = "<p>Some content</p>\n\New Line"; 
               return e.target.children().text();
               //  I need the comment of the e.target cell
          }
        }).data("kendoTooltip");
           

[Martin]

Hello, Lieven,

You can hide the default comment popup using the styles below. Regarding the cell text, you can get it using the text method, and append it to the html string which is used to display a new line. Here is a small example for reference where the Tooltip appears for the ID column header. Let me know if that works for you.

<style>
          .k-tooltip.k-spreadsheet-cell-comment {
            display: none !important;
          }
  </style>

[Lieven]

Hi Martin,

Thank you for your answer.

How can i show the comment of the cell in the tooltip in your example?

Kind regards,

Lieven

[Martin]

Hello, LIeven,

I am not sure if there's an easy way to get the comment of the hovered cell to display it in the tooltip. What comes to my mind is to initially show the default cell comment so that you can get its text, and then hide it. However, the comment popup can be seen for a short time until the Tooltip opens. Here's a small example for reference. Another option would be to use the comment method to get the comment text, but you will need to add custom logic to find the row and index of the hovered cell in order to be able to target the correct range.

[Lieven]

Hello Martin,

Thank you for all the information. 
Maybe the newline in a comment tooltip functionality can be added in a later release?

In an older Kendo Spreadsheet version, newlines were possible.

Kind regards,

Lieven

[Martin]

Hello, Lieven,,

Could you please provide an example where the Spreadsheet comment supported new lines? So far I was unable to find a version in which that was possible.