jQuery UI Widgets Forums Grid Getting old values of a row in updaterow method

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

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

  • Shankar
    Participant

    Hi

    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


    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/


    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


    Dimitar
    Participant

    Hi Shankar,

    Did you try our approach (using getrowdata)?

    Best Regards,
    Dimitar

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


    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.


    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/


    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


    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/


    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.


    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/

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

You must be logged in to reply to this topic.