jQWidgets Forums

Hi Peter,

I can’t fix my code for adding a row in jqGrid to work with new version of jqWidgets. Below is code that works with 2.4.2. Can you help me to find problems?

this.loadData = function () {
	source = {
		localdata: self.myData.arrayA,
		datatype: 'local',
		addrow		: function (rowid, rowdata) {
			var observableArray = self.myData.arrayA, 
				record = null;
			observableArray.push({ dateFrom: null, dateTo: null, duration: null, text: null, code: null, currency: null });
			record = observableArray()[rowid];	
			for (var obj in record) {
				record[obj] = ko.observable(record[obj]);
			}
			ko.mapping.fromJS(observableArray(), {}, self.myData.arrayA());
		},
		deleterow	: function (rowid) {
			var observableArray = self.myData.arrayA;
			observableArray.remove(observableArray()[rowid]);
		},
		updaterow	: function(rowid, rowdata) {
			var observableArray = self.myData.arrayA, 
				record = null;
			observableArray.replace(observableArray()[rowid], rowdata); 
			record = self.myData.arrayA()[rowid];
				for (var obj in record) {
				record[obj] =  ko.observable(rowdata[obj]);
		}
	};
	dataAdapter = new jQuery.jqx.dataAdapter(source);
	// grid
	$('#jqxgrid').jqxGrid({
		width: 885,
		source: dataAdapter,
		pageable: true,
		autoheight: true,
		editable: true,
		selectionmode: 'singlecell',
		pagesize: 5,
		pagesizeoptions: ['5', '10'],
		columns: [{
			text: 'Date from',
			datafield: 'dateFrom',
			width: 110,
			columntype: 'datetimeinput',
			cellsformat: 'dd.MM.yyyy',
			initeditor: function (row, cellvalue, editor) {
			}
		}, {
			text: 'Date to',
			datafield: 'dateTo',
			width: 110,
			columntype: 'datetimeinput'
		}, {
			text: 'Duration',
			datafield: 'duration',
			width: 120
		}, {
			text: 'Some text',
			datafield: 'text',
			width: 140
		}, {
			text: 'Code',
			datafield: 'code',
			width: 90,
			cellsalign: 'right'
		}, {
			text: 'Currency',
			datafield: 'currency',
			width: 170,
			cellsalign: 'right'
		}]
	});
};
				
this.addRow_X = function() {
	var datarow = {},
		paginginformation = null,
		pagescount = -1;
		
	$('#jqxgrid').jqxGrid('addrow', null, datarow);
	paginginformation = $('#jqxgrid').jqxGrid('getpaginginformation');
	pagescount = paginginformation.pagescount;
	$('#jqxgrid').jqxGrid('gotopage', pagescount);
};

Thanks for your help.

Hi Peter,

I have changed my code and found some problems:
1. If It is empty table and I’m calling addrow than items in added row are not an observable in an observableArray – not OK.
2. If there are data loaded in table and I’m calling addrow than items in added row is an observable in an observableArray – it’s OK.
3.I have problems with editing if I add empty row and use null for values -> var datarow = { dateFrom: null, dateTo: null, duration: null, text: null, code: null, currency: null }. Look code below I put empty String.

My Code:

this.loadData = function () {
	source = {
		localdata: self.myData.arrayA,
		datatype: 'local',
		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.
			commit(true);
		},	    		
		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);
		},
		updaterow	: function(rowid, rowdata, commit) {
			commit(true);
		}			
	};
	dataAdapter = new jQuery.jqx.dataAdapter(source);
	// grid
	$('#jqxgrid').jqxGrid({
		width: 885,
		source: dataAdapter,
		pageable: true,
		autoheight: true,
		editable: true,
		selectionmode: 'singlecell',
		pagesize: 5,
		pagesizeoptions: ['5', '10'],
		columns: [{
			text: 'Date from',
			datafield: 'dateFrom',
			width: 110,
			columntype: 'datetimeinput',
			cellsformat: 'dd.MM.yyyy',
			initeditor: function (row, cellvalue, editor) {
			}
		}, {
			text: 'Date to',
			datafield: 'dateTo',
			width: 110,
			columntype: 'datetimeinput'
		}, {
			text: 'Duration',
			datafield: 'duration',
			width: 120
		}, {
			text: 'Some text',
			datafield: 'text',
			width: 140
		}, {
			text: 'Code',
			datafield: 'code',
			width: 90,
			cellsalign: 'right'
		}, {
			text: 'Currency',
			datafield: 'currency',
			width: 170,
			cellsalign: 'right'
		}]
	});
};
				
this.addRow_X = function() {
	var datarow = { dateFrom: '', dateTo: '', duration: '', text: '', code: '', currency: '' };
	var commit = $('#jqxgrid').jqxGrid('addrow', null, datarow);
};

Thank you for your help.