DHTMLX
Start Building Professional
Start Building Professional
Web Apps Today
| Categories | Question details Back To List | ||||||||||||||||||||||||||
Context menu and tabs I have several grids in tabbar (one per tab). And I have context menu attached to a grid in one tab. If I open that menu and then click anywhere in the same grid, it closes, which is what I would expect. But if I go to another tab and click grid there, I still have the menu from the previous grid! How can I close context window when user clicks on another tab? Thanks!! Answer posted by Support on Jun 29, 2009 07:47 You can add the next code tabbar.attachEvent("onSelect",function(){ context_menuN.hideContextMenu(); return true; }); with it, each time, when active tab will be changed in tabbar - context menu will be closed. Answer posted by Kathy on Jun 29, 2009 08:26 Thank you, worked like a charm! Could you also tell me how can I block the browser default context menu from popping up? Sometime, if I multiclick, I get both grid's context menu and browser context menu (FF and IE) Answer posted by Support on Jun 29, 2009 09:05 You can try to use dhtmlxEvent(tabbar.entBox,"contextmenu",function(e){ (e||event).cancelBubble = true; return false; }) It will block native content menu for all tabbar's zone. If necessary , a separate patch for the grid can be provided which fully block native context menu for any grid, if custom context menu was attached ( this fix will be included in next version of dhtmlxgrid ) Answer posted by Kathy on Jun 29, 2009 09:21 Thank you, it worked. Maybe you could help with 2 more questions - 1) looks like if I drag row to below last row in the grid, it doesn't drop as new last, but rather get's "stuck" to cursor and if I keep clicking, eventually breaks with error in dhtmlxcommon. Is there a way to fix that? 2) also looks like the legend for the row that's being dragged is behind the grid and tabbar. I can only see it when moving cursor outside. Is there a fix for that? Answer posted by Alex (support) on Jun 30, 2009 01:13 Hello, could you please provide the code that demonstrates how tabbar and grid are initialized. Answer posted by Kathy on Jun 30, 2009 05:53 Below is one of my test samples. I played with initializing grid first, tabbar first, but it still has these issues. To test: 1. try dragging row, observe that legend is behind the tabbar. 2. Start dragging a row and release button below the grid. Move mouse back over the grid - observe the row is still dragging with the mouse. Try dropping it on any row - observe it doesn't drop. Try dropping it to the side of the grid (outside grid rectangle) - breaks with error in common. Please, let me know if there are any fixex / workarounds available. <title>Tester</title> <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxgrid.css"> <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxtabbar.css"> <script src="../codebase/dhtmlxcommon.js"></script> <script src="../codebase/dhtmlxgrid.js"></script> <script src="../codebase/dhtmlxgridcell.js"></script> <script src="../codebase/ext/dhtmlxgrid_drag.js"></script> <script src="../codebase/dhtmlxdataprocessor.js"></script> <script src="../codebase/dhtmlxdataprocessor_debug.js"></script> <script src="../codebase/dhtmlxtabbar.js"></script> <script src="../codebase/dhtmlxtabbar_start.js"></script> <script> function doInit(){ var dgrid = new dhtmlXGridObject('devGrid'); dgrid.setImagePath("../codebase/imgs/"); dgrid.setHeader("Device Name"); dgrid.setInitWidths("*"); dgrid.setColAlign("left"); dgrid.setSkin("light"); dgrid.setColSorting("na"); dgrid.setColTypes("ed"); dgrid.enableDragAndDrop(true); dgrid.init(); dgrid.loadXML("pbconfigfeeder.jsp?type=devices"); var dp = new dataProcessor("pbconfigfeeder.jsp"); dp.setUpdateMode("cell", true); dp.init(dgrid); tabbar=new dhtmlXTabBar("tabBar","top"); tabbar.setImagePath("../codebase/imgs/"); tabbar.setSize("600px", "600px", true); tabbar.enableAutoSize(true,true); tabbar.addTab("devices","Devices","100px"); tabbar.setContent("devices","devGrid"); tabbar.setTabActive("devices"); } </script> <body onload="doInit()"> <div id="tabBar"></div> <div id="devGrid" style="width:600px;height:600px;"></div> </body> Answer posted by Alex (support) on Jun 30, 2009 06:11 Hello, the issue wasn't reproduced locally. The sample is attached Attachments (1)
Answer posted by Kathy on Jun 30, 2009 06:22 Try this with Fire Fox, please. IE seems to be working. I tested with FF 3.0.11 and it doesn't work Answer posted by Alex (support) on Jun 30, 2009 06:50 please, try to use attached dhtmlxgrid.css. It has solved the issue in FF Attachments (1)
Answer posted by Kathy on Jun 30, 2009 06:59 Thank you, it fixed the legend, which is nice. But what's worse for me is that the drag still has problem. Try testing it on my sample, please. Maybe having scroll bar is an issue? Answer posted by Alex (support) on Jun 30, 2009 07:08 >> Try testing it on my sample, please. Maybe having scroll bar is an issue? The sample isn't attached ...What sample do you mean ? Answer posted by Kathy on Jun 30, 2009 08:28 I'm attaching both HTML and XML that I used. The description of issue again is: - if you start dragging row and drag mouse BELOW the grid, after you return mouse to grid the row is still glued to cursor and you can not drop it anymore. The only way to un-glue that row is now click TO THE RIGHT of the grid, and this breaks with exception in dhtmlxcommon. Please, let me know if you can replicate, and what the fix is Attachments (2)
Answer posted by Alex (support) on Jun 30, 2009 08:46 Try to add following style to avoid this issue: <style> Answer posted by Kathy on Jun 30, 2009 08:51 THANK YOU!! Worked like a charm!!! :) |
