Adding "show more" / "show less" link in column with long text

rish16

Hi,

In some of our columns text would be very long lets say more than 100 characters. What I am thinking to put show more/less link inside the column. Is it possible ?

If I could give column id to my specific column then it's easy to add link on run time but it seems I can't give ids.

Any thoughts ?

rish16

I am able to add "Read more" link but when I click on this link it makes the row editable however I am expecting to toggle more/less contents when hyperlink is clicked.Inline edit should trigger only when anywhere outside hyperlink is clicked.

My code is:

{
"targets": 4,
"render": function ( data, type, row ) {
if(row.ra_description=="" || row.ra_description.length <= 30) {
return row.ra_description
else {
var shortText= row.ra_description.substring(0,30);
var cleanStr= row.ra_description.replace(/["']/g, "")
return shortText + '...' + "<a id=\"toggleButton\" onclick=\"toggleShowMoreLessText('"+cleanStr+"');\" href=\"javascript:void(0);\">(Read more)</a>"
}
}
}
toggleShowMoreLessText:function(desc){
return desc + '...' + "<a id=\"toggleButton\" onclick=\"prism.ra.toggleShowMoreLessText('"+desc+"');\" href=\"javascript:void(0);\">(Read less)</a>"
}

rish16

I am able to add "Read more" link but when I click on this link it makes the row editable however I am expecting to toggle more/less contents when hyperlink is clicked.Inline edit should trigger only when anywhere outside hyperlink is clicked.

My code is:

{
"targets": 4,
"render": function ( data, type, row ) {
if(row.ra_description=="" || row.ra_description.length <= 30) {
return row.ra_description
else {
var shortText= row.ra_description.substring(0,30);
var cleanStr= row.ra_description.replace(/["']/g, "")
return shortText + '...' + "<a id=\"toggleButton\" onclick=\"toggleShowMoreLessText('"+cleanStr+"');\" href=\"javascript:void(0);\">(Read more)</a>"
}
}
}
toggleShowMoreLessText:function(desc){
return desc + '...' + "<a id=\"toggleButton\" onclick=\"prism.ra.toggleShowMoreLessText('"+desc+"');\" href=\"javascript:void(0);\">(Read less)</a>"
}

rish16

I am able to add "Read more" link but when I click on this link it makes the row editable however I am expecting to toggle more/less contents when hyperlink is clicked.Inline edit should trigger only when anywhere outside hyperlink is clicked.

My code is:

{
"targets": 4,
"render": function ( data, type, row ) {
if(row.ra_description=="" || row.ra_description.length <= 30) {
return row.ra_description
else {
var shortText= row.ra_description.substring(0,30);
var cleanStr= row.ra_description.replace(/["']/g, "")
return shortText + '...' + "<a id=\"toggleButton\" onclick=\"toggleShowMoreLessText('"+cleanStr+"');\" href=\"javascript:void(0);\">(Read more)</a>"
}
}
}
toggleShowMoreLessText:function(desc){
return desc + '...' + "<a id=\"toggleButton\" onclick=\"prism.ra.toggleShowMoreLessText('"+desc+"');\" href=\"javascript:void(0);\">(Read less)</a>"
}