Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Max Gano on Jun 14, 2009 13:38
open dhtmlx forum
toolbar disappears when using the tab key to advance through a txt cell in grid

Hi,

My toolbar is disappearing when I use the tab key to advance through a txt type field in a grid.

I am including sample data and my code with notation for the version of each javascript.

To replicate, double click the first cell in the row to enter it, then use the tab key twice to enter the second field and then the third, both of which are type txt. My experience is that the toolbar disappears with the second click of the tab key as I move from the second to third field.

Much appreciate your help with this. It is killing me with the POC test team.

Thanks,
Max

---- data sample begins here ----

<?xml version="1.0" encoding="UTF-8" ?>
<rows total_count="1" pos="0">
<row id="1244494140322">
<cell><![CDATA[ 1244494140322]]> </cell>
<cell><![CDATA[ agency 1]]> </cell>
<cell><![CDATA[ agency one is a large fuzzy mouse]]></cell>
<cell><![CDATA[ seriously. A rodent, I tell you.]]></cell>
<cell><![CDATA[ 0000-00-00 00:00:00]]></cell>
</row>
</rows>

---- code sample begins here ----

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Explore OONdada Compliance and Audit Accelerator</title>

<link rel="STYLESHEET" type="text/css" href="/ondemand.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx/dhtmlxwindows.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx/dhtmlxlayout.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx/skins/dhtmlxgrid_dhx_blue.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx/skins/dhtmlxwindows_dhx_blue.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx/skins/dhtmlxlayout_dhx_blue.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx/skins/dhtmlxtoolbar_dhx_blue.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx/ext/dhtmlxgrid_pgn_bricks.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx/dhtmlxcalendar.css">

<script src="codebase/dhtmlx/dhtmlxcommon.js" type="text/javascript"></script> <!-- v.2.1 build 90226 -->
<script src="codebase/dhtmlx/dhtmlxwindows.js" type="text/javascript"></script> <!-- v.2.0 build 81107 -->
<script src="codebase/dhtmlx/dhtmlxlayout.js" type="text/javascript"></script> <!-- v.2.0 build 81107 -->
<script src="codebase/dhtmlx/dhtmlxgrid.js" type="text/javascript"></script> <!-- v.2.0 build 81107 -->
<script src="codebase/dhtmlx/dhtmlxgridcell.js" type="text/javascript"></script> <!-- v.2.0 build 81107 -->
<script src="codebase/dhtmlx/dhtmlxtoolbar.js" type="text/javascript"></script> <!-- v.2.0 build 81107 -->
<script src="codebase/dhtmlx/dhtmlxdataprocessor.js" type="text/javascript"></script> <!-- v.2.1 build 90226 -->
<script src="codebase/dhtmlx/dhtmlxcalendar.js" type="text/javascript"></script> <!-- v.1.1 build 81107 -->
<script src="codebase/dhtmlx/ext/dhtmlxgrid_srnd.js" type="text/javascript"></script> <!-- v.2.1 build 90226 -->
<script src="codebase/dhtmlx/ext/dhtmlxgrid_filter.js" type="text/javascript"></script> <!-- v.2.1 build 90226 -->
<script src="codebase/dhtmlx/ext/dhtmlxgrid_drag.js" type="text/javascript"></script> <!-- v.2.0 build 81107 -->
<script src="codebase/dhtmlx/ext/dhtmlxwindows_wmn.js" type="text/javascript"></script> <!-- v.2.0 build 81009 -->
<script src="codebase/dhtmlx/ext/dhtmlxwindows_wtb.js" type="text/javascript"></script> <!-- v.2.0 build 81009 -->
<script src="codebase/dhtmlx/ext_connector/connector.js" type="text/javascript"></script> <!-- no version stamp in script-->
<script src="codebase/dhtmlx/excells/dhtmlxgrid_excell_dhxcalendar.js" type="text/javascript"></script> <!-- //v.2.0 build 81107 -->

<script>
</script>

</head>
<body>
<div id="container">
<div id="parentId" style="position:absolute; width:968px; height:480px;"></div>
</div>

<script>
// main layout of three panels - left = navigatation, upper right = splash/guide screens, lower right = workzone for grid and tree
mainLayout = new dhtmlXLayoutObject("parentId", "3L", "dhx_blue");

mainLayout.cells("a").setWidth(280);
mainLayout.cells("a").setText("Navigation");
mainLayout.cells("b").setHeight(180);
mainLayout.cells("b").hideHeader();
mainLayout.cells("c").hideHeader();

// work zone layout within lower right panel of main layout - left panel for grid, right panel for tree
workZoneLayout = new dhtmlXLayoutObject(mainLayout.cells("c"), "2U");
workZoneLayout.cells("a").hideHeader();
workZoneLayout.cells("b").hideHeader();

// mainLayout.cells("c").collapse(); // do not collapse prior to attaching workZoneLayout
workZoneLayout.cells("b").collapse();

// build grid cell toolbar
myGridToolbar = workZoneLayout.cells("a").attachToolbar();
myGridToolbar.setIconsPath('codebase/dhtmlx/imgs/');
myGridToolbar.attachEvent("onClick", function(id){
if (id == 'insert') {addRow();}
else if (id == 'remove') {removeRow();}
else if (id == 'recover') {recoverRow()}
else if (id == 'examples') {showExamples()}
else if ((myGridToolbar.getListOptionSelected("select_list") != null) && (myGridToolbar.getListOptionSelected("select_list") != "")) {
myGrid.clearAll(false);
// alert(myGridToolbar.getListOptionSelected("select_list"));
myGrid.loadXML("api/trees/generic/connector_grid.php?it="+ myGridToolbar.getListOptionSelected("select_list"));
}
else {}
});

