Getting old values of a row in updaterow method - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: data, getrowdata, grid, jqxgrid, old, row, source, update, updaterow

This topic contains 9 replies, has 3 voices, and was last updated by Dimitar 7 years, 2 months ago.

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

Author

Getting old values of a row in updaterow method Posts

April 10, 2014 at 11:11 am Getting old values of a row in updaterow method #52861

Participant

When I update a row in a grid and if I have a “updaterow” method attached to the source, then in order to get the original(old) data in the “updaterow” method ( new/updated data will be anyhow available).
1.Do I have any methods of the grid to get the old data or is that I need to store the old data for the first time into an array when the callback handler “cellbeginedit” fires for each cell edit and use the array in updaterow method?
2.If I dont have any methods of jqxGrid and apart from using callback methods “cellbeginedit” the other way is using the dataadapter records?

Thanks

April 11, 2014 at 9:39 am Getting old values of a row in updaterow method #52934

Dimitar

Participant

Hello Shankar,

There is a simpler solution. When the updaterow callback is called, the row has actually not yet been updated, so if you call getrowdata, you get the old row’s data, e.g.:

updaterow: function (rowid, newdata, commit, a, b, c) {
    // synchronize with the server - send update command
    // call commit with parameter true if the synchronization with the server is successful 
    // and with parameter false if the synchronization failed.
    var oldData = $('#jqxgrid').jqxGrid('getrowdata', rowid);
    commit(true);
}

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

April 11, 2014 at 2:29 pm Getting old values of a row in updaterow method #52952

Shankar

Participant

Hi Dimitar

I have tried getting one of the my grid’s cell value(which I have updated) in the updatedrow callback and I am not getting old data instead getting the updated values.

Thanks
Shankar

April 14, 2014 at 8:16 am Getting old values of a row in updaterow method #53026

Dimitar

Participant

Hi Shankar,

Did you try our approach (using getrowdata)?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

April 15, 2014 at 4:31 am Getting old values of a row in updaterow method #53070

Shankar

Participant

Hi Dimitar

yes, I have used “$(‘#jqxgrid’).jqxGrid(‘getrowdata’, rowid);” method which you have stated in the above post and still I am getting new row values and not the old values.

April 15, 2014 at 5:54 am Getting old values of a row in updaterow method #53080

Dimitar

Participant

Hi Shankar,

Please check out this example, based on the demo Create, Remove, Update. Do you experience any issues with it? Please also make sure you are using the latest version of jQWidgets (3.2.2).

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = {};

            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];

            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];

            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];

            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];

            var generaterow = function (i) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);

                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                return row;
            }

            for (var i = 0; i < 10; i++) {
                var row = generaterow(i);
                data[i] = row;
            }

            var source =
            {
                localdata: data,
                datatype: "local",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                addrow: function (rowid, rowdata, position, commit) {
                    // synchronize with the server - send insert command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    commit(true);
                },
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    commit(true);
                },
                updaterow: function (rowid, newdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    var oldData = $('#jqxgrid').jqxGrid('getrowdata', rowid);
                    alert(oldData.firstname);
                    commit(true);
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                height: 350,
                source: dataAdapter,
                showtoolbar: true,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    container.append('<input id="addrowbutton" type="button" value="Add New Row" />');
                    container.append('<input style="margin-left: 5px;" id="addmultiplerowsbutton" type="button" value="Add Multiple New Rows" />');
                    container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Delete Selected Row" />');
                    container.append('<input style="margin-left: 5px;" id="updaterowbutton" type="button" value="Update Selected Row" />');
                    $("#addrowbutton").jqxButton();
                    $("#addmultiplerowsbutton").jqxButton();
                    $("#deleterowbutton").jqxButton();
                    $("#updaterowbutton").jqxButton();
                    // update row.
                    $("#updaterowbutton").on('click', function () {
                        var datarow = generaterow();
                        var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                        var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                            var commit = $("#jqxgrid").jqxGrid('updaterow', id, datarow);
                            $("#jqxgrid").jqxGrid('ensurerowvisible', selectedrowindex);
                        }
                    });

                    // create new row.
                    $("#addrowbutton").on('click', function () {
                        var datarow = generaterow();
                        var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                    });

                    // create new rows.
                    $("#addmultiplerowsbutton").on('click', function () {
                        $("#jqxgrid").jqxGrid('beginupdate');
                        for (var i = 0; i < 10; i++) {
                            var datarow = generaterow();
                            var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                        }
                        $("#jqxgrid").jqxGrid('endupdate');
                    });

                    // delete row.
                    $("#deleterowbutton").on('click', function () {
                        var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                        var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                            var commit = $("#jqxgrid").jqxGrid('deleterow', id);
                        }
                    });
                },
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 200 },
                  { text: 'Last Name', datafield: 'lastname', width: 200 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

April 15, 2014 at 8:23 am Getting old values of a row in updaterow method #53094

Shankar

Participant

Hi Dimitar

I have tried the above sample code with one additional property for the grid i.e “editable: true” . When I update the “first name” cell and tab out of it then “updaterow” will be automatically called as it is provided in the source. Inside the “updaterow” when I get row data using “getrowdata” method before “commit(true)” call I am getting the new value and not the old value.

Please check with “editable: true” property for the grid.

Thanks
Shankar

April 15, 2014 at 12:46 pm Getting old values of a row in updaterow method #53113

Dimitar

Participant

Hi Shankar,

We confirm this behaviour. This leaves us with your initial idea, to get the old data when the cell enters edit mode and save it in a variable. You can get the old value (at the start of editing) as follows:

$("#jqxGrid").on('cellbeginedit', function (event) 
{
    var column = args.datafield;var row = args.rowindex;
    var value = args.value;
});

but you may also use getrowdata here to get the values of all rows before the modification.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

September 13, 2017 at 9:43 am Getting old values of a row in updaterow method #95976

timo75

Participant

So is there a way to “inject” the old cell value (gathered through cellbeginedit) into the updaterow callback? I find the updaterow callback very handy because it’s automatically triggered once you change a cell’s value. It would just be nice transfer the old row or cell values to a server in order to only update the changed values server-side. Especially when when a row’s fields a stored in different models in the database this would avoid unnecessary database queries.

September 14, 2017 at 5:08 am Getting old values of a row in updaterow method #95991

Dimitar

Participant

Hello timo75,

If you have stored the old cell value in a global variable, it should be accessible in the updaterow callback, too. You can then pass it to your custom Ajax call for server synchronisation.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.