"read more" functionality for grid cells.

[Maitri]

How to have 'read more' and 'read less' functionality if there is large content in a cell in Kendo grid for Angular 6 ?

So inside cell on the third line of text we could have a 'read more'  and on clicking on 'read more' the row expands vertically and shows the rest of the content ending with 'read less'. 

[Dimiter Topalov]

Hello Maitri,

The developer can utilize the Grid Cell template to provide any desired custom logic and content to the respective cells:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/templates/#toc-cell-template

A "read more"/"less" button could be displayed conditionally based on the length of the cell content - for example the first X characters from the text can be displayed in a custom div/span element with ellipsis and a "read more" button in the end.

Another element, holding the rest of the text (or a new element, holding the whole text) can be shown when the button is clicked (for example, via *ngIf and toggling some boolean field). Again, when the whole content is displayed, another button at the end of the whole content can toggle the same boolean back, thus hiding the long text container, and displaying again the short text container.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Tushar]

Hi Dimiter,
i have tried the same way as you have explained, but the issue is when we do it for one row it gets applied to all the rows which has the length of the cell content more than X characters.

how can we target the single row on which we are doing the operation read more/less.

[Maitri]

Hi Tushar,

One workaround to target the single row on which user has clicked is by adding a boolean property like IsReadMore in your object and then on read more button click pass the dataItem to the function and inside the function set the IsReadMore flag TRUE for that particular dataItem. And based on this flag you can show/hide your content.

Ex:

<a (click)="onClick(dataItem)"> read more... </a>

onClick(dataItem)

{

dataItem.IsReadMore = true;

}

[Tushar]

Hi Maitri,

thanks alot, it worked.