JqxGrid deleting empty row Deleted wrong index - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: blank, delete, deleterow, empty, getrowid, grid, id, index, jqxgrid, row, rowid

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 10 years, 5 months ago.

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

Author

JqxGrid deleting empty row Deleted wrong index Posts

May 11, 2014 at 11:21 am JqxGrid deleting empty row Deleted wrong index #54327

Participant

Hi Team,

We are facing an issue while deleting rows from jqxgrid,when we click on delete button its working fine when we have data in row but when we add an empty row in grid and trying to delete those empty rows then it deleted last row of grid, deleteRowIndex value we are setting from cellclick event which returns always correct value,suppose deleterowIndex=0 so it should be return 0th index but $(“#jqxprojectgrid”).jqxGrid(‘getrowid’, deleteRowIndex) return 3rd row why ?
if we are using only deleteRowIndex like $(“#jqxprojectgrid”).jqxGrid(‘deleterow’, deleteRowIndex); this is also deleting wrong index value sometime its not working.

so please help me asap.

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.
var rows = $(“#jqxprojectgrid”).jqxGrid(‘getrows’);
if (rows.length != null && rows.length > 0) {
debugger;
var rowindexid = rows[rowid].ID;
if (rowindexid != undefined && rowindexid != “” && rowindexid != null){
deleteProjectItem(rowindexid);
}
}
commit(true);
},

$(“#delProject”).off(‘click’).click(function () {
var rowscount = $(“#jqxprojectgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (deleteRowIndex >= 0 && deleteRowIndex < rowscount) {
debugger;
//var id = $(“#jqxprojectgrid”).jqxGrid(‘getrowid’, deleteRowIndex);
var commit = $(“#jqxprojectgrid”).jqxGrid(‘deleterow’, deleteRowIndex);

$(“#popupprojectWindow”).jqxWindow(‘hide’);
}
});
var deleteRowIndex = -1;
var columnindex = -1;
$(“#jqxprojectgrid”).on(“cellclick”, function (event) {
// $(“#jqxprojectgrid”).jqxGrid({ width: “1226px” });
var column = event.args.column;
var rowindex = event.args.rowindex;
columnindex = event.args.columnindex;
$(‘#customeditorjqxprojectgridMembers_’ + rowindex).css(‘overflow’, ‘visible’);

Thanks
Pankaj S.

May 12, 2014 at 5:43 am JqxGrid deleting empty row Deleted wrong index #54332

Dimitar

Participant

Hello Pankaj S.,

Please note that row index and row id are not the same things and are not always equal. You need the row id for the deleterow method, as stated in the API Documentation:

// @param row id. Use the ‘getrowid’ method to get the id of a row.
var value = $(‘#jqxGrid’).jqxGrid(‘deleterow’, rowid);

Best Regards,
Dimitar

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

May 12, 2014 at 7:17 am JqxGrid deleting empty row Deleted wrong index #54338

Pankaj Srivastava

Participant

Hi Drimitar,

Thanks for reply but I was also used below code but getrowid return incorrect value it only returns bounded row id not empty row id.

var id = $(“#jqxprojectgrid”).jqxGrid(‘getrowid’, deleteRowIndex);
var commit = $(“#jqxprojectgrid”).jqxGrid(‘deleterow’, id);

suppose i have 3 rows binded when grid load and i added 2 more row from top so if i want to delete 0 index row by using below code it will delete my last binded row of grid which is wrong i want to delete the same row which i clicked i don’t care it empty or binded.

var id = $(“#jqxprojectgrid”).jqxGrid(‘getrowid’, deleteRowIndex);
var commit = $(“#jqxprojectgrid”).jqxGrid(‘deleterow’, id);

Thanks,
Pankaj S.

May 12, 2014 at 8:20 am JqxGrid deleting empty row Deleted wrong index #54340

Dimitar

Participant

Hi Pankaj S.,

Here is an example, based on the demo Create, Remove, Update. You can add a few rows with the buttons in the toolbar and then click on any row to delete it. Do you experience any issues with this example? Please make sure you are using the latest version of jQWidgets (3.2.2) before testing.

<!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.
                    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' }
                ]
            });

            $("#jqxgrid").on("cellclick", function (event) {
                var deleteRowIndex = event.args.rowindex;
                var id = $("#jqxgrid").jqxGrid("getrowid", deleteRowIndex);
                $("#jqxgrid").jqxGrid("deleterow", id);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

May 12, 2014 at 8:59 am JqxGrid deleting empty row Deleted wrong index #54341

Pankaj Srivastava

Participant

Hi Dimitar,

Thanks for reply i saw this example earlier and I have implemented the same but in this http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/createremoveupdatedata.htm?arctic example all rows are already binded so it returns valid rowid i would request you to please add some blank row from top and then try to delete those blank row and then see what happened it will delete row randomly.

Please provide me solution asap.

Thanks,
Pankaj Srivastava

May 13, 2014 at 6:07 am JqxGrid deleting empty row Deleted wrong index #54378

Dimitar

Participant

Hello Pankaj Srivastava,

Here is a modified version of our example. When you click the “Add New Row” button, a blank row is added to the bottom of the grid. You can then click any row and it is deleted as expected. Please try the example out.

<!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.
                    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 commit = $("#jqxgrid").jqxGrid('addrow', null, {});
                    });

                    // 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' }
                ]
            });

            $("#jqxgrid").on("cellclick", function (event) {
                var deleteRowIndex = event.args.rowindex;
                var id = $("#jqxgrid").jqxGrid("getrowid", deleteRowIndex);
                $("#jqxgrid").jqxGrid("deleterow", id);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.