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>