jQuery UI Widgets › Forums › Grid › updaterow doesn't work when datafields are mapped

Tagged: , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 6 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    updaterow doesn't work when datafields are mapped Posts
  • July 17, 2018 at 2:16 pm updaterow doesn't work when datafields are mapped #101050

    DM
    Participant

    Hi, I’m having a problem updating a row in a grid. If I have datafields that have a mapping to a child-object, this renders fine when the grid is first displayed, but when I do an update of a selected row I lose the values of the mapped objects. I can demo this in a version of the sample file createremoveupdatedata.htm.

    I’ve made the following changes to the sample:

    • firstname and lastname have been moved to a child object called person
    • The data fields for firstname and lastname include a map to the person object

    If you run the code, select a row and hit update, you’ll see the firstname and lastname disappear.

    <!DOCTYPE html>
<html lang="en">
<head>
	<title id='Description'>
		This example demostrates how we can manipulate data at client side. The Grid plugin provides you callback functions when you add, remove or update a row.
	</title>
	<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
	<script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
	<script type="text/javascript" src="../../scripts/demos.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			// prepare the data
			var data = {};

			var firstNames =
				[
					"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
				];

			var lastNames =
				[
					"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
				];

			var productNames =
				[
					"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
				];

			var priceValues =
				[
					"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
				];

			var generaterow = function(i) {
				var row = {};
				var productindex = Math.floor(Math.random() * productNames.length);
				var price = parseFloat(priceValues[productindex]);
				var quantity = 1 + Math.round(Math.random() * 10);

				// **** Changed so that the first and last names are in the child object ****
				row["person"] = {
					firstname: firstNames[Math.floor(Math.random() * firstNames.length)],
					lastname: lastNames[Math.floor(Math.random() * lastNames.length)]
				}
				// **** End of change
				row["productname"] = productNames[productindex];
				row["price"] = price;
				row["quantity"] = quantity;
				row["total"] = price * quantity;
				return row;
			}

			for(var i = 0; i < 10; i++) {
				var row = generaterow(i);
				data[i] = row;
			}

			var source =
				{
					localdata: data,
					datatype: "local",
					datafields:
						[
							// **** Changed to map the first and last name to the person object ****
							{ name: 'firstname', type: 'string', map: "person>firstname" },
							{ name: 'lastname', type: 'string', map: "person>lastname" },
							// **** End of change
							{ name: 'productname', type: 'string' },
							{ name: 'quantity', type: 'number' },
							{ name: 'price', type: 'number' },
							{ name: 'total', type: 'number' }
						],
					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);
					},
					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, newdata, commit) {
						// synchronize with the server - send update command
						// call commit with parameter true if the synchronization with the server is successful
						// and with parameter false if the synchronization failed.
						commit(true);
					}
				};

			var dataAdapter = new $.jqx.dataAdapter(source);

			// initialize jqxGrid
			$("#grid").jqxGrid(
				{
					width: getWidth('Grid'),
					height: 350,
					source: dataAdapter,
					showtoolbar: true,
					rendertoolbar: function(toolbar) {
						var me = this;
						var container = $("<div style='margin: 5px;'></div>");
						toolbar.append(container);
						container.append('<input id="addrowbutton" type="button" value="Add New Row" />');
						container.append('<input style="margin-left: 5px;" id="addmultiplerowsbutton" type="button" value="Add Multiple New Rows" />');
						container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Delete Selected Row" />');
						container.append('<input style="margin-left: 5px;" id="updaterowbutton" type="button" value="Update Selected Row" />');
						$("#addrowbutton").jqxButton();
						$("#addmultiplerowsbutton").jqxButton();
						$("#deleterowbutton").jqxButton();
						$("#updaterowbutton").jqxButton();
						// update row.
						$("#updaterowbutton").on('click', function() {
							var datarow = generaterow();
							var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
							var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
							if(selectedrowindex >= 0 && selectedrowindex < rowscount) {
								var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
								var commit = $("#grid").jqxGrid('updaterow', id, datarow);
								$("#grid").jqxGrid('ensurerowvisible', selectedrowindex);
							}
						});

						// create new row.
						$("#addrowbutton").on('click', function() {
							var datarow = generaterow();
							var commit = $("#grid").jqxGrid('addrow', null, datarow);
						});

						// create new rows.
						$("#addmultiplerowsbutton").on('click', function() {
							$("#grid").jqxGrid('beginupdate');
							for(var i = 0; i < 10; i++) {
								var datarow = generaterow();
								var commit = $("#grid").jqxGrid('addrow', null, datarow);
							}
							$("#grid").jqxGrid('endupdate');
						});

						// delete row.
						$("#deleterowbutton").on('click', function() {
							var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
							var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
							if(selectedrowindex >= 0 && selectedrowindex < rowscount) {
								var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
								var commit = $("#grid").jqxGrid('deleterow', id);
							}
						});
					},
					columns: [
						{ text: 'First Name', datafield: 'firstname', width: 200 },
						{ text: 'Last Name', datafield: 'lastname', width: 200 },
						{ text: 'Product', datafield: 'productname', width: 180 },
						{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
						{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
						{ text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
					]
				});
		});
	</script>
</head>
<body class='default'>
	<div id="grid">
	</div>
</body>
</html>
    July 18, 2018 at 7:57 am updaterow doesn't work when datafields are mapped #101060

    Hristo
    Participant

    Hello DM,

    You should provide an object (record) to the updaterow method that exists in the ‘datafields’ of the jqxGrid.
    Please, try with this approach:

    $("#updaterowbutton").on('click', function() {
	var datarow = generaterow();
	var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
	var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
	if(selectedrowindex >= 0 && selectedrowindex < rowscount) {
		var id = $("#grid").jqxGrid('getrowid', selectedrowindex);

		var person = datarow.person;
		var firstname = person.firstname;
		var lastname = person.lastname;
		datarow.firstname = firstname;
		datarow.lastname = lastname;

		var commit = $("#grid").jqxGrid('updaterow', id, datarow);
		$("#grid").jqxGrid('ensurerowvisible', selectedrowindex);
	}
});

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.