|
|
Rank: Newbie
Groups: Member
Joined: 5/25/2010
Posts: 4
|
I use EO.Web Menu control with keyboard navigation feature to navigate between menu items. At the same page there is a ASP.Net GridView Control, Which also uses arrow key to navigate between rows. When a user navigates between the menu items by arrow key, this event bubble up to the GridView control, so it's rows are navigated too, follows up/down with the menu item.
What should I do to avoid this event from the Menu bubble up to other controls?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,071
|
Hi, The event is bubbled up from your Grid to the Menu, not from the Menu to your Grid. So you must detect whether the menu is active in your keydown event handler and not to proceed if the menu is active. In order to detect whether the menu is active, you can call the menu's client side API to check whether any sub menu is visible. The code will be something like this:
Code: JavaScript
function isMenuActive(menuId)
{
//Get the menu object
var menu = eo_GetObject(menuId);
//Look through all top level items
var topGroup = menu.getTopGroup();
for (var i = 0; i < topGroup.getItemCount(); i++)
{
//The menu is active when any sub menu is visible
var item = topGroup.getItemByIndex(i);
var subMenu = item.getSubMenu();
if (subMenu.isVisible())
return true;
}
return false;
}
You will also want to take a look of our client side API reference here: http://doc.essentialobjects.com/library/1/clientapi_howto.aspxHope this helps. Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 5/25/2010
Posts: 4
|
Maybe I did not make mig selv clearly.
What I need is to use shortcut to activate menu for example File, then navigate to its submenus. The scenario is after the File menu is activated, when I press down arrow key, the first submenu is selected as expected, but the first row in the GridView is selected too. The event comes from Menu, not from the GridView. I think the event bubble up from Menu to Gridview.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,071
|
Hi, The menu captures event on the document level. It does not caputre event on the DOM element level. So there is no such thing as "the event comes from the Menu". The menu is not the event source because it sits at the very end of the event chain. You will need to capture the event on the source level and check whether the menu is active and ignore the event (not moving your GridView active row) if the menu is active. The menu is considered active when: 1. A sub menu is visible, or 2. A top level item is highlighted; The previous code we provided should cover case #1. What you just described is case #2. Unfortunately there is no public interface on the menu for you to detect case #2. We can add a method to check both case #1 and case #2 (for example, adding an isActive method on the menu control) but you will still need to call that method from your code. In short, you must change your keydown handling code. The code can be something like this:
Code: JavaScript
function your_grid_key_down_handler()
{
//Check whether the menu is active
var menu = eo_GetObject("Menu1");
if (!menu.isActive())
{
//your original Grid key down processing code here....
.....
}
}
Please let us know if this makes sense to you and whether you would like us to provide a build with isActive method for you. Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 5/25/2010
Posts: 4
|
Thanks for your promt answer. I think we agree that keydown event is captured first in your
keydown event handler, then bubble up to my keydown event handler. I understand now your suggestion for the problem.
I don't know weather it's possible for you to cancel the event bubbling further up at the end of your event handler, so it doesn't bubble up to affect the other controls.
Besides the ASP.NET Gridview control, I use also a treeview control bought from another company, which provides user to navigate between the tree nodes by arrow keys. I can't do anything about keydown handling for this treeview control.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,071
|
YIC wrote:I think we agree that keydown event is captured first in your
keydown event handler, then bubble up to my keydown event handler. No. We did not say that. We said exactly the opposite more than once. This will the last time we repeat it: The event is not bubbled from our handler to your handler. In fact the event reached your handler before it reaches our handler. We only receive the event after you have already recevied and processed the event. So it does not matter what we do in our handler. The only place that can make a difference is in your handler. If you still can't understand this, there is nothing more we can help you on this topic. YIC wrote:I understand now your suggestion for the problem.
I don't know weather it's possible for you to cancel the event bubbling further up at the end of your event handler, so it doesn't bubble up to affect the other controls. I do not believe you understood what we told you given your previous comment. Please read our comment above if you are still confused. YIC wrote:Besides the ASP.NET Gridview control, I use also a treeview control bought from another company, which provides user to navigate between the tree nodes by arrow keys. I can't do anything about keydown handling for this treeview control. I am not sure what to suggest because you keep thinking going left when we keep telling you going left does not work and you can only go to the right. So there is pratically nothing we can do in this case. You can use our TreeView and we can make our TreeView and our Menu to work well together. Otherwise your only option is to change your handler code. If you can not do that, then there will be no solution to your problem. Thanks
|
|
Rank: Newbie
Groups: Member
Joined: 5/25/2010
Posts: 4
|
Hi, My application will only run in Moicrosoft Internet Explorer Browser. I am talking about event bubbling in IE Model. In IE the event is bubbled upwards, the event handler of element2 fires first, the event handler of element1 fires last.
^ element1 | ---------------------- | element2 | ------------------------- | Event BUBBLING
Her is a link about event order: http://www.quirksmode.org/js/events_order.html
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,071
|
Hi,
We have already told you that we capture event on the document level. We do not capture event on the element level. Event bubbles from child element (element2 in your diagram) to parent element (element1 in your diagram) then finally to the document (not shown in your diagram). So it reaches element (maybe where your handler is) first, then reaches the document (where our handler is). The document object is at the end of the event chain.
Please do not argue about this issue with us any more. We know exactly what you are talking about from the very begining but you still did not understand what we told you after we explained to you over and over again. If you are still confused, we suggest you to find someone else to explain it to you. We do not know how to explain it better.
Next time please take our answer seriously. We know very clearly what we are talking about but you do not. If you continue to question our reply please take your questions elsewhere, otherwise it would be a complete waste of time for both of us because you only believe what's in your own mind and is not ready to listen anybody else.
This issue is now closed.
Thanks
|
|