How to alert onClick on different LIST columns, in attached sample?

[RichCPT]

Okay, I'm still wanting to know how to get the "onclick" event to fire for the columns in this UX LIST I am working on.

The attached sample works on Windows but it will not work on my Android Nook reader. I assume it won't work on Apple iPad either, since in my real application (which I derived this basic sample from) it does not work on iPad.

It has to be a basic requirement that a mobile app can respond to someone clicking on a particular column or not? Right?

In my app I want a popup window to give more detail about the specific row and column the user clicked on in the UX.

In the attached example, the 2nd through 4th columns are set to RawData and they emit this:

[HTML]<span  onclick="{dialog.ComponentName}_CellClicked('{Col?}');">{Col?}</span>[/HTML]

(where ? = 1,2, or 3, depending on column)

The Javascript is defined as:

function {dialog.ComponentName}_CellClicked(ID) {
	alert('You clicked on cell id: ' + ID );
}

I know my code for the span and js function is correct because the test link, labeled "here", in the static control above the LIST works just fine.

P.S. The dropdown control off to the side is to see if the down-arrow displays properly on ipad. Can anyone tell me if using the iOS makes the down-arrow display on the ipad for this control. I don't have my own iPad for testing yet. The other day someone tested some of my pages out on the ipad when I had the entire project set to GrBlue style and none of the down-arrows displayed on the normal dropdown controls. The magnifying glass displayed okay for Textboxes coded with a Grid Lookup.

[Clipper87]

Re: How to alert onClick on different LIST columns, in attached sample?

I think that what happens is that when you use your finger to "click" on the column the row event for the list fires and as that is not defined nothing happens. On a desktop browser your function only fires if you click on the character itself; if you click just a few pixels away from the character nothing will happen either. I played around by padding the data to no avail unfortunately. Interesting issue.

[RichCPT]

Re: How to alert onClick on different LIST columns, in attached sample?

Thanks for looking at it Frank. Your reminder that only the text is clickable, led me to search and find something to try: http://jsfiddle.net/mrivasa/TK69d/

I will post back my results of trying the above, but applied to a SPAN not a DIV.

[Clipper87]

Re: How to alert onClick on different LIST columns, in attached sample?

I'd be curious if the "this" object doesn't have a property to tell you what column you were clicking?

[RichCPT]

Re: How to alert onClick on different LIST columns, in attached sample?

The problem is my code above does not follow the Alpha conventions for wiring up an event to a LIST, or for wiring up events for a UX! See following videos:
UXL_V12--36
UX_V12--58

Now, knowing that, how do I wire up the event? I'm not quite sure.

[Davidk]

Re: How to alert onClick on different LIST columns, in attached sample?

You need to stop event propagation in the List control... and... Alpha, very nicely, gives us the tools to do this. For example, on column 3...

<span ontouchstart="$e.stopPropagation(event);" onclick="$e.stopPropagation(event);{dialog.ComponentName}_CellClicked('{Col3}');">{Col3}</span>

Your individual cells within each row will now fire your function.

[RichCPT]

Re: How to alert onClick on different LIST columns, in attached sample?

Thanks David. Your code does make my sample work on Android. Of course preventing event propagation like that disables the ability for the highlight bar to move to the clicked row and the row indicator icon also does not move to selected row. At the moment I probably would not need to have those two visual indicators, so I might look into turning them off.

I think the best solution, though, would be to wire up the JavaScript for the custom control using the same techniques alpha uses for the Dynamic Image, Button and Hyperlink added-in controls.

It would be nice if the designer allowed this, but the complication is how to indicate to the designer what element in the custom control to hook up to the event chain. It could easily hook up the outer most SPAN element, but that might not be what the programmer wants. Like in my case I would like a gap between clickable regions in the list. So, I'd have an inner element that is clickable and an outer element would provide a dead-zone around it. Another example custom control would be to display an image and then overlay hotspots of text.