jQuery UI Widgets Forums Layouts Panel and Responsive Panel highlight a text in the jQXPanel from jQXgrid click

This topic contains 4 replies, has 2 voices, and was last updated by  Ivo Zhulev 4 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • walker1234
    Participant

    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?

    • This topic was modified 4 years ago by  walker1234.
    • This topic was modified 4 years ago by  walker1234.
    • This topic was modified 4 years ago by  walker1234.

    Ivo Zhulev
    Participant

    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/


    walker1234
    Participant

    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.


    walker1234
    Participant

    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 Zhulev
    Participant

    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/

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.