Adding row but not able to edit line directly

Suite and Optimus Suite 5
#1

Hello
I’m having a hard time finding answers to my problem on the forum, it might be a really easy way to find this ;p

I want to add a row to my grid, which works out fine. But then I want to edit the row right away (not reloading page). That should be able to work… But I dont really know how to. It works out great if I reload the page and then edit the row.

This is my code:
Main PHP:

<button class="button1" onclick="removeRow()">Remove Row</button>
<button class="button1" onclick="addRow()">Add Row</button>
	<div id="gridbox" style="width:100%;height:700px;"></div>

<script>
function addRow() {
	var newId = (new Date()).valueOf()
	mygrid.addRow(newId, "","0");
	mygrid.selectRow(mygrid.getRowIndex(newId),false,false,true);
}
function removeRow(){
        var selId = mygrid.getSelectedId()
        mygrid.deleteRow(selId);
    }
	mygrid = new dhtmlXGridObject("gridbox");
	mygrid.setImagePath("inc/dhtmlxGrid/codebase/imgs/");
	mygrid.setHeader("Name,X,Y,Region,Lancer,Sentry,Berserker,Scout,Knight,Guardian,Ram,Ballista,Scholar,Active");
	mygrid.attachHeader("#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter");
	mygrid.setColSorting("connector,connector,connector,connector,connector,connector,connector,connector,connector,connector,connector,connector,connector,connector");
	
    mygrid.setInitWidths("150,*");
    mygrid.setColAlign("left,center,center,center,center,center,center,center,center,center,center,center,center,center");
	mygrid.enableMultiselect(true);
	mygrid.setColTypes("ed,ed,ed,ro,ed,ed,ed,ed,ed,ed,ed,ed,ed,ch");
	mygrid.init();
	mygrid.setSkin("dhx_skyblue");
	mygrid.enableSmartRendering(true);
	mygrid.loadXML("inc/conn_cities.php");
	
	var dp = new dataProcessor("inc/conn_cities.php");
	dp.init(mygrid);
</script>

Connector.php

session_start();
$user_id = $_SESSION['user_id'];
	require_once("config.php");
	require_once("dhtmlxConnector_php/codebase/grid_connector.php");
	
	$res=mysql_connect($mysql_server,$mysql_user,$mysql_pass);
	mysql_select_db($mysql_db);
	
	$table 		= "SELECT * FROM cities WHERE user_id = '$user_id'";
	$identifier = "id";
	$fields 	= "city_name,x,y,region,lancer,sentry,berserker,scout,knight,guardian,ram,ballista,scholar,active";

	$grid = new GridConnector($res);
	$grid->dynamic_loading(100);
	$grid->event->attach("beforeInsert",myInsert);
	$grid->render_sql($table,$identifier,$fields);

	function myInsert($action){ 
		$sql = "Insert into cities(user_id,player_id) values ('".$_SESSION['user_id']."','10')";
		mysql_query($sql);
		$action->success();
    }

Does anyone know how I could fix thiss?

#2

Try to change addRow logic in the next way

function addRow() { window.setTimeout(function(){ var newId = (new Date()).valueOf() mygrid.addRow(newId, "","0"); mygrid.selectRow(mygrid.getRowIndex(newId),false,false,true); }, 1); }

by default grid closes active editor when click occurs outside of the grid’s borders. So in your case, after clicking on button cell is switched to the edit state and closed after that because of click outside of grid. Adding setTimeout will move row adding after click processing, which must resolve the original issue.

#3

Thanks Stanislav, but it does not help…
Perhaps its easier to make a form to add data to the grid?

#4

Please check the attached sample.
grid_add_row.ZIP (117 KB)