Add Row and Focus Into the Row

I have a dhtmlXGridObject and I am calling:



tblGrid.addRow(nextNewIndex, " ,", 0);

tblGrid.selectRow(nextNewIndex, false, false, true);



I expected that this would select the added row and change the focus of the cursor to the first cell of this newly added row, but it is not selecting the row or focusing to the row. What else do I need to do?

Please check this article dhtmlx.com/docs/products/kb/inde … ent&q=7285

This selects the new row but does not put the focus/cursor in the first cell of the row.

If you are adding row by pressing on some button you should cancel bubble for “onclick” event:


addRow

Still, the cursor is not in the selected cell…

Can you explain a little how your code works (why we have to use cancelBubble)

When you click somewhere on the page, the grid loses focus. Bubbling must be canceled to prevent that.

When I call tblGrid.selectCell(tblGrid.getRowIndex(nextNewIndex), 0, false, false, true, true).focus(); I am getting an error that the tblGrid… is null or not an object but I know it exists?

When I call tblGrid.selectCell(tblGrid.getRowIndex(nextNewIndex), 0, false, false, true, true).focus();
what is the purpose of "focus"command at the end ? The next command is enough to select cell and move selection focus to it, you need not call any extra commands on its result
           tblGrid.selectCell(tblGrid.getRowIndex(nextNewIndex), 0, false, false, true, true)

The cell is not selected when I do not call focus()

When I call



tblGrid.cellByIndex(0, 0);



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

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

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. "



 

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.

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

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.

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

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.

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;
});	

}

Replace

dhxGrid_list.editCell();

with

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