Need to add read-more and read-less for a cell item if text is more than 20 character in length

Tags: #<Tag:0x00007f8b1d9d6688>
#1

Hi,

We need a feature to implement in handsontable.

For eg, lets consider there is a column called comments.

The comments filled in by the user may be more 100 characters. So, based on the characters length, the width or height is expanding. Instead, we need to show readmore button within the cell if the character length of text is more than 25 characters and show readless button if the readmore button is clicked.

Please let us know, if this feature can be implemented in a the cell.

We really appreciate, if we get a worked out code or any example related to this.

I have added an example demo code here, https://jsfiddle.net/qv1hwxfe/1/

Thanks in advance.

#2

Hi @kvengadachalam

I have some example that can be helpful with your case. What I got here is:

  • cutting the content within the cell if it’s too long;
  • Additional button that allows you to show the whole cell content;

I added the “read more” button in the second column as it doesn’t look very good if it’s in the same cell as the text content. Of course you can start building your functionality from here and tweak the example. I just wanted to show you the general idea how it could be possibly done.

http://jsfiddle.net/aszymanski/gcdn5pbL/2/

#3

Hi Adrian,

Actually, this is good. But adding readmore button in a different cell does’t help us in our application.

Is there any possibility to add the readmore button in the same cell where is more than 100 characters like an hyperlink.

image

I used below code to get the above image for example,

if (col.field_name === ‘comments’) {

      colSpecification.renderer = (instance: any, TD: any, row: number, column: number, prop: any, value: any, cellProperties: any) => {

        TD.setAttribute('title', value ? value : '');

        TD.innerHTML = `${value ? value + '  <a class="customLink" (click)="Check()">Read more</a>' : ''}`;

      };

    }

Thanks,
Karthikeyan

#4

Hi @kvengadachalam

You can add the button in the same cell, then it would look something like this:

http://jsfiddle.net/aszymanski/gcdn5pbL/4/

But it doesn’t work very well as you can see as the “button” is at the end of the cell.

#5

Okay. Thanks @adrian.szymanski.

#6

Hi @adrian.szymanski,

I finally managed to implement the readmore and readless feature in the same cell.

I am including the worked out code here: https://jsfiddle.net/bw7e5ftx/

Hope this might be helpful for someone who is trying to implement the same feature.

Thanks,
Karthikeyan

1 Like
#7

Hi @kvengadachalam

Thank you for that! It would definitely be useful :slight_smile:

1 Like
#8