jQuery UI Widgets Forums Grid date format issue on row update

This topic contains 5 replies, has 3 voices, and was last updated by  Hristo 1 month, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • date format issue on row update #89639

    Shadok
    Participant

    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.

    date format issue on row update #89676

    Hristo
    Participant

    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

    date format issue on row update #89681

    Shadok
    Participant

    Thanks Hristo.

    date format issue on row update #111991

    wuuemm
    Participant

    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.

    date format issue on row update #111993

    wuuemm
    Participant

    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).

    • This reply was modified 1 month, 2 weeks ago by  wuuemm.
    • This reply was modified 1 month, 2 weeks ago by  wuuemm.
    • This reply was modified 1 month, 2 weeks ago by  wuuemm.
    date format issue on row update #112016

    Hristo
    Participant

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.