jQuery UI Widgets Forums Grid JqxGrid deleting empty row Deleted wrong index

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

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

  • Pankaj Srivastava
    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’);

    var rows = $(“#jqxprojectgrid”).jqxGrid(‘getrows’);
    if (columnindex == 9) {
    debugger;
    // open the popup window when the user clicks a button.
    editrow = rowindex;
    deleteRowIndex = rowindex;
    // open the popup window when the user clicks a button.
    id = $(“#jqxprojectgrid”).jqxGrid(‘getrowid’, editrow);
    var offset = $(“#jqxprojectgrid”).offset();
    $(“#popupprojectWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 80, y: parseInt(offset.top) + 30 } });
    // show the popup window.
    $(“#popupprojectWindow”).jqxWindow(‘show’);
    }
    });

    Thanks
    Pankaj S.


    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/


    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.


    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/


    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


    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/

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

You must be logged in to reply to this topic.