How to add a row to grid and update datastore and server DB?

I’m trying to add a row to a grid, then switch to a form to edit the new row. That part is working.

What isn’t working is when I hit “Save”. Nothing is happening, and I’m getting a “target is undefined” error on datastore.js line 18.

I am able to edit a row that existed when loading the page and have its information sent to the server. I just can’t save a newly created row.

Here’s what I believe is the relevant code

		function newUser(){
			var newId = (new Date()).valueOf();
			grUsers.addRow(newId,"",0);
			grUsers.selectRow(0);
			tabbar_1.showTab('tab_2');
			tabbar_1.setTabActive('tab_2');
			form_1.setItemValue('id', grUsers.getSelectedRowId());
			tabbar_1.hideTab('tab_1');
		}

		form_1.attachEvent("onButtonClick", function(name, command){
			if(name=="btnUserCancel"){
				form_1.clear();
				tabbar_1.showTab('tab_1');
				tabbar_1.hideTab('tab_2');
				tabbar_1.setTabActive('tab_1');
			}
			if(name=="btnUserSave"){
				form_1.save();
				tabbar_1.showTab('tab_1');
				tabbar_1.hideTab('tab_2');
				tabbar_1.setTabActive('tab_1');
			}
		});
...
		var users = new dhtmlXDataStore({  
			url:"dp-admin.php",
			datatype:"xml"
		});
		grUsers.sync(users);
      adminDP = new dataProcessor("dp-admin.php");
      adminDP.init(users);
		adminDP.setTransactionMode("POST",true);

		form_1.bind(grUsers);

It isn’t getting to a point to send the data to the server; there’s no POST attempt. It looks like it is trying to save the form data to the datastore, but isn’t able to for some reason.

If I hit Cancel, it is returning me to the grid where it appears the changes were saved. But I can’t subsequently click the Edit Row button and edit those changes again, and the changes aren’t saved to the server.

I don’t know if I’m having a “grid” issue or a “datastore” issue.

Any help is appreciated.

Thank you,
Rob

Should I be ‘adding’ the row to the data store before shifting the focus over to the form?

I guess I thought that was being done by adding a row and the grid was handling the link to the datastore (sync?) (and the datastore was handling the link to the server). I do have a dataprocessor set up on the datastore. Do I need one from the grid to the datastore as well? (it’s strange that I don’t for editing records, just creating them.)

If I click New User, it adds a row to the grid and moves me to the form. If I Cancel out of the form, the new row is in the grid, but no data as it was created blank. I can then select the row and click Edit User, but if I change something and try to save it, I get the same “target is undefined” error on datastore.js line 18 error.

So, from what I can tell, the grid is getting split from the datastore - it isn’t adding the new row and subsequently, when I try to save changes to that row it isn’t able to (since from the datastore’s perspective, the row doesn’t exist).

How do I force the grid to insert the row into the datastore? (I think that’s what I want to do…)

Making some progress on my own.

It appears my problem is that I am selecting the row in the grid and going to the form. In the meantime, the dataStore is getting a new id for the row from the server and reassigning it. The form doesn’t know that though, so when it goes to save the changes to the row, it has in incorrect id, hence the ‘target is undefined’. Or in this case, just wrong.

OK - got it working. I had to turn around how I was handling it.

Instead of adding the new row, selecting it, and jumping to the form to edit it, I needed to open the form, clear it, and then when I save the form, add the new row with the values from the form.

Hopefully this will help the next guy.

regards,
Rob

Here’s my code.

Note that I added a hidden input to track when a user is new or not. Based on the status of the input, I would add a row or just save the row.

[code]
function newUser(){
tabbar_1.showTab(‘tab_2’);
tabbar_1.setTabActive(‘tab_2’);
tabbar_1.hideTab(‘tab_1’);
form_1.clear();
form_1.setItemValue(‘newuser’,1);
form_1.hideItem(‘newuser’);
form_1.hideItem(‘deleted’);
}
function editUser(){
tabbar_1.showTab(‘tab_2’);
tabbar_1.setTabActive(‘tab_2’);
tabbar_1.hideTab(‘tab_1’);
form_1.setItemValue(‘newuser’,0);
form_1.hideItem(‘newuser’);
form_1.hideItem(‘deleted’);
}

form_1.attachEvent("onButtonClick", function(name, command){
	if(name=="btnUserCancel"){
		tabbar_1.showTab('tab_1');
		tabbar_1.hideTab('tab_2');
		tabbar_1.setTabActive('tab_1');
	}
	if(name=="btnUserSave"){
		valid = 1;
		if (form_1.getItemValue('newuser')==1){
			form_1.validate;
			if (valid) {
				users.add({
					avid_id:form_1.getItemValue('avid_id'),
					username:form_1.getItemValue('username'),
					password:form_1.getItemValue('password'),
					firstname:form_1.getItemValue('firstname'),
					lastname:form_1.getItemValue('lastname'),
					readable_name:form_1.getItemValue('readable_name'),
					email:form_1.getItemValue('email'),
					permissions:form_1.getItemValue('permissions'),
					company_name:form_1.getItemValue('company_name'),
					addr1:form_1.getItemValue('addr1'),
					addr2:form_1.getItemValue('addr2'),
					city:form_1.getItemValue('city'),
					state:form_1.getItemValue('state'),
					zip:form_1.getItemValue('zip'),
					mobile:form_1.getItemValue('mobile'),
					phone:form_1.getItemValue('phone'),
					flags:form_1.getItemValue('flags'),
					universal_users_username:form_1.getItemValue('username'),
					mccustomer_id:form_1.getItemValue('mccustomer_id'),
					admin:form_1.getItemValue('admin'),
				});
			}
		} else { form_1.save(); }
		if (valid) {
			tabbar_1.showTab('tab_1');
			tabbar_1.hideTab('tab_2');
			tabbar_1.setTabActive('tab_1');
		}
	}
});[/code]