Date format wrong on save

Question

I need a little help, I have created a grid that works well for the most part except when I edit the row and click save; the order date changes dramatically and I don't see the pattern to figure out how to fix it. I have changed the srcformat and newformat parameters, I have also tried a whole slew of different things all of which don't seem to work. Can someone take a look at my fiddle and tell me what is going on with that date?

In order to test the fiddle please choose a row and then click edit (pencil icon) then enter a 4 for quantity and some gibberish in the reason field, click save, look at the order date, it changes from the default to some random date. I am using the latest verion of free-jqgrid (4.12.1)

https://jsfiddle.net/y3llowjack3t/8zs1q7Lm/1/

{
    name: 'OrderDate', index: 'OrderDate', width: 90, align: "center",
    search: true, searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] },
    formatter: 'date', formatoptions: { newformat: 'm/d/Y' },
    editable: true, editrules: { required: true, date: true },
    editoptions: { dataInit: function (elem) { $(elem).datepicker(); } }
},

Thanks!

score 1 · Answer 1 · edited May 23 '17 at 12:15

The main problem in your code is not in the date column, but in the aftersavefunc function which you use. If you just comment the callback function you will see that free jqGrid correctly saves the data: https://jsfiddle.net/OlegKi/8zs1q7Lm/3/.

I would suggest you to make some changes in your current code. First of all you should fix the rowids. The RecurringOrderId property of input data seems be unique. It's a good choice for rowid values. You should add localReader: { id: "RecurringOrderId" } because you use datatype: "local".

After the changes you will not need to used the code fragments like

var rowData = $('#editFrequencyTable').getRowData(val);
efData = $.grep(efData, function(value, i) {
    return value.RecurringOrderId !== rowData.RecurringOrderId;
});

to get the data by rowid. Instead of that rowid from all callbacks will be already the RecurringOrderId value and you can use $('#editFrequencyTable').getLocalRow(rowid) to get the data by rowid. The method getLocalRow is much quickly as getRowData and it get all properties of original item. Thus you don't need to use any hidden columns. You can just remove the columns (RecurringOrderId, PONumber and Edited) from colModel and will have still the properties accessible.

Some other options can be just removed loadonce: true, height: 'auto', datatype: "local", not existing gridView: true (gridview: true would be correct, but it's default in free jqGrid). In the same way you can remove unneeded index property from all colModel items and search: true.

You can use navOptions, inlineNavOptions, searching, formDeleting, inlineEditing options of jqGrid to make the code more readable. See the wiki article for details. As the result you get the code like

https://jsfiddle.net/OlegKi/8zs1q7Lm/4/

It's clear that you can clean up the code and reduce it much more. After the usage of correct rowid and getLocalRow you would can easy access and modify the data. I think that you can do this yourself. You can reduce the code of colModel additionally by usage of column templates. See the old article for more details.

Thank you for the descriptive response. – Devnsyde Feb 17 '16 at 19:09 — Devnsyde, Feb 17 '16 at 19:09

score 1 · Accepted Answer · answered Feb 17 '16 at 18:58

The problem is with your date/time format. Looks like jqGrig is expecting 2016-04-01T00:00:00 and you are passing back 01/04/2016.

Modify aftersavefunc to include:

aftersavefunc: function(iRow, response, options) {

  // ...
  currentRowData.OrderDate = moment(currentRowData.OrderDate).format();
  // ...

}

Date format wrong on save

2 Answers2