i am using this code to mark special words in a 2 column grid row
gridRow.childNodes[1].firstChild.innerHTML = '<span class ="highlightClass">' + word+ '</span>';
Now everytime when I click inside the row, the word is not marked anymore because div is changing.
The expected behavior is, that the word is still marked till I am changing it.
Would be great, when someone could help me.
Thank you in advance
You can easily highlight words with the HTML tag <mark>.
Just to give you a quick direction, you could define a renderer for your two columns where you look for a precise word/s and replace/mark em with a regular expression.
For example, to highlight all the occurrences of the word "apple" in a column, you could define its renderer like below:
renderer: function (value, metaData, record) {
var wordToHighlight = "world";
return value.toString().replace(new RegExp(wordToHighlight , "ig"), "<mark>$&</mark>"));
}
So...
...something like "Orange Apple Pineapple" will be rendered as "Orange <mark>Apple</mark> Pineapple"