Master/Details delete row conflict

[dujmovicvParticipant]

Dear All,

I’m not a JS expert (actually I’m a PHP coder), so I believe this will be a piece of cake for JS coders, not to mention the JQWisgets developers 🙂
Here’s the js code of my master-details function which I’ve combined with the “delete row” button. Unfortunately the master-details and deleterow functions ‘refuse’ to work together. In this case the ‘deleterow’ function doesn’t work at all. Any suggestion or help is highly appreciated!

$(document).ready(function () {
	// prepare the data
	var source =
	{
		datatype: "json",
		datafields: [
							{ name: 'id' },
							{ name: 'company' },
							{ name: 'first_name' },
							{ name: 'last_name' },
							{ name: 'location_country' },
							{ name: 'location_city' },
							{ name: 'location_postal_code' },
							{ name: 'location_street' },
							{ name: 'location_nr' },
							{ name: 'email' },
							{ name: 'phone' },
							{ name: 'reference' },
							{ name: 'added_by' }
					],
		id: 'id',
		url: 'grid/jqwidgets/controllers/clients_controller.php',
		root: 'Rows',
				deleterow: function (rowid) {
                    // synchronize with the server - send delete command
                    var data = "delete=true&id=" + rowid;
                    $.ajax({
                        dataType: 'json',
                        url: 'grid/jqwidgets/controllers/clients_controller.php',
                        data: data,
                        success: function (data, status, xhr) {
                            // delete command is executed.
                        }
                    });
                },
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command
                    var data = "update=true&" + $.param(rowdata);
                    $.ajax({
                        dataType: 'json',
                        url: 'grid/jqwidgets/controllers/clients_controller.php',
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                        }
                    });
                }
	};
	var dataAdapter = new $.jqx.dataAdapter(source);
	$("#jqxgrid").jqxGrid(
			{
			width: 1020,
			source: dataAdapter,
			<?
			if ($permisssionToEditClient == 1) { echo "editable: true,"; }
			?>
			theme: 'classic',
			pageable: true,
			autoheight: true,
			virtualmode: true,
			rendergridrows: function () {
			return dataAdapter.records;
			},
			columns: [
			{ text: 'ID', datafield: 'id', editable: false, width: 35 },
								  { text: 'Company', datafield: 'company', width: 120 },
								  { text: 'First Name', datafield: 'first_name', width: 100 },
								  { text: 'Last Name', datafield: 'last_name', width: 100 },
								  { text: 'Country', datafield: 'location_country', columntype: 'dropdownlist', width: 100,
										createeditor: function (row, cellvalue, editor) {
											var dataSource = ['Afghanistan','Albania','Algeria'];
											editor.jqxDropDownList({source: dataSource });
										}
								  },
								  { text: 'City', datafield: 'location_city', width: 80 },
								  { text: 'PostCode', datafield: 'location_postal_code', width: 80 },
								  { text: 'Street', datafield: 'location_street', width: 100 },
								  { text: 'Nr', datafield: 'location_nr', width: 50 },
								  { text: 'Email', datafield: 'email', width: 150 },
								  { text: 'Phone', datafield: 'phone', width: 100 },
								  { text: 'Reference', datafield: 'reference', width: 80 },
								  { text: 'Added by', datafield: 'added_by', editable: false, width: 80 }
			]
			});
			
	var detailsInitialized = false;
	$("#jqxgrid").bind('rowselect', function (event) {
		var row = event.args.rowindex;
		var id = $("#jqxgrid").jqxGrid('getrowdata', row)['id'];
		var source =
		{
			url: 'grid/jqwidgets/controllers/clients_controller.php',
			async: false,
			dataType: 'json',
			data: {customerid: id},
			datatype: "json",
			datafields: [
			{ name: 'project_name' },
			{ name: 'project_description' },
			{ name: 'street' },
			{ name: 'street_nr' },
			{ name: 'city' },
			{ name: 'postal_code' },
			{ name: 'country' },
			{ name: 'status' }
			]
		};
		var dataAdapter = new $.jqx.dataAdapter(source);
		// initialize jqxGrid
		$("#projectsGrid").jqxGrid(
		{
			width: 1020,
			source: dataAdapter,
			pageable: true,
			autoheight: true,
			columns: [
			{ text: 'Project Name', datafield: 'project_name', width: 150 },
			{ text: 'Project Description', datafield: 'project_description', width: 180 },
			{ text: 'Street', datafield: 'street', width: 150 },
			{ text: 'Nr', datafield: 'street_nr', width: 85 },
			{ text: 'City', datafield: 'city', width: 150 },
			{ text: 'Postal Code', datafield: 'postal_code', width: 100 },
			{ text: 'Country', datafield: 'country', width: 120 },
			{ text: 'Status', datafield: 'status', width: 85 },
			]
		});
	});
});

[Peter StoevKeymaster]

Hi dujmovicv,

This sample shows how to add. delete or update rows: createremoveupdatedata.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dujmovicvParticipant]

Thanks Peter, but I DO manage to set up the CRUD sample AND the master/details sample : SEPARATELY. Is it possible to combine these two? I mean to display master/details and to delete a row from the master table on the SAME page (see the code above)….

[Peter StoevKeymaster]

Hi dujmovicv,

The posted code is not valid for the latest version because it is missing the last “commit” parameter in the deleterow and updaterow callbacks. I also don’t see a code that calls the Grid’s deleterow or updaterow methods. The Grid’s deleterow and updaterow methods internally call the source object’s deleterow and updaterow(if they’re defined). They expect row id(not row index) and new row data in the case of the updaterow method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dujmovicvParticipant]

It’s strange to read your reply… Both the updaterow and deleterow methods are there. The updaterow is working fine as is. The deleterow is NOT working from the moment I add the master/details functionality ($(“#jqxgrid”).bind(‘rowselect’, function (event)). Maybe I haven’t explained my issue very well…

[Peter StoevKeymaster]

Hi dujmovicv,

Please, take a look at the sample that I posted. The updaterow, deleterow and addrow require an additional parameter since the release of jQWidgets 2.5. In addition, the code that calls the updaterow and deleterow methods is missing, at least in the posted code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts