How to delete rows with local data in jqgrid

Question

jqGrid parameter loadonce: true is used

Selecting rows and pressing delete button

No url is set

How to delete rows in local data only and suppress this error message ? Is it possbile to set some dummy url or any other idea to allow row delete? It would be nice if add and edit forms can be used also with local data.

            url: 'GetData',
            datatype: "json",
            multiselect: true,
            multiboxonly: true, 
            scrollingRows : true,
            autoencode: true,
            loadonce: true, 
            prmNames:  {id:"_rowid", oper: "_oper" }, 
            rowTotal: 999999999,
            rownumbers: true,
            rowNum: 999999999,

Update 1

From Oleg answer I understood the following solution:

Disable jqGrid standard delete button
Add new delete button to toolbar.
From this button click event call provided

grid.jqGrid('delGridRow', rowid, myDelOptions);

method. Multiple rows can selected. How to delete all selected rows, this sample deletes only one ?

Is'nt it better to change jqGrid so that delete, edit, add buttons work without url ? Currently it is required to pass dummy url which returns success always for local data editing.

score 10 · Accepted Answer · edited May 23 '17 at 10:29

10

You can use delRowData method do delete any local row.

You can do use delGridRow from the form editing if you need it. I described the way here and used for formatter:'actions' (see here, here and originally here).

var grid = $("#list"),
    myDelOptions = {
        // because I use "local" data I don't want to send the changes
        // to the server so I use "processing:true" setting and delete
        // the row manually in onclickSubmit
        onclickSubmit: function(options, rowid) {
            var grid_id = $.jgrid.jqID(grid[0].id),
                grid_p = grid[0].p,
                newPage = grid_p.page;

            // reset the value of processing option which could be modified
            options.processing = true;

            // delete the row
            grid.delRowData(rowid);
            $.jgrid.hideModal("#delmod"+grid_id,
                              {gb:"#gbox_"+grid_id,
                              jqm:options.jqModal,onClose:options.onClose});

            if (grid_p.lastpage > 1) {// on the multipage grid reload the grid
                if (grid_p.reccount === 0 && newPage === grid_p.lastpage) {
                    // if after deliting there are no rows on the current page
                    // which is the last page of the grid
                    newPage--; // go to the previous page
                }
                // reload grid to make the row from the next page visable.
                grid.trigger("reloadGrid", [{page:newPage}]);
            }

            return true;
        },
        processing:true
    };

and then use

grid.jqGrid('delGridRow', rowid, myDelOptions);

UPDATED: In case of multiselect: true the myDelOptions can be modified to the following:

var grid = $("#list"),
    myDelOptions = {
        // because I use "local" data I don't want to send the changes
        // to the server so I use "processing:true" setting and delete
        // the row manually in onclickSubmit
        onclickSubmit: function(options) {
            var grid_id = $.jgrid.jqID(grid[0].id),
                grid_p = grid[0].p,
                newPage = grid_p.page,
                rowids = grid_p.multiselect? grid_p.selarrrow: [grid_p.selrow];

            // reset the value of processing option which could be modified
            options.processing = true;

            // delete the row
            $.each(rowids,function(){
                grid.delRowData(this);
            });
            $.jgrid.hideModal("#delmod"+grid_id,
                              {gb:"#gbox_"+grid_id,
                              jqm:options.jqModal,onClose:options.onClose});

            if (grid_p.lastpage > 1) {// on the multipage grid reload the grid
                if (grid_p.reccount === 0 && newPage === grid_p.lastpage) {
                    // if after deliting there are no rows on the current page
                    // which is the last page of the grid
                    newPage--; // go to the previous page
                }
                // reload grid to make the row from the next page visable.
                grid.trigger("reloadGrid", [{page:newPage}]);
            }

            return true;
        },
        processing:true
    };

UPDATED 2: To have keyboard support on the Delete operation and to set "Delete" button as default you can add in the delSettings additional option

afterShowForm: function($form) {
    var form = $form.parent()[0];
    // Delete button: "#dData", Cancel button: "#eData"
    $("#dData",form).attr("tabindex","1000");
    $("#eData",form).attr("tabindex","1001");
    setTimeout(function() {
        $("#dData",form).focus(); // set the focus on "Delete" button
    },50);
}

edited May 23 '17 at 10:29

Community

1
1

answered Jul 23 '11 at 13:13

Oleg

220,925
34
403
798

1

