JQWidget Grid - rowdata changing even before statement to do so

Question

I am having some trouble with a JQWidget-jqxGrid i'm developing. I will like to change the format information is being send to an API from a row edition. I need to change some Dates to a specific string notation. This is the code i am using right now:

updaterow: function (rowid, rowdata, commit)
            {
                //console.log(rowdata);
                var output = rowdata;

                for (property in output) {
                    if (output[property] instanceof Date && schema.properties[property].format === "time") {
                        output[property] = output[property].getHours() + ":" + output[property].getMinutes();
                        //console.log('hola');
                    }
                    if (output[property] instanceof Date && schema.properties[property].format === "date")
                    {
                        output[property] = output[property].getFullYear() + "-" + output[property].getMonth() + 1 + '-' + output[property].getDate();
                    }
                }

                /*console.log(event.args.row);*/
                console.log(output);
                console.log(rowdata);

                var token = $('input[name="__RequestVerificationToken"]').val();

                $.ajax({
                    url: "/api/" + entity + "/" + rowdata.uid,
                    cache: false,
                    method: "put",
                    data: JSON.stringify(rowdata),
                    processData: false,
                    headers: {
                        "RequestVerificationToken": token,
                        "Content-type": "Application/json"
                    },
                    success: function () {
                        console.log("Okey dokey!");
                        commit(true);
                    },
                    error: function () {
                        alert("El dato no se ha actualizado correctamente");
                    }
                });
            }

I tried many things before doing this. Originally, i was doing the update on a “oncelledit” event, the problem was the same (And this is like some kind of paranormal activity for me):

As you can see, i am doing the reformating of data in output variable, instead of rowdata. Even so, before output variable gets modified for the ajax request, if i uncomment “console.log(rowdata);”, data will already be changed even before the “for” scope where data is modified. How this is really possible? I have checked cache by using another browser, but no luck.

Although data is correctly posted to my API with this code, data format is changed on the grid displayed to the user, and data gets ouwfull. I will like to send the information in the appropriate format, but not to change format data shown in the grid.

This is how the data is shown before edition:
fecha de inicio | hora de inicio
1/10/2018 | 8:00 AM

And this is after edition:
fecha de inicio | hora de inicio
2001-01-1 |13:0

I post my full code just in case:

