date format issue on row update

[ShadokParticipant]

Hello,

I’m using jqwidgets 4.4.0 with jQuery 3.1.1.
We have a jqxgrid with a few columns including 2 (trunk_start and last_bill_date) with a date type (same parameters for both).

When we edit a field on a row (date type or not), non-empty date fields (different than 0000-00-00) will be submitted (posted data) with another format than the one specified and than the one given.
Example : trunk_start is set by default as 0000-00-00, and we edit it to 2016-12-01. Posted data is set to “Tue Jan 12 2016 00:00:00 GMT+0100”

See the data example in the following code :

function loadTrunks()
{
	$('#trunksList').removeClass( 'show' ).addClass( 'hidden' );

	$.getJSON( "/includes/trunksLoad.php", {} )
	.done( function( data ) {
		if( !data || data.length === 0 )
		{
			addError( 'Aucune donnée à charger !' );
		}
		else
		{
			$('#trunksList').removeClass( 'hidden' ).addClass( 'show' );

/* data
[
{"trunk_id":1,"trunk_name":"TEST2","trunk_grid":1,"grid_name":"Défaut","seller_name":"TEST","trunk_start":"2016-12-01","last_bill_date":"0000-00-00"},
{"trunk_id":3,"trunk_name":"TEST3","trunk_grid":1,"grid_name":"Défaut","seller_name":"TEST","trunk_start":"2016-12-01","last_bill_date":"0000-00-00"},
{"trunk_id":9,"trunk_name":"TEST1","trunk_grid":1,"grid_name":"Défaut","seller_name":"TEST","trunk_start":"2016-12-01","last_bill_date":"0000-00-00"}
]
*/
			
			var source =
			{
				localdata: data,
				datafields:
				[
					{ name: 'trunk_id', type: 'int' },
					{ name: 'trunk_name', type: 'string' },
					{ name: 'trunk_grid', type: 'int' },
					{ name: 'grid_name', type: 'string' },
					{ name: 'seller_name', type: 'string' },
					{ name: 'trunk_start', type: 'date', format: 'yyyy-MM-dd' },
					{ name: 'last_bill_date', type: 'date', format: 'yyyy-MM-dd' },
				],
				datatype: "json",
				sortcolumn: 'trunk_name',
				sortdirection: 'asc',
				updaterow: function( rowid, rowdata, commit ) {
					$.ajax({
						type: 'POST',
						url: '/includes/trunkUpdate.php',
						data: {trunk_id: rowdata.trunk_id, trunk_name: rowdata.trunk_name, grid_name: rowdata.grid_name, seller_name: rowdata.seller_name, trunk_start: rowdata.trunk_start, last_bill_date: rowdata.last_bill_date },
						
/* Sent parameters, after we updated the grid name cell
[
{"trunk_id":9
"trunk_name":"TEST1",
"grid_name":"Test",
"seller_name":"TEST",
"trunk_start":"Tue+Jan+12+2016+00:00:00+GMT+0100",
"last_bill_date":"0000-00-00"}
]
*/

						success: function( data, status, xhr ) {
							commit( true );
						},
						error: function( jqXHR, textStatus, error ) {
							commit( false );
							addError( 'Impossible de mettre les informations à jour : ' + jqXHR.responseText );
						}
					});
				}
			};
			var dataAdapter = new $.jqx.dataAdapter(source);

			var gridSource	= [];
			$.getJSON( "/includes/gridsList.php", {} )
			.done( function( gridData ) {
				if( !gridData || gridData.length === 0 ) {
				} else {
					$.each( gridData, function( key, value ) {
						gridSource[key]	= value;
					});
				}
			});

			$("#jqxgrid").jqxGrid(
			{
				width: 700,
				source: dataAdapter,
				sortable: true,
				filterable: true,
				pageable: true,
				autoheight: true,
				editable: true,
				selectionmode: 'singlerow',
				pagesizeoptions: [10,25,50,100,250,500],
				columns: [
					{ text: 'Id trunk', datafield: 'trunk_id', columntype: 'numberinput', filtertype: 'textbox', cellsalign: 'left', cellsformat: 'n', hidden: true, editable: false },
					{ text: 'Trunk', datafield: 'trunk_name', filtertype: 'textbox', width: 200, editable: true },
 					{ text: 'Grille', datafield: 'grid_name', columntype: 'dropdownlist', filtertype: 'textbox', width: 200, editable: true, 
						createeditor: function (row, cellvalue, editor) {
							editor.jqxDropDownList( {source: gridSource, placeHolder: "Grille :"} );
						},
						cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
							if (newvalue == "") return oldvalue;
						}
					},
					{ text: 'Vendeur', datafield: 'seller_name', width: 100, editable: true, cellsalign: 'center'},
 					{ text: 'Début', datafield: 'trunk_start', filtertype: 'date', width: 100, editable: true, cellsformat: 'yyyy-MM-dd' },
 					{ text: 'Facturé le', datafield: 'last_bill_date', filtertype: 'date', width: 100, editable: true, cellsformat: 'yyyy-MM-dd' },
				]
			});

			$("#jqxgrid").on("sort", function (event) {
				var sortinformation = event.args.sortinformation;
				var sortdirection = sortinformation.sortdirection.ascending ? "ascending" : "descending";
				if( !sortinformation.sortdirection.ascending && sortinformation.sortdirection.descending )
				{
					sortdirection = "null";
				}
			});
		}
	})
	.fail(function( jqXHR, textStatus, error ) {
		addError( 'Chargement des données impossible : ' + jqXHR.responseText );
	});
}

What i am doing wrong ?

Thanks.

[HristoParticipant]

Hello Shadok,

It looks when you set a new date in ajax.data – set Date object.
You could try to use this var formattedDate = dataAdapter.formatDate(new Date(), 'D') approach there, more information could find in this article.
Hope this helps.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[ShadokParticipant]

Thanks Hristo.

[wuuemmParticipant]

This won’t work on row update. At least I don’t know how to implement. If I once define the date format for a column and it works on initial data binding, I want all subsequent row updates (same item data format from server) to be formatted as defined while a grid was created, without any extra code. You’ve provided properties for formatting when data is initially bound but forgot to apply them when a single row/item is updated.

[wuuemmParticipant]

When grid is an jqxGrid element and data is an item

$.each(source._source.datafields, function (i, e) {
    if (e.type === 'date') {
      data[e.name] = source.formatDate(new Date(data[e.name]), 'dd/MM/yyyy HH:mm');
    }
  });
grid.jqxGrid('updaterow', id, data);

This works. Why not include this in the library?
The date format is arbitral here, should get info from grid columns definition in general solution.
The date format coming from server is a timestamp (number).

[HristoParticipant]

Hello wuuemm,

Could you clarify your issue?
The manipulation of the code is so complicated.
You need to use the DataAdapter variable to format the date – to using the formatDate method.
About this method, you could find out more information in the post above.
Also, if you want to process the data before you load in the jqxGrid then you could try to use the beforeLoadComplete callback.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts