problem deleting row with button in cell

[arkgroupParticipant]

I have modified one of you sample and add button Delete in every row.
Please look at code below. When click button delete for first row (Regina Davolio Caffe Americano 6 $2.50 $15.00) – row deleted, no problem. Click delete button on next row (Shelley Ohno White Chocolate Mocha 9 $3.60 $32.40 ) row is NOT DELETED! Everything works fine if you start deleting rows from bottom, but not from the top.

  <script type="text/javascript">
         $(document).ready(function () {
             $(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.
                    commit(true);
                }
            };
                 var dataAdapter = new $.jqx.dataAdapter(source);
                 // initialize jqxGrid
                 $("#jqxgrid").jqxGrid(
            {
                width: 850,
                height: 450,
                source: dataAdapter,
                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' },
                  { text: '', width: 50, columntype: 'button', cellsrenderer: function () {
                    return "Delete";
                    }, buttonclick: function (row) {

                        var commit = $("#jqxgrid").jqxGrid('deleterow', row);
 
                    }
                    }
                ]
            });
             });

        });
          </script>

[Peter StoevKeymaster]

Hi arkgroup,

deleterow method call expects Row ID, not Row Index like in your code.

See from the Documentation below:

Deletes a row or multiple rows. Returns a boolean value.

Code examples

Invoke the deleterow method.

// @param row id. Use the 'getrowid' method to get the id of a row.
var value = $('#jqxGrid').jqxGrid('deleterow', rowid);
                        
Invoke the deleterow method with an Array of row ids. If you pass an array of row ids, the Grid will delete multiple rows.

// get the rows loaded from the data source. Note that "getboundrows" method returns an array of rows loaded from the data source. The Grid's sorting, filtering, grouping and paging will not affect the result of the "getboundrows" method. If you want to get an array of the displayed rows, use the "getdisplayrows" method instead.
var rows = $("#jqxgrid").jqxGrid('getboundrows');
// populate an array with the first and second row ids. "uid" is the row's id. 
var rowIDs = new Array();
rowIDs.push(rows[0].uid);
rowIDs.push(rows[1].uid);
// delete the first and second rows.
var commit = $("#jqxgrid").jqxGrid('deleterow', rowIDs);

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts