Question

I have two reports. Clicking on a column link in the primary report reveals details about it in the secondary report, and clicking the link refreshes the page (Maybe if only the second report was refreshed using AJAX I wouldn’t have the following problem, but I figure this will be harder to implement and maintain).

I have a javascript function like this to highlight the row:

function highlight(pThis) {
    $x_RowHighlight($x_UpTill(pThis,'TR'), 'pink');
}

But the row of course does not remain highlighted when the page refreshes. I would love to maintain the session state of pThis, if that is possible.

I also have a requirement to place a next button in the secondary report, that would show the details of the next row in the primary report, and highlight that row as well.

Any suggestions?

Answer 1

I’ve put together an example page with all code on it: http://apex.oracle.com/pls/apex/f?p=54687:39

I’ve made it a bit more involved because i wanted to account for a column link. When the link is clicked, the row has to become highlighted aswell. Note that it will only work as long as you remain on the same page (or rather, as long as you are on the same IR page) like this. I now even notice that it’ll keep the row colored when you navigate to the page and reset pagination – oh well, this is a good jumping point.

I used the rowindex for a good reason: a good solution for an IR doesn’t really exist, and will always be very much custom coded. You’d actually need a value(or values) by which you could uniquely identify rows. That gives some problems since for example hidden columns are not rendered in the HTML. If it is in column, it could very well be that users can hide or in some way remove the column from the html (don’t display it, apply grouping,…).

---

I’ve edited my example application page to include a way to deal with classic reports too, after viewing Matthew’s own answer. I’ll try to pick it apart a bit.
1) i wouldn’t ‘hide’ my column by reducing the width. Just hide your column using the column attributes and change the type to hidden.
2) you don’t really need a column item, unless you really mean to remember that. But i don’t really see the point of it unless you allow clicking an entire row (as i did in my IR example, but i dismissed that idea for the classic report)
3) (a+b+c) I did this completely different. I think it is a much better way to assign a class to the row element, as this allows much better manipulation and traverse. The $x_RowHighlight function adds a style attribute to the td elements, and i don’t like that. Controlling the style through a class and CSS is much more versatile.
I’d also argue that AJAX is not required here! When you click the link, you can directly set the item value and not go through an ajax call. I’d also argue that this does not need to be a synchronous call (which htmldb_Get is by default), but can be asynchronous as to not make the browser wait for a return (there is none).
Nevertheless, you could require ajax if you want to set it up as in my IR example so that clicking anywhere on a row would select the row.
As for selecting the next row: in my example you’d need to replace the changing of the input item to a click on the link column – shouldn’t be to hard!

---

Performing an async call with htmldb_Get:

var ajaxRequest = new htmldb_Get(null, $v("pFlowId"), "APPLICATION_PROCESS=some_process", $v("pFlowStepId"));
ajaxRequest.addParam("x01","some value"); -- adds a parameter to the request, good for the x## variables
ajaxRequest.add("P1_EMPNO", "some value"); -- adds the key-value to p_args_names en values: page items!
ajaxRequest.getAsync(function(pResponse){
   if(pResponse.readyState==4&&pResponse.status==200){
      //call finished successfully
      console.log(pResponse.responseText);
   };
});