highlight a text in the jQXPanel from jQXgrid click

[walker1234Participant]

I have a jQXPanel containing 500 words of document.I have a jQXGrid with 4 columns (doc_content, text_content, begin, end). Where begin and end are the character offset of all the texts in the Texts(s) column in the below table which are also present in the document content of the jQXPanel.

All of the columns are hidden except Text(s) because I want to display only Text(s) column. When a user clicks on the one of the cell of text column, I want to highlight that particular text in the jQXPanel document. For example, if a user clicks on computer row, I would like to highlight all the occurrences of computer word in the jQXPanel document widget.

For example, suppose, my jQXGrid is as follows with only text column:

Texts(s)
___________

 computer
 _________

  Mouse
 _________

  Monitor
 _________

  Keyboard

 

Here is what I am trying to do:

 $("#textGrid").on('rowclick', function(event) {

                        row = event.args.rowindex;
                        console.log("Row variable value: " + row);
                        datarow = $("#textGrid").jqxGrid('getrowdata', row);
                        
                        var textContent = datarow["text_content"];
                       
                        var begin = datarow["begin"];
                        var stop = datarow["end"];

                        // so on and so forth ...

Any suggestions how should I proceed?

[Ivo ZhulevParticipant]

Hi walker1234,

Take a look at the following demo:
https://www.jseditor.io/?key=highlight-given-word-in-jqxpanel-from-cellvalue-of-jqxgrid
You will maybe need to make some corrections based on your code but it should do the trick.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[walker1234Participant]

Thanks Ivo. I have a question, from where did you get #panelContentjqxPane for the line let element = $('#panelContentjqxPanel:contains(' + value + ')'); ? I couldn’t find it anywhere. Also, I changed it to jQxPanel and it worked without complaining and hence I am confused.

[walker1234Participant]

Another problem I am facing in my application is the console log for the following line :

let element = $('#panelContentjqxPanel:contains(' + value + ')'); is throwing undefined for me.

[Ivo ZhulevParticipant]

Hi walker1234,

1. All jqxPanel have panelContent + panelID tags. In my example the ID of the tag was jqxPanel. And yes its normal to work with jqxPanel,
the contains searches for the given string in the tag given.
2. The console.log is working fine in the demo i’ve given. Maybe there is some difference between the fiddle and your app?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts