0

I've searched stackoverflow for an answer to this question, but I couldn't find one (or I didn't understand the answers well enough to know that my question has been answered, so please accept my apologies if the later is the case).

You can see an example of the site that I'm working on at http://www.bcgsc.ca/downloads/bdavis/tempsite/.

What I would like to be able to do is have an onHover or onClick (or ideally both, each resulting in a different action) for the row names. You can see an example of this functionality by looking at the column headers. If you allow your mouse cursor to hover on the column header H3K4me3 (for example) it will bring up a brief description of what that is, and if you click on it it will open up a web page where I will place content in greater depth about it. I would like to be able to recreate this functionality for the rows headers (e.g. CD19+ cell).

At the moment, the website populates the grid by reading a data.xml file which specifies enough information to display the values contained in the grid, and provide the information to the back end of the system so that when a user clicks on 'View in UCSC browser' that the correct information is transmitted. A CDATA tag is used in the data.xml file, a brief example of which is pasted below.

<cell><![CDATA[ Blood]]></cell>

The way I had conceived of achieving this functionality was to place some javascript + html within the CDATA object, but obviously that won't work because it's CDATA, so it's not parsed, but replacing CDATA with PCDATA causes the backend to break (I don't know why) and the table doesn't get filled in at all. I've even tried simply replacing the entire CDATA snippet with just an stuff, but that's not processed by the web browser either, I imagine that's because of the way jqgrid is transmitting the data.

Note, that at the moment when you hover over the row names, you can see the contents of that cell. So a reasonable strategy would for the onHover functionality be to dynamically change the title for that cell, or perhaps modify jqgrid in some way to allow it to set the cell contents to something different from the title attribute.

An ideal solution would allow me to have both .hover functionality and .onClick style functionality, but I would be satisfied if I could only get the onClick to work. That is definitely the more important function. At the moment the cell does not have a unique id, but the row does.

So, can anyone help me or provide some directions to look in.

Thanks, Brad Davis

Brad Davis
  • 1,063
  • 3
  • 18
  • 38
  • A note to anyone looking at the website and finding it doesn't work, that's because that's my working/test copy of the site, so as I do things I tend to break it. My apologies if I've wasted your time. – Brad Davis Sep 17 '14 at 16:09

1 Answers1

1

Every cell of the grid are represented by <td> HTML element. The title attribute of the cell will be set by default to the content of the cell. Using cellattr callback you can construct another static value for the tooltip text. I named the value as static because it will be saved as the attibute in the cell. On the other side you can construct the value based on other cells of the same row. The answer provides the corresponding code example with the demo.

jqGrid supports onCellSelect and beforeSelectRow which will be called if the user click on a cell of the grid. One can use the last parameter (e parameter in the documentation) of the callback to get the column number or the column name of the clicked cell. The callbacks get additionally rowid as a parameter. So one can use getCell, getRowData or getLocalRow to access to the data of other columns of the same row. See the answer for example which shows how to get the column name on the clicked cell (cm[iCol].name is the name of the column in the code fragment).

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you for the help, I appreciate it. I'm going to take a look at the links you provided and try to make sense out of it. I only started working with javascript two days ago, so there's quite a lot about it that I don't understand yet. – Brad Davis Sep 17 '14 at 15:36
  • @BradDavis: You are welcome! If you are beginner I can recommend you more examine *working demo examples*, to debug it in Developer Tools (use F12 to start) and transfer code fragments in your code. [The demo](http://www.ok-soft-gmbh.com/jqGrid/AbhishekSimon13.htm) created for [the answer](http://stackoverflow.com/a/13765086/315935) contains an example of the code which use `beforeSelectRow` callback too. – Oleg Sep 17 '14 at 15:42
  • Hello again @oleg, the links you provided are illustrative and helpful. I'm using a Mac, and using 'F12' doesn't start the Developer tools but I've figured out how to turn them on anyway. So I can change the javascript that is located within the index.html file in the Developer tools, and the changes will be reflected immediately? – Brad Davis Sep 17 '14 at 16:34
  • I am trying to add additional details, but when I go to edit the original post, it refuses to save it I get a 'cannot save' error. – Brad Davis Sep 17 '14 at 16:58
  • @BradDavis: If you want "to play" with the demo you can use JSFiddle for example. Try the demo: http://jsfiddle.net/OlegKi/t9L0b2sy/. It contains `cellattr` the same as from the first demo which I recommended you. You can see the tooltips on the cells of the first column. You can change any code in JSFiddle and execute once more. – Oleg Sep 17 '14 at 17:14
  • While I may be prone to hyperbole, I still think that I'd anoint you as St. Oleg of JQuery & Javascript. – Brad Davis Sep 17 '14 at 18:27
  • @BradDavis: All what you wrote seems to me *new question*. It could be *very important to know details of your implementation*, for example whether you use `loadonce: true` or not. One can set `data-*` attribute inside of `rowattr` callback (see [the answer](http://stackoverflow.com/a/18313154/315935)), one can fill `userData` inside of `beforeProcessing` (like in [the answer](http://stackoverflow.com/a/14205263/315935)) etc. In any way all the ways are far from your original question. – Oleg Sep 19 '14 at 16:26
  • Hi Oleg,I erased that comment and started an entirely new question because I realized it was quite different from the original question. Anyway, I'll look through the examples you've provided and see if I can make headway. Yes, loadonce: true should be set. – Brad Davis Sep 19 '14 at 16:35