@Andrus: If you use navigator bar of jqGrid you can just use `myDelOptions` as the `prmDel` parameter of the [navGrid](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator#definition). I posted the code how to implement local form editing and posted [the corresponding suggestion](http://www.trirand.com/blog/?page_id=393/bugs/small-bug-in-generating-new-id-in-postit-of-editgridrow/#p22393) to trirand forum. I can't do more. Next you wrote about the usage of `multiselect:true` just now. It's **absolutely new requirement**. jqGrid don't oriented of mustiselect in grid editing. – Oleg Jul 24 '11 at 09:09
thank you. Options posted in initial questions had `multiselect: true`. jQgrid standard delete button deletes all selected rows but provided local replacement deletes only one row. – Andrus Jul 24 '11 at 09:21
1

@Andrus: Sorry, you are right and I skipped the `multiselect: true` before. I modified the `myDelOptions` so that all should work now for both `multiselect: true` or `multiselect: false`. It's important only that rowid should not contain ',' inside. – Oleg Jul 24 '11 at 10:45
1

@Andrus: I updated the code one more time a little, so it works not even if rowids contain ',' (commas) inside. – Oleg Jul 24 '11 at 11:07
thank you very much. It works. I marked it as answer and upvoted your answer and responces. question: How to force enter key press on to be accepted as Delete answer to jqGrid Delete confirmation dialog ? Currenty it is required to click in button by mouse which is inconvenient. How to allow to use keyboard to respond delete and other confirmation dialogs? Anothr issue: I marked 800 rows and tried to delete them. IE stops responding and cpu usage goes high. It looks like deleting 800 rows takes huge amout of time. jqGrid original delete button has this issue also. – Andrus Jul 24 '11 at 12:32
2

@Andrus: Because you use `loadonce: true` all the data are local. How you can mark 800 rows at once? Do you use no local paging? Why? In the case the whole work with the grid will **much more slowly** as in case of local paging. If you do have to work without local data paging you can not use `delRowData`. Instead of that you can remove the items which you need to delete from `data`, `_index` and `selarrrow` parameters **directly** and just reload the jqGrid. It will work much more quickly. – Oleg Jul 24 '11 at 12:43
maybe it is possible to replace jquery delete conformation dialog with javascript alert box? In this case keyboard works. – Andrus Jul 24 '11 at 12:44
As shown in options in question I used `loadonce: true, rowTotal: 999999999, rowNum: 999999999, ` and clicked in checkbox column caption checkbox to mark them all. This allows to save whole order at once. This requires special logic in server to find which rows needs to be updated, deleted or added. I'm thinking maybe it is better to stop using local data and cell edititng mode. Instead of this maybe it is better to save every detail row togetger with order data immediately using inline editing as you recommended earlier. – Andrus Jul 24 '11 at 13:10
1

@Andrus: I added you an example how to support keyboard in the "Delete" dialog. I have seen the option `rowNum: 999999999` which seems too larger for me. Just try to work with grid having at least `rowNum: 10000` or `rowNum: 100000`. Compare the performance of http://www.ok-soft-gmbh.com/jqGrid/5000paged.htm with http://www.ok-soft-gmbh.com/jqGrid/5000.htm and you will see why I recommend to use local paging. The usage of "select all" and "delete all" is not standard multiselect operation. You can easy manage it in another way. – Oleg Jul 24 '11 at 13:27
than you very much. Pressing Enter allows to delete now. Paging looks inconvenient. Is it better to use virtual scrolling with `scroll: 1` instead of paging? – Andrus Jul 24 '11 at 13:41
@Andrus: I din't used `scroll:1` or `scroll:true` in projects developed for my customers. There are many bugs in the implementation of the virtual scrolling of jqGrid in the past. I find that the users could easy understand paging GUI and use it instead of scroll bars. Till the virtual scrolling are not implemented for local data I will don't use it to have less problems. – Oleg Jul 24 '11 at 13:58
1

@Andrus: Look at the modified code. The line `options.processing = true;` should be added in the `onclickSubmit` method of the `myDelOptions`. See [here](http://stackoverflow.com/questions/6899045/why-a-404-error-for-editurl-clientdata-when-deleting-a-second-row-from-jqgrid/6900347#6900347) for details. – Oleg Aug 01 '11 at 17:07
thank you. I refactored application so that local data is not used anymore, only remote json data with virtual scrolling. I use yor great solution here on enabling Enter in Delete confirmation dialog. If would be nice enter works for "Please select row" message also. – Andrus Aug 04 '11 at 12:02
Thanks Oleg. I was hunting for this for 3 days. You had helped me with the similar thing for the edit. But did not realize that it applies to delete too. Seems jqGrid is a bit quirky when handling array data. May be we need a better wrapper API to make sense of data handling. You rock! – Higher-Kinded Type Feb 05 '14 at 00:58
@VivekRagunathan: You are welcome! In my opinion it would be good to have more common options for *all* editing modes. Implementing of editing of local data delete/add/edit should be implemented in jqGrid too of cause. Nevertheless it's good at least that one can solve the problem in another way. – Oleg Feb 05 '14 at 07:06

How to delete rows with local data in jqgrid

1 Answers1

Linked