Add Row and Focus Into the Row

[Anonymous]

When I call


tblGrid.cellByIndex(0, 0);


I get the javascript error _childIndexes is null or not an object

[dhxSupport]

Please contact support@dhtmlx.com and provide sample where we can reproduce this issue.

[C. Bernstein]

Can you please explain why we need to use cancelBubble?  Exactly what event isn't getting/is getting fired that is making things not work as they should?  Is the addRow() or selectCell() relying on an onClick event?  I am having trouble finding anything in the grid documentation.


Is the following happening?


"I think the tableGrid.selectCell() will not work unless the tableGrid is in focus. Normally when you click on a button (like Add Local Row) the grid will get an onblur event (when it loses focus and the button gets focus). I think when you add the cancelBubble it prevents the onblur event from happening. "


 

[Alex V. Tech Support]

Hello,


grid editor is always closed by click on the page - this is correct behavior. Please, try to open any grid sample, open grid editor and click somewhere - the editor is closed.


The same is for button click. You click on button - the editor is closed.


One more experiment - try to call selectCell method without click, for example, after xml loading:


grid.loadXML("some.xml",function(){


grid.selectCell(1, 0, false, false, true, true);


})


The editor will be opened.


So, you need to use cancelBubble in order to not to close editor when button is clicked.

[Anonymous]

So the opening of the grid for editing is an onClick event?

[Alex V. Tech Support]

In order to edit grid you should double click on the necessary cell.


I whote in the previous answer that if the cell editor is opened, click somewhere on the page closes this editor.

[Anonymous]

So closing the grid for editing is an onClick event which gets fired when we click the button to add the row?

[Alex V. Tech Support]

The editor is closed when you click on the page (document body). If bubbling is not canceled for button onclick, the editor is closed when you click the button.

[grace1123]

Hi,

I searched the forum and found this.

I have the same problem, except the onClick event is from a tool bar. The one in context menu works very well, but the one from the toolbar doesn't have the first cell of the newly added row shown as editable state.

Can anyone help?

function doOnLoad() {

menu_list = new dhtmlXMenuObject();
menu_list.setIconsPath("<?php echo $dhtml_path;?>/dhtmlxMenu/samples/common/imgs/");
menu_list.renderAsContextMenu();
menu_list.addNewChild(menu_list.topId, 0, "new", "New", false, "new.gif");
menu_list.addNewChild(menu_list.topId, 1, "delete", "Delete", false, "close.gif");
menu_list.attachEvent("onClick", function(id, zoneId) {
switch (id) {
case 'new':
if (dhxGrid_list.getSelectedRowId() == null) {
rowIndex = 0;
}
else {
rowIndex = dhxGrid_list.getRowIndex(dhxGrid_list.getSelectedRowId());
}
dhxGrid_list.addRow(dhxGrid_list.uid(),["","","","Edmonton","Alberta","","",""], rowIndex);
dhxGrid_list.selectRow(rowIndex);
dhxGrid_list.selectCell(rowIndex,0, true, false, true);
//dhxGrid_list.editCell();
break;
case 'delete':
dhxGrid_list.deleteSelectedRows();
break;
};
});


dhxLayout_list = new dhtmlXLayoutObject("list_table", "1C");
dhxLayout_list.cells("a").hideHeader();
dhxLayout_list.cells("a").setHeight(400);
dhxGrid_list = dhxLayout_list.cells("a").attachGrid();
dhxGrid_list.setColumnIds("first_name, last_name, address, city, province, postal_code, phone_number, type_of_person");
dhxGrid_list.setHeader("First Name, Last Name, Address, City, Province, Postal Code, Phone Number, Type of Person");
dhxGrid_list.attachHeader("#text_filter_inc,#text_filter_inc,#text_filter_inc,#select_filter,#select_filter,#text_filter_inc,#text_filter_inc,#select_filter");
dhxGrid_list.setInitWidths("*,*,*,*,*,*,*,*,*");
dhxGrid_list.enableResizing("true,true,true,true,true,true,true,true");
dhxGrid_list.setColAlign("center,center,left,center,center,center,right, center");
dhxGrid_list.setColTypes("ed,ed,ed,ed,coro,ed,ed,coro");
dhxGrid_list.setColSorting("str,str,str,str,str,str,str,str");

var combo1 = dhxGrid_list.getCombo(7);

<?php

foreach ($type_of_person as $pabbr=>$pname) {
printf("combo1.put('%s', '%s');", $pname, $pname);
}
?>

var combo2 = dhxGrid_list.getCombo(4);

<?php

foreach ($province_array as $pabbr=>$pname) {
printf("combo2.put('%s', '%s');", $pname, $pname);
}
?>

dhxGrid_list.enableContextMenu(menu_list);
dhxGrid_list.init();

dhxGrid_list.setImagePath("<?php echo $dhtml_path;?>/dhtmlxGrid/codebase/imgs/");
dhxGrid_list.load("get_json_data.php?type=GetList", 'json');
dhxGrid_list.selectRow(0);

dhxGrid_list.attachEvent("onResize",function(ind){
if (this.initCellWidth[ind]=="*") this.initCellWidth[ind]=100;
return true;
});

dhxGrid_list.attachEvent("onRightClick", function(id,ind,obj){
dhxGrid_list.selectRow(dhxGrid_list.getRowIndex(id));
return true;
});

dp_list = new dataProcessor("ajax_process.php?type=gridDP_list");
dp_list.setTransactionMode("POST");
dp_list.enableDataNames(true);
dp_list.setDataColumns([true, true, true, true, true, true, true, true, true]);
dp_list.setUpdateMode("row");
dp_list.defineAction("error",function(node) {
alert(node.firstChild.data);
return true;
});
dp_list.defineAction("updated",function(node) {
alert(node.firstChild.data);
return true;
});
dp_list.init(dhxGrid_list);


dhxToolbar_list = dhxLayout_list.cells("a").attachToolbar();
dhxToolbar_list.setIconsPath("pics/");
dhxToolbar_list.addButton("new", 0, "New", "new.gif");
dhxToolbar_list.addSeparator("sep1", 1);
dhxToolbar_list.addButton("delete", 2, "Delete", "close.gif");

dhxToolbar_list.attachEvent("onClick", function(id) {

switch (id) {
case 'new':
if (dhxGrid_list.getSelectedRowId() == null) {
rowIndex = 0;
}
else {
rowIndex = dhxGrid_list.getRowIndex(dhxGrid_list.getSelectedRowId());
}
dhxGrid_list.addRow(dhxGrid_list.uid(),["","","","Edmonton","Alberta","","",""], rowIndex);
dhxGrid_list.selectRow(rowIndex);

dhxGrid_list.selectCell(dhxGrid_list.getSelectedRowId(),0, false,false, true);
dhxGrid_list.editCell();
alert('aa');
break;
case 'delete':
dhxGrid_list.deleteSelectedRows();
break;
};
return;
});



}

[Stanislav]

Replace

Code: Select all

dhxGrid_list.editCell();

with

Code: Select all

window.setTimeout(function(){
    dhxGrid_list.editCell(); 
},1);