cellendedit event error when 2 grid on the same page

[C.S.PuteraParticipant]

Hello. I am using jqxtabs which content is loaded via AJAX. I open Sales Tab which contain jqxgrid A, cellendedit works fine. Then I open 2nd tab, Purchasing Tab, which contain jqxgrid also. Then when I try to edit the row, it says “row is undefined”. I use different name for those 2 grid. Is there anything I should notice when loading 2 grid on the same page ? Tq

Below is my cellendedit function :

var grid = $("#'.$purchasingItemGridId.'");
grid.bind("cellendedit", function(e) {

// Get data before edited
var rowIndex = e.args.rowindex;
var row = grid.jqxGrid("getrowdata",rowIndex);
var itemId = row.purchasing_item_item_id;
var prevWhId = row.purchasing_item_wh_id;
var prevAmt = row.purchasing_item_amount;
var prevUmId = row.purchasing_item_um_id;
var prevUnitPrice = row.purchasing_item_unit_price;
var prevDisc = row.purchasing_item_discount_amount;
var prevTotalPrice = row.purchasing_item_total_price;
var oldStr = "(" + itemId + "," + prevWhId + "," + prevAmt + "," + prevUmId + "," + prevUnitPrice + "," + prevDisc + "," + prevTotalPrice + ")#";
var exValue = $("#'.$exValuesContainer.'").val();

if(e.args.datafield == "purchasing_item_wh_id") { 

	Loading.show();

	// Get new wh
	var newWhId = e.args.value.value;
	
	// Changes : newWhId
	var newStr = "(" + itemId + "," + newWhId + "," + prevAmt + "," + prevUmId + "," + prevUnitPrice + "," + prevDisc + "," + prevTotalPrice + ")#";
	
	// Replace string value 
	var newValue = exValue.replace(oldStr,newStr);
	$("#'.$exValuesContainer.'").val(newValue);
	
	Loading.hide();
	
} else if(e.args.datafield == "purchasing_item_amount") {

	Loading.show();
	
	// Get old & new amount
	// var prevAmt = e.args.oldvalue;
	var newAmt = e.args.value;
	
	// Validate value
	if(!isNumber(newAmt)) {
		newAmt = 0;
		alert("Jumlah pembelian tidak valid");
	} 
	
	// Parse to Int
	newAmt = parseInt(newAmt);
	
	// Calculate row total purchasing 
	var newTotalPrice = (newAmt * prevUnitPrice) - prevDisc;
	
	// Changes : newAmt & newTotalPrice
	var newStr = "(" + itemId + "," + prevWhId + "," + newAmt + "," + prevUmId + "," + prevUnitPrice + "," + prevDisc + "," + newTotalPrice + ")#";
	
	// Replace string value
	var newValue = exValue.replace(oldStr,newStr);
	$("#'.$exValuesContainer.'").val(newValue);
	
	// Update grid
	grid.jqxGrid("setcellvalue", rowIndex, "purchasing_item_amount", newAmt);
	grid.jqxGrid("setcellvalue", rowIndex, "purchasing_item_total_price", newTotalPrice);
	
	// Calculate total purchasing
	calculateTotalPurchasing();
	
	Loading.hide();
	
} else if(e.args.datafield == "purchasing_item_um_id") { 

	Loading.show();
	
	// Get new UM
	var newUmId = e.args.value.value;
	
	// Changes : newUmId
	var newStr = "(" + itemId  + "," + prevWhId + "," + prevAmt + "," + newUmId + "," + prevUnitPrice + "," + prevDisc + "," + prevTotalPrice + ")#";
	
	// Replace string value
	var newValue = exValue.replace(oldStr,newStr);
	$("#'.$exValuesContainer.'").val(newValue);
	
	Loading.hide();
	
} else if(e.args.datafield == "purchasing_item_unit_price") {

	Loading.show();
	
	// Get new price
	var newUnitPrice = e.args.value;
	
	if(!isNumber(newUnitPrice)) {
		newUnitPrice = 0;
		alert("Harga barang tidak valid");
	}
	
	// Parse to Int
	newUnitPrice = parseInt(newUnitPrice);
	
	// Calculate row total purchasing 
	var newTotalPrice = (prevAmt * newUnitPrice) - prevDisc;
	
	// Changes : newUnitPrice & newTotalPrice
	var newStr = "(" + itemId + "," + prevWhId + "," + prevAmt + "," + prevUmId + "," + newUnitPrice + "," + prevDisc + "," + newTotalPrice + ")#";
	
	// Replace string value
	var newValue = exValue.replace(oldStr,newStr);	
	$("#'.$exValuesContainer.'").val(newValue);	
	
	// Update grid
	grid.jqxGrid("setcellvalue", rowIndex, "purchasing_item_unit_price", newUnitPrice);
	grid.jqxGrid("setcellvalue", rowIndex, "purchasing_item_total_price", newTotalPrice);
		
	// Calculate total purchasing
	calculateTotalPurchasing();
	
	Loading.hide();
	
} else if(e.args.datafield == "purchasing_item_discount_amount") {

	Loading.show();
	
	// Get new disc
	var newDiscValue = e.args.value;
	
	if(!isNumber(newDiscValue)) {
		newDiscValue = 0;
		alert("Diskon tidak valid");
	}
	
	// Parse to Int
	newDiscValue = parseInt(newDiscValue);
	
	// Calculate row total purchasing 
	var newTotalPrice = (prevAmt * prevUnitPrice) - newDiscValue;
	
	// Changes : newDiscValue & newTotalPrice
	var newStr = "(" + itemId + "," + prevWhId + "," + prevAmt + "," + prevUmId + "," + prevUnitPrice + "," + newDiscValue + "," + newTotalPrice + ")#";
	
	// Replace string value
	var newValue = exValue.replace(oldStr,newStr);	
	$("#'.$exValuesContainer.'").val(newValue);	
	
	// Update grid
	grid.jqxGrid("setcellvalue", rowIndex, "purchasing_item_discount_amount", newDiscValue);
	grid.jqxGrid("setcellvalue", rowIndex, "purchasing_item_total_price", newTotalPrice);
	
	// Calculate total purchasing
	calculateTotalPurchasing();
	
	Loading.hide();
	
}
alert("OLD : " + oldStr);
alert("NEW : " + newStr);
}); // Grid endedit closing tag

[C.S.PuteraParticipant]

This is how I initialize the grid :

if(options.filterable) {
	data.filter = function() {
		$("#'.$this->selector.'").jqxGrid("updatebounddata", "filter");
	}
}

if(options.sortable) {
	data.sort = function() {
		$("#'.$this->selector.'").jqxGrid("updatebounddata", "sort");
	}
}

if(typeof data.beforeprocessing == "undefined") {
	data.beforeprocessing = function(record) {
		if(record) data.totalrecords = record.totalRows;
	}
}

if(typeof data.root == "undefined") {
	data.root = "rows";
}

if(typeof data.cache == "undefined") {
	data.cache = false;
}

if(typeof data.addrow == "undefined") {
	data.addrow = function (rowid, rowdata, position, commit) {
		// synchronize with the server - send insert command
		// call commit with parameter true if the synchronization with the server is successful 
		//and with parameter false if the synchronization failed.
		// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
		commit(true);
	};
}

if(typeof data.updaterow == "undefined") {
	data.updaterow = function (rowid, newdata, commit) {
		// synchronize with the server - send insert command
		// call commit with parameter true if the synchronization with the server is successful 
		//and with parameter false if the synchronization failed.
		// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
		commit(true);
	};
}

if(typeof data.deleterow == "undefined") {
	data.deleterow = function (rowid, commit) {
		// synchronize with the server - send delete command
		// call commit with parameter true if the synchronization with the server is successful 
		//and with parameter false if the synchronization failed.
		commit(true);
	};
}

options.source = new $.jqx.dataAdapter(data, {
	loadError: function(xhr, status, error) {
		console.log("Error 	: " + error);
	}
});

$("#'.$this->selector.'").jqxGrid(options);

[C.S.PuteraParticipant]

I found the reason. It is due to the same variable name that I use to identify the grid, both uses var grid, so it conflicts when I call the others. This is not jqwidgets but my mistake. Tq

[Author]

Posts