Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
140
UltraWebTree Focus Rectangle
posted

Hello,

I have a Master Page with an UltraWebTree menu.  The tree takes up the entire left side of the page.  When a menu item is clicked, the entire control's focus rectangle appears.  Its ugly and I want to get rid of it.

I've tried to jimmy it using client side onfocus="blur();" and onfocus="img2.focus();"... to no avail.

Any suggestions?

Thanks,
BruceH

  • 28464
    posted

    Hello Bruce,

    Thanks for writing. Indeed, I was able to reproduce that - it only occurs in FireFox, right? So the problem is, FireFox in general places this frame for all elements that support focus/tabbing/accesskey/keyboard navigation. You can reproduce that even for a simple <div> like that:

     <div id="div2" style="width:200px;height:200px" tabindex="-1">
            fsdfdsfsdds
            <br />
            fdsfdsfs
            <br />
        </div>

    The problem with the treeview is that it always sets tabindex on its main div, hence the focus rectangle. I could not find a property that could switch it off. I however, played a bit with your idea to call blur immediately after focus, and I must say with some pretty good results - this removed the frame for me. Here is my code:

     <script language="javascript">
               
                function initTree(id)
                {
                    var tree = igtree_getTreeById(id);
                    tree.Element.onfocus = function()
                    {
                        this.blur();
                    }
                   
                   
                }
               
                </script>
     
                <ignav:UltraWebTree runat="server" ID="TreeView1">
                    <Nodes>
                        <ignav:Node Text="Mode 1">
                        </ignav:Node>
                        <ignav:Node Text="Mode 1">
                        </ignav:Node>
                        <ignav:Node Text="Mode 1">
                            <Nodes>
                                <ignav:Node Text="Node 1.1">
                                </ignav:Node>
                            </Nodes>
                        </ignav:Node>
                    </Nodes>
                    <ClientSideEvents InitializeTree="initTree"/>
                </ignav:UltraWebTree>

    The idea is to get the root Html element of the tree on init and attach a handler for focus that always calls blur. I've tested a bit and this does not seem to have any side effects on my simple setup (but I cannot guarantee that for more complex ones).

    Hope this helps.