Datapage Tabular Report Row Click Event

[Bob68]

The rows in a tabular datapage report display colors when they are clicked to highlight the chosen row. Is the event for this exposed so I can attach a javascript event listener and extract data from the selected row ? 

[futurist]

On 6/11/2020 at 4:24 AM, Bob68 said:

The rows in a tabular datapage report display colors when they are clicked to highlight the chosen row. Is the event for this exposed so I can attach a javascript event listener and extract data from the selected row ? 

Hi @Bob68,

by extracting data from the selected row, do you plan on using this data to fetch additional information from that selected row and display them? you can actually do this by passing parameters from one Report DataPage to a Details DataPage, or to some other DataPage. You can read more about it here: https://howto.caspio.com/parameters/passing-parameters/

[Kurumi]

Hi! Just an update - if you would like to highlight search words in the Results Page, you can try these solutions:

1. From this link: https://www.delftstack.com/howto/javascript/highlight-text-using-javascript/

To apply in the DataPage, insert the code below in the Footer of Configure Results Page Fields

<script>

document.addEventListener('DataPageReady', function (event) {

let searched = document.querySelector("input[name='Value1_1']").value.trim();
    if (searched !== "") {
        let text = document.querySelector("table[id*='cbTable']").innerHTML;
        let re = new RegExp(searched,"g"); // search for all instances
        let newText = text.replace(re, `<mark>${searched}</mark>`);
    document.querySelector("table[id*='cbTable']").innerHTML = newText;
    }

});

</script>

You can change the Value1_1 based on the form element of your search field.

2. Using mark.js - https://markjs.io/ This is text highlighter written in JavaScript.

To apply in the DataPage, insert the code below in the Footer of Configure Results Page Fields

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>

<script>

document.addEventListener('DataPageReady', function (event) {

let searched = document.querySelector("input[name='Value1_1']").value;

    if (searched !== "") {
       var instance = new Mark(document.querySelector("table[id*='cbTable']").tBodies[0]);
       instance.mark(searched);
    }

});
</script>

Result:

I hope this helps!