—JSGrid.js—

 $.ajaxSetup({ cache: false }); var FKSources = []; var FKAdapters = {}; var dataFieldsArr = []; var columnsArr = []; var FKPropertySelection; var entity; var schema; function createGrid() { $.ajax({ url: "/api/" + entity + "/schema", success: function (data) { schema = data; for (property in data.properties) { if (data.properties[property]["type"].indexOf("lhcrud") > -1) { FKSources.push({ datatype: "json", datafields: [ { name: data.fkAttributes[property] }, { name: 'id', type: 'int' } ], id: 'id', url: '/api/' + data.properties[property]["type"].substring(data.properties[property]["type"].indexOf("models.") + "models.".length) }); FKAdapters[property] = new $.jqx.dataAdapter(FKSources[FKSources.length - 1]); dataFieldsArr.push({ name: property + 'Id', value: property + 'Id', values: { source: FKAdapters[property].records, value: 'id', label: data.fkAttributes[property] }, type: 'int' }); dataFieldsArr.push({ name: property + 'Nombre', type: 'string', map: property + '>' + data.fkAttributes[property] }); columnsArr.push( { text: data.properties[property]["title"], columntype: 'dropdownlist', datafield: property + 'Id', width: 150, filtertype: 'checkedlist', displayfield: property + 'Nombre', createeditor: function (row, value, editor) { editor.jqxDropDownList({ source: FKAdapters[FKPropertySelection], displayMember: data.fkAttributes[FKPropertySelection], valueMember: 'id' }); } } ); } else if (data.properties[property]["type"].indexOf("integer") > -1) { dataFieldsArr.push({ name: property, type: 'int' }); columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 80, cellsalign: 'right' }); } else if (data.properties[property]["type"].indexOf("boolean") > -1) { dataFieldsArr.push({ name: property, type: 'bool' }); columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 65, columntype: 'checkbox' }); } else if (data.properties[property]["format"].indexOf("date") > -1) { dataFieldsArr.push({ name: property, type: 'date' }); columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 150, columntype: 'datetimeinput', cellsalign: 'right', cellsformat: 'd' }); } else if (data.properties[property]["format"].indexOf("time") > -1) { dataFieldsArr.push({ name: property, type: 'date' }); columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 100, columntype: 'datetimeinput', cellsalign: 'right', cellsformat: 't', createeditor: function (row, column, editor) { editor.jqxDateTimeInput({ showTimeButton: true, showCalendarButton: false }); } }); } else { dataFieldsArr.push({ name: property, type: 'string' }); columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 150 }); } } columnsArr.push({ text: 'Delete', datafield: 'Delete', columntype: 'button', width: 90, cellsrenderer: function () { return "Delete row"; }, buttonclick: function (row) { var deleteConfirm = confirm("Sure?"); if (deleteConfirm) { var id = $("#jqxgrid").jqxGrid('getrowid', row); deleteEntity(entity, id, $('input[name="__RequestVerificationToken"]').val()); $('#jqxgrid').jqxGrid('deleterow', id); } } }); var source = { datatype: "json", datafields: dataFieldsArr, id: 'id', url: '/api/' + entity, addrow: function (rowid, rowdata, position, commit) { var token = $('input[name="__RequestVerificationToken"]').val(); //console.log(rowid); //console.log(rowdata); $.ajax({ url: "/api/" + entity, method: "post", data: JSON.stringify(rowdata), processData: false, headers: { "RequestVerificationToken": token, "Content-type": "Application/json" }, success: function () { commit(true); //reload Data in order to manage correctly new data $("#jqxgrid").jqxGrid( { source: dataAdapter, sortable: true, filterable: true, editable: true, showeverpresentrow: true, everpresentrowposition: "top", selectionmode: 'singlecell', editmode: 'dblclick', theme: 'light', columns: columnsArr }); }, error: function (xhr) { console.log(xhr); commit(false); } }); }, updaterow: function (rowid, rowdata, commit) { //console.log(rowdata); var output = rowdata; for (property in output) { if (output[property] instanceof Date && schema.properties[property].format === "time") { output[property] = output[property].getHours() + ":" + output[property].getMinutes(); //console.log('hola'); } if (output[property] instanceof Date && schema.properties[property].format === "date") { output[property] = output[property].getFullYear() + "-" + output[property].getMonth() + 1 + '-' + output[property].getDate(); } } /*console.log(event.args.row);*/ console.log(output); console.log(rowdata); var token = $('input[name="__RequestVerificationToken"]').val(); $.ajax({ url: "/api/" + entity + "/" + rowdata.uid, cache: false, method: "put", data: JSON.stringify(rowdata), processData: false, headers: { "RequestVerificationToken": token, "Content-type": "Application/json" }, success: function () { console.log("Okey dokey!"); commit(true); }, error: function () { alert("El dato no se ha actualizado correctamente"); } }); } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { source: dataAdapter, width: '100%', sortable: true, filterable: true, editable: true, showeverpresentrow: true, everpresentrowposition: "top", selectionmode: 'singlecell', editmode: 'dblclick', theme: 'light', columns: columnsArr }); }, error: function () { alert("Error Getting Data"); } }); } $("#jqxgrid").on('cellselect', function (event) { FKPropertySelection = event.args.datafield.substring(0, event.args.datafield.indexOf('Id')); }); 

—JSGrid.cshtml—

 @{ ViewData["Title"] = "JSGrid"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>JSGrid for @ViewBag.entity</h2> @Html.AntiForgeryToken() <div id="jqxgrid"> </div> @section scripts { <link rel="stylesheet" href="~/lib/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="~/lib/jqwidgets/styles/jqx.light.css" type="text/css" /> <script type="text/javascript" src="~/lib/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="~/js/JSGrid.js"></script> <script> entity = '@ViewBag.entity'; createGrid(); </script> } 

Thanks in advance!

Answer 1

All right! I found my solution here:

https://www.jqwidgets.com/community/topic/rowdata-changed-even-before-statement-to-do-so/#post-98256

and here:

https://www.jqwidgets.com/community/topic/difference-between-refreshdata-and-updatebounddata/ (¡Haya PAZ! - Les luthiers)

I partially solved my issue reloading binded data with 'updatebounddata' method from jqxgrid.

Just in case someone has the same problem, i will leave here my updateRow function updated. Look at the ajax block:

updaterow: function (rowid, rowdata, commit)
                {
                    //console.log(rowdata);
                    var output = rowdata;

                    for (property in output) {
                        if (output[property] instanceof Date && schema.properties[property].format === "time") {
                            output[property] = output[property].getHours() + ":" + output[property].getMinutes();
                            //console.log('hola');
                        }
                        if (output[property] instanceof Date && schema.properties[property].format === "date")
                        {
                            output[property] = output[property].getFullYear() + "-" + (output[property].getMonth() + 1) + '-' + output[property].getDate();
                        }
                    }

                    //console.log(event.args.row);
                    //console.log(output);
                    //console.log(rowdata);

                    var token = $('input[name="__RequestVerificationToken"]').val();

                    $.ajax({
                        url: "/api/" + entity + "/" + rowdata.uid,
                        cache: false,
                        method: "put",
                        data: JSON.stringify(rowdata),
                        processData: false,
                        headers: {
                            "RequestVerificationToken": token,
                            "Content-type": "Application/json"
                        },
                        success: function () {
                            console.log("Okey dokey!");
                            commit(true);
                            $("#jqxgrid").jqxGrid('updatebounddata');
                        },
                        error: function () {
                            alert("El dato no se ha actualizado correctamente");
                            $("#jqxgrid").jqxGrid('updatebounddata');
                        }
                    });
                }

Hope this will help someone in the future!