Hello,
Although not written for mobile devices, it seems some users insist on accessing our website via a mobile device, and now we must support it. And thus I have noticed the following behavior.
I have a webtree on a content panel that handles site navigation. Nothing too fancy, but the tree cannot be reached on a BlackBerry mobile device. I have the TabIndex set, and it works fine on iPhone, and normal web browser, but not BlackBerry Curve. Using the BlackBerry navigation I can hit controls before (menu) and after (links), but not the tree itself. The tree initially displays with two root nodes and expands from there.
Has anyone experienced this behavior, or lack thereof?
Thanks in advance,
Dan
PS - as I said, nothing too fancy with the tree - here's the layout:
<ignav:UltraWebTree ID="NavTree" runat="server" ImageDirectory="/images/" Font-Names="Microsoft Sans Serif" Font-Size="10pt" Indentation="20" LoadOnDemand="ManualSmartCallbacks" OnDataBinding="NavTree_DataBinding" DataKeyOnClient="True" Width="100%" OnDemandLoad="NavTree_DemandLoad" ExpandAnimation="None" Section508Compliant="True" TabIndex="10"> <IslandStyle> <Margin Top="5px" /> </IslandStyle> <Levels> <ignav:Level Index="0" /> </Levels> <NodeStyle BackColor="White" Height="15px" /> <NodePaddings Bottom="10px" /> <ClientSideEvents InitializeTree="NavTree_InitializeTree" BeforeNodeSelectionChange="NavTree_BeforeNodeSelectionChange" AfterNodeSelectionChange="NavTree_AfterNodeSelectionChange" /> <AutoPostBackFlags NodeChecked="False" NodeCollapsed="False" NodeDropped="False" NodeExpanded="False" /> <Padding Bottom="10px" /> <HoverNodeStyle Cursor="Hand" /> <SelectedNodeStyle BackColor="Transparent" /> </ignav:UltraWebTree>
Great to hear that the treeview is working on some mobile platforms, that is good news. We actually never claimed support for mobile devices (although we might in the future).
The TabIndex problem - I have seen this in some browsers. The problem is that the treeview is a <div> element and some browsers (and I suppose the built in Blackberry browser) do not support focus on <div> elements (hence, both TabIndex and AccessKey will not work there).
The solution is probably to have a hidden input element (say textbox) - you can hide it with Css, e.g.
<input type="textbox" style="position:absolute;top:-100px; left: -100px" onfocus="focusOnTree()" />
Then, in the focusOnTree() client side function you can get the CSOM instance of the treeview and select the first node for example.
This is just a suggestion, hopefully it will work for you.
Thanks Rumen (and thanks for the quick reply),
I'll give this a shot and post back with my results. Hopefully this will work for me. I agree, it is probably the browser utilized by the BB. We'll see if this does the trick.
Best regards,
Unfortunately this did not work for me. Here is my CSOM event:
function focusOnTree(){ var tree = igtree_getTreeById(gTreeId); var Nodes = tree.getNodes(); Nodes[0].setSelected(true); return false;
On a "normal" browser, the first node in the tree control is now selected. However, on the BlackBerry, the focus jumps to the first control after the tree. And scrolling up to the tree still results in the focus jumping over the tree and never stopping on the nodes. So this does not help me after all.
Any other ideas? My only back-up plan at this point is to do a lot of rewriting to duplicate tree view functionality using a series of drop-down lists.
Thanks,Dan
The code you have written seems perfectly good and the fact that it works in normal browsers is good. By the way, what is the TabIndex of the hidden input control? Can you please double check it is the correct index in the tabindex line of controls?
So my guess here is that the BlackBerry device is limited in some way, e.g. does not interpret javascript to the full javascript ECMA specification, or there is something else... is there a BlackBerry browser emulator where you can run this and debug it locally? Maybe this will provide additional clues.