How to pass formatted date to the server

[MarcParticipant]

tl;dr : is there a built-in grid function to format the date for output before sending it to the server ?

Hi,

[Context info – Actual question below]
I have a grid bound to a SQL Server CE table. The grid has two dates : DateStart, DateEnd. I formatted the date fields in the source and the grid itself.

Here is the relevant part of the code :

  var source =
    {
      datatype: "json",
      datafields: [
      	{ name: 'MissionID' },
      	{ name: 'Name' },
      	{ name: 'DateStart', type: 'date', format: "dd-MM-yyyy" },
      	{ name: 'DateEnd', type: 'date', format: "dd-MM-yyyy" },
        { name: 'CustomerName' }
        ],
      sortcolumn: 'MissionID',
      id: 'MissionID',
      url: 'Mission/GetMissions',
      addrow: etc.
      deleterow: etc.
      updaterow: function (rowid, rowdata, commit) {
        // synchronize with the server - send update command
        //        rowdata.MissionID = rowid;
        $.ajax({
          cache: false,
          dataType: 'json',
          url: 'Mission/Update',
          data: rowdata,
          type: "POST",
          success: function (data, status, xhr) {
            // update command is executed.
            commit(true);
          },
          error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
            commit(false);
          }
        });
      }
    };

  var dataAdapter = new $.jqx.dataAdapter(source, {
    loadError: function (xhr, status, error) {
      alert(error);
    }
  });

  // initialize Grid
  $("#gMissions").jqxGrid(
    {
      width: 900,
      source: dataAdapter,
      filterable: true,
      sortable: true,
      autoheight: true,
      pageable: true,
      editable: true,
      rendergridrows: function (obj) {
        return obj.data;
      },
      columns: [
              { text: 'ID', datafield: 'MissionID', width: 50 },
              { text: 'Mission', datafield: 'Name', width: 300 },
              { text: 'Début', datafield: 'DateStart', width: 150, cellsformat: "dd-MM-yyyy", columntype: 'datetimeinput' },
              { text: 'Fin', datafield: 'DateEnd', width: 150, cellsformat: "dd-MM-yyyy", columntype: 'datetimeinput' },
              { text: 'Client', datafield: 'CustomerName', width: 250 }
          ]
    });

[Problem statement]
Displaying and editing works fine. However, passing the data to the server does not work. When debugging server-side, I see this error message (approximately translated from french):

“‘Sun Jun 01 2014 00:00:00 GMT+0200 (Paris, Madrid (summer time))’ is not valid for Start Date.”

[Question]
Is there a built-in way to format the date for output to the server, or should the data be formatted manually , possibly in a grid event, or through the ajax beforeSend function ?

Thank you

Brgds.

Marc.

[Peter StoevKeymaster]

Hi Marc,

You can use the DataAdapter’s Formatting capabilities to format numbers or dates. Ex: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdataadapter/formatting.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MarcParticipant]

tl;dr : this post shows how to format a grid date field before sending it to the server. Doing it is mandatory, because the default date format that get sent cannot generally be understood by the code server-side.

Hi Pete,

Thank you for the pointer to the DataAdapter, I eventually could sort it out.

Please note, I could not use the link to the demo, because if I understand well, it showed formatting the displayed date, while my question was to format the date before it get passed to the server.

Your pointer to the DataAdapter drove me to the jwxDataAdapter documentation. Since it is a 20+ pages doc,
not necessarily the clearer of the jqWidget documentation set (but let’s be positive, jqWidget is providing a whole 20 pages description, not bad), it took me some research to find my way out. Here is, as a feedback to readers who might need it, what worked, and what didn’t.

I first saw the formatData function. The doc says :

formatData: A callback function which is called before the data is sent to the server. You can use it to fully override the data sent to the server. If you define a ‘formatData’ function, the result that the function returns will be sent to the server.

So I tried :

var dataAdapter = new $.jqx.dataAdapter(source, {
  formatData: function (data) {
    data.DateStart = Date.parse(data.DateStart); // Or whatever other data formatting you might think of
    data.DateEnd = Date.parse(data.DateEnd);     // Or whatever other data formatting you might think of
    return data;
    },
  // loadError: etc.
  });

Unfortunately, and this may be due to a mistake or a typo, the data.DateStart and data.DateEnd that were passed to the server remained inchanged.

So here is the code that worked (focusing on the relevant parts of the code). Please note :

• It uses a dataAdapter.formatDate that follows the jqWdiget format string convention, which differs from JavaScript’s one.
• The date formatting code is inserted just before the ajax POST call in the updaterow property of the grid’s source

var dateFormat = "dd-MM-yyyy";

  var source =
    {
      datatype: "json",
      datafields: [
        // . . . extra code here . . . 
      	{ name: 'DateStart', type: 'date', format: dateFormat },
      	{ name: 'DateEnd', type: 'date', format: dateFormat },
        // . . . extra code here . . . 
        ],

      updaterow: function (rowid, rowdata, commit) {
        // synchronize with the server - send update command
        rowdata.DateStart = dataAdapter.formatDate(rowdata.DateStart, dateFormat);
        rowdata.DateEnd = dataAdapter.formatDate(rowdata.DateEnd, dateFormat);

        $.ajax({
          cache: false,
          dataType: 'json',
          url: 'Mission/Update',
          data: rowdata,
          type: "POST",
          success: function (data, status, xhr) {
            // update command is executed.
            commit(true);
          },
          error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
            commit(false);
          }
        });
      }
        // . . . extra code here . . . 
    };

  var dataAdapter = new $.jqx.dataAdapter(source, {
    loadError: function (xhr, status, error) {
      alert(error);
    }
  });

  // initialize Grid
  $("#gMissions").jqxGrid(
    {
        // . . . extra code here . . . 
      columns: [
        // . . . extra code here . . . 
              { text: 'Début', datafield: 'DateStart', width: 150, cellsformat: dateFormat, columntype: 'datetimeinput' },
              { text: 'Fin', datafield: 'DateEnd', width: 150, cellsformat: dateFormat, columntype: 'datetimeinput' },
          ]
    });
        // . . . extra code here . . . 

[gustavoParticipant]

Peter,

I have a similar question, when the user filters on a date column before sending the filter info to the server I need to convert the date. Do you have an example for this? Is it supposed the Grid.Filter: method needs to be used if so how?

Thanks for sharing any light on this

[ydb1mdParticipant]

Marc, THANK YOU SOOOOOO MUCH for sharing your code for the date format parsing. I have been pulling my hair out trying to solve this problem in my code. I’m attempting an update using the Entity Framework and have three datetime fields that were failing.

Thank you! Thank you! Thank you! And, thank god that developers love to help each other out!

[Author]

Posts