For compatibility with mobile browsers, I want to add an editButton to my grid’s toolbar that triggers editing of the selected cell, just the same way double-clicking on the cell does. (Mobile browsers generally won’t generate a double-click.)
But editCell won’t work in this context. I can see that the editCell event is being triggered by inserting an alert line immediately following the editCell() event. The cell goes into edit mode… right up until I cancel the alert. Then, boom, the cell returns to normal mode.
Presumably, this is because a toolbar button bubbles up its click event (which it shouldn’t, being part of a grid), thus closing the cell’s edit mode. Is there a way around this–for example, a way to cancel the toolbar button’s bubble? Or some other clever workaround?
visits_toolbar.attachEvent("onClick", function(id){
if (id=='btn_VisitsEdit'){
visits_grid.editCell();
alert("editCell clicked.");
});
});
Unfortunately, your suggestion did not work. But that may be because I’m not putting ‘return true;’ in the right place.
I gave you a shortened version of the actual code. Here’s the real code for the .attachEvent function, with ‘return true;’ where I think it’s supposed to go per your suggestion. If so, it did not fix the problem.
Tell me if ‘return true;’ is supposed to go somewhere else in the function, or if you have another idea. (I’m using DHTMLX 3.0 Standard edition build 110713, if that makes any difference.)
Thanks!
visits_toolbar.attachEvent("onClick", function(id){
if (id=='btn_VisitsAdd'){
dsVisits.add({ //using moment() javascript code
VisitMDY:moment().format("MM/DD/YYYY"),
idRestaurants:restaurant_grid.getSelectedRowId()
});
}
else if (id=='btn_VisitsDel'){
if (confirm("Delete the " + detail_form.getItemValue("Name") + ": " + visits_grid.cells(visits_grid.getSelectedId(),0).getValue() + " visit?")){
var selectedItem = visits_grid.getSelectedRowId();
var selectedRow = visits_grid.getRowIndex(selectedItem);
dsVisits.remove(selectedItem);
if(selectedRow < (visits_grid.getRowsNum())){
visits_grid.selectRow(selectedRow,true);
}
else{
visits_grid.selectRow(selectedRow-1,true);
};
}
}
else if (id=='btn_VisitsEdit'){
visits_grid.editCell();
//alert("editCell clicked.");
}
dpVisits.attachEvent("onAfterUpdate", function(){
visits_grid.selectRow(0,true);
var selVisitDate=visits_grid.cells().getValue();
restaurant_grid.cells(restaurant_grid.getSelectedId(),5).setValue(selVisitDate);
});
return true; //<-- IS THIS WHERE IT GOES?
});
I’m sorry for misleading you.
There is no needd to add “return true” to onclick() event of the dhtmlxToolbar.
For your issue - please, try to call seditCell() method with a timeout.
For example:
else if (id=='btn_VisitsEdit'){
setTimeout("visits_grid.editCell();",10);
//alert("editCell clicked.");
}
This should help to escape the issue.
I understand why this should work, but it does not. I tried several different setTimeout values for triggering editCell(), up to 3000, but nothing happens at all, in IE8 or Firefox.
Sure. Since a couple of friends and I are currently the only users, I have moved my development version with the edit button onto the production server. http://www.timcurran.com/restaurants/
Please give it a try. There have been no changes to your DHTMLX codebase.
I followed your model, but the separate function is not being called at all by setTimeout.
[code] else if (id==‘btn_VisitsEdit’){ //Bug? Calendar eXcell won’t stay open as click bubbles up
setTimeout(‘editVisitsCell()’,10);
}
…
function editVisitsCell(){
visits_grid.editCell();
alert("editCell clicked.") //Test line proves editCell is being executed
};
[/code]
In this code, the alert window should at least pop up… but it does not. On the other hand, if I put the alert function directly into setTimeout–setTimeout(‘alert(“Timeout alert here!”)’,10)–the alert does pop up. I believe I followed your model exactly… so how could the alert not appear, at least?
Seems like the changes are not reflected in the provided link to your demo.
The following changes made a trick for me:
window.onload = function(){
...
else if (id=='btn_VisitsEdit'){ //Bug? Calendar eXcell won't stay open as click bubbles up
setTimeout('foo()',10);
...
}
function foo(){
visits_grid.editCell()
}
in that case calendar opens well. If issue still occurs - please, provide an actual link, where the issue can be reconstructed.
The issue that visits_grid is a local variable of onload function. Please, try to define visits_grid as a global variable:
[code]var visits_grid
function editVisitsCell(){
visits_grid.editCell();
alert(“editCell clicked.”) //Test line proves editCell is being executed
};
window.onload = function(){
…
else if (id==‘btn_VisitsEdit’){ //Bug? Calendar eXcell won’t stay open as click bubbles up
setTimeout(‘editVisitsCell()’,10);
}
…
}[/code]
FYI, here are all the codebase calls at the top of my script (css calls omitted), in order. Is there something missing? Does the order need to be changed?
<script src="codebase/dhtmlx.js" type="text/javascript"></script>
<script src="codebase/dhtmlxform.js" type="text/javascript"></script> <?--include this separately--?>
<script src="codebase/dhtmlxform_item_combo.js" type="text/javascript"></script> <?--include this separately--?>
<script src="codebase/dhtmlxcombo.js" type="text/javascript"></script> <?--include this separately--?>
<script src="codebase/datastore.js" type="text/javascript"></script> <?--include this separately--?>
No, the editCell method works correctly when it’s followed by the alert(), which temporarily halts event bubbling. editCell is not the problem.
The problem is your suggestion to just declare var visits_grid. In order for visits_grid to have the editCell method, it has to be declared as a dhtmlx object. But in this case, visits_grid is within a layout cell, which can’t be declared before window.onload. So around and around we go.
I don’t see how setTimeout can be made to work, if it has to trigger to a function that acts on a dhtmlx object declared before window.onload. It seems like both window.onload and editVisitsCell() have to come first, which is logically impossible.
in fact, the issue is that you have left visits_grid as a local variable of the on window.onload function.
window.onload = function(){
...
var visits_grid = visits_cell.attachGrid();
// try to remove it with:
// visits_grid = visits_cell.attachGrid();
// and everything wiil work fine
...
}
Sorry I did not respond for a while… I was on holiday.
I left in the line
var visits_grid = visits_cell.attachGrid();
because removing it as you suggest completely disables visits_grid.
Without the line, visits_grid is never told where it is supposed to appear on the form (visits_cell = layout.cells(‘c’) ). And because visits_grid depends on visits_cell which depends on layout, it simply cannot be put outside the window.onload. Please see my previous message for details.
Since I need a fully functional version of my web app, I have opened a “dev” version for you to look at (which is what I should have done from the start).
Here’s what I think you asked me to do. As you can see, it doesn’t work at all.