myGridToolbar.addButton("insert","1","Insert Row","plus.gif","plus2.gif");
myGridToolbar.setItemToolTip("insert", "Insert row at bottom of grid");
myGridToolbar.addButton("remove","2","Remove Row","minus.gif","minus2.gif");
myGridToolbar.setItemToolTip("remove", "Remove highlighted row");
myGridToolbar.addButton("examples","3","Show Examples","minus.gif","minus2.gif");
myGridToolbar.setItemToolTip("examples", "Show examples of entries");

// build grid cell
var gridcolumnheader = "ID, Name, Description, Notes, End Date";
var gridcolumnwidths = "50,*,*,*,*";
var gridcolumntypes = "ro,ed,txt,txt,dhxCalendar";
var gridcolumnvisibility = "true,false,false,false,true";

myGrid = workZoneLayout.cells("a").attachGrid();
myGrid.setImagePath('codebase/dhtmlx/imgs/');
myGrid.setHeader(gridcolumnheader);
myGrid.setInitWidths(gridcolumnwidths);
myGrid.setColTypes(gridcolumntypes);
myGrid.setColumnsVisibility(gridcolumnvisibility);
myGrid.setDateFormat("%Y-%m-%d");
myGrid.setSkin("modern");
myGrid.init();
//myGrid.enableSmartRendering(true);

var _bld = "auditagency";
myGrid.loadXML("gridtest.xml");

</script>
</body>
</html>

Answer posted by dhxSupport on Jun 15, 2009 02:52
Unfortunately we cannot reproduce this issue locally. Please try to replace all of attached files from the latest 2.1 version. Standard package you can download here http://dhtmlx.com/docs/download.shtml. 
If issue still occur please send us full example including all files which you are using to initialize components.
Answer posted by Alex (support) on Jun 15, 2009 05:42

Hello, 

the issue is confirmed. We'll send you the fix when it is ready.

Answer posted by Alex (support) on Jun 15, 2009 06:48

The issue will be fixed in the next layout version.

Could you please provide us the information about the doctype that you use ? So, we'll be able to solve the issue specially for this doctype - as in the current version the universal solution will be rather complicated.

Answer posted by Max Gano on Jun 15, 2009 09:13

Great to hear you found it. The doctype we are using is the same as the sample code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Thanks,

Max

Answer posted by Max Gano on Jun 16, 2009 22:35

Hey Guys, just checking in. Will you be able to hook me up with a quick fix for this one? That would be very much appreciated.

And thanks for the great support.


Max

Answer posted by Alex (support) on Jun 17, 2009 02:43

Hello Max, 

we have attached the sample with fixed files: dhtmlxlayout.js, dhtmlxwindows_wtb.js and dhtmlxwindows.js

Attachments (1)
58.zip150.96 Kb
Answer posted by Max Gano on Jun 17, 2009 13:15

Hey, really great response and the initial issue has been resolved. Tabbing no longer kills the toolbar.

There is, however, a new (hopefully trivial) issue that has emerged.

After we applied the QFE patch, a mystery field has appeared immediately to the left of our centered main container div and immediately below our header div. The only other div on the page is the parentID div for the main layout that frames everything else that appears in the app. It appears that the field is somehow associated with dhtmlxwindows.js as it appears immediately after that step of the patch is applied.

The field is active, accepts text entry, and appears to be approxiimately 145px in fixed width. It floats underneath the applications main container div when the browser window is resized.

My hope is that this is simply a hack that someone forgot to remove from th QFE, perhaps related to sizing or something???

Anyway, other than leveraging it somehow for a uniquely located login field, we really don't need it. Anything you can do to make it go away would be greatly appreciated!!!

I am attaching the bug report text and code samples.


Thanks and, again, really great support and response. We really value your efforts as we try to get this POC completed and our site launched. We are working 16 hr days and I can't tell you how much it helps to know that issues with these controls are quickly and reliably resolved. You guys deserve a special place in open source heaven.

Max

 

 

Attachments (1)
mystery_field_dhtmlx_qfe_tab_breaks_toolbar.zip151.10 Kb
Answer posted by Max Gano on Jun 17, 2009 13:28

Also attaching the full QFE test page that we used to isolate the behavior.

 

Thx

Attachments (1)
qfe-tab-breaks-toolbar.php2.24 Kb
Answer posted by Alex (support) on Jun 18, 2009 06:02

Hello, 

the issue wasn't reproduced locally - please, take a look at the attached sample. 

The only problem, that we have got, is that in Opera layout isn't shown with position:absolute;

So, we have replaced it with relative:

<div id="parentId" style="position:relative; width:968px; height:480px;"></div>

Attachments (1)
58_new.zip139.57 Kb
Answer posted by Max Gano on Jun 19, 2009 11:57

Hey Alex, just to let you know, we have closed this ticket. We have updated all javascript to 2.1 today, eliminating the previous mix of versions, and the problem of the mystery field went away. Much appreciate your team putting the QFE together so quickly. This was a major issue with our POC users and they are now much happier.

Thanks again,

Max