How to get the new row order after sort rows in jQgrid?

Question

I have the following grid definition:

$(document).ready(function () {
    $("#thegrid").jqGrid({
        url: "/ajax/questions/get/" + form_id,
        datatype: "json",
        colNames: ['id', 'grid_id', 'seq', 'type', 'text'],
        colModel: [
            {name: 'field_id', index: 'id', width: 100, editable: false, search: false},
            {name: 'grid_id', index: 'grid_id', width: 50, editable: false, search: false},
            {name: 'field_seq', index: 'seq', width: 45, editable: false, search: false},
            {name: 'type', index: 'type', width: 125, editable: false, search: false},
            {name: 'field_name', index: 'text', width: 585, search: false}
        ],
        autowidth: true,
        rowNum: 200,
        cmTemplate: {width: 300, autoResizable: true},
        iconSet: "fontAwesome",
        guiStyle: "bootstrap",
        autoResizing: {compact: true, resetWidthOrg: true},
        viewrecords: true,
        autoencode: true,
        sortable: true,
        pager: true,
        toppager: true,
        hoverrows: true,
        multiselect: true,
        multiPageSelection: false,
        rownumbers: true,
        loadonce: true,
        autoresizeOnLoad: true,
        forceClientSorting: true,
        ignoreCase: true,
        prmNames: {id: "field_id"},
        jsonReader: {id: "field_id"},
        localReader: {id: "field_id"},
        navOptions: {edit: false, add: false, search: false, del: false, refresh: true},
        pgbuttons: false,
        pginput: false,
        caption: "Questions",
        height: 100,
        editurl: '/ajax/questions/edit',
        onSelectRow:
            function () {
                // ....
            },
        loadComplete: function () {
            // ...
        }
    })
});

With the code above it's possible to sort the rows by dragging them and dropping at some position at the grid.

In order to keep this changes I have a function in the backend that takes a form_id (I have this stored at sessionStorage) and an array of field_id => field_seq and do some magic at DB level.

Take a look at the following picture which is a grid that has been loaded for first time:

Now let's say I am dragging & dropping the colored row (id: 219110) into the first row position. That will makes the first row (id: 219110) to move one row down (same will happen to all rows after that one) and then the moved row will take the first position. See example below:

before:

+--------+--------+-----+
| id     | gri_id | seq |
+--------+--------+-----+
| 219111 |        | 1   |
| ...    |        | ... |
| 219110 |        | 4   |
+--------+--------+-----+

after:

+--------+--------+-----+
| id     | gri_id | seq |
+--------+--------+-----+
| 219110 |        | 1   |
| 219111 |        | 2   |
| ...    |        | ... |
+--------+--------+-----+

I need to build and array with the id as the key and the seq as the value so I can pass this later on to an AJAX backend function which will care about store the new data.

How do I achieve this?

score 1 · Accepted Answer · answered Jan 26 '18 at 18:12

1

You can use lastSelectedData parameter of jqGrid to get the items, which users sorted and filtered previously. The old answers: this one and another one provides the demos, which demonstrates the usage of lastSelectedData.

In general, jqGrid contains internally some JavaScript methods, which are used for sorting and filtering of local data. I described in the old answer tricky technique, which works on old jqGrid (i version <=4.7). Already in the first version of "free jqGrid" fork I implemented lastSelectedData parameter (see the readme), which makes working with the last sorted and filtered local data very easy.

answered Jan 26 '18 at 18:12

Oleg

220,925
34
403
798

Oleg, what would be the correct event to use after I reorder the rows? I was looking at [jQgrid Wiki for Events](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events) and all I can see and that has some sense to me is `onSortCol` but I think is not the right one. The idea is to trigger an AJAX call with the values from `lastSelectedData` as soon as I drag & drop the row at some position. – ReynierPM Feb 01 '18 at 13:37
1

@ReynierPM: The goal of `onSortCol` is giving a possibility to **prevent** sorting request. Reordering of the rows with respect of drag & drop means that you used `sortableRows` method, which uses jQuery UI internally. One can use `update` callback of the method to get new order. See demos from [the answer](https://stackoverflow.com/a/3357770/315935) or [another old answer](https://stackoverflow.com/a/9045125/315935) or [the next one](https://stackoverflow.com/a/41748340/315935) – Oleg Feb 01 '18 at 19:40
I couldn't make it to work, I've created [this fiddle](https://jsfiddle.net/reynierpm/Lofcv9vm/1/). The test: if I move any row to the first position then I would expected that as the first item on the `lastSelectedData` however I am getting the initial array. Can you take a look and tell me what I am missing? – ReynierPM Feb 01 '18 at 20:51
@ReynierPM: `lastSelectedData` shows the order of *sorted data* based on sorting criteria (`sortname`, `sortorder`). `sortableRows` allows the user to resort the data of the current page independent on any sorting criteria. One have to use `rowIndex` properties of `rows` to get the order of rows after drag & drop (see the demos from old answers, which references I posted). `lastSelectedData` or `data` will be **not changed**. – Oleg Feb 01 '18 at 21:00
I am not following you, I have read the demos but none seems to reflect what I am looking for – ReynierPM Feb 01 '18 at 21:14
@ReynierPM: `sortableRows` uses jQuery UI sortable, which "knows" nothing about jqGrid, It allows just resort rows of HTML table in any order, which the user like. [the ole demo](http://www.ok-soft-gmbh.com/jqGrid/SortaleRows1.htm) shows that `ui.item[0]` is DOM of ``, which has `rowIndex` property (see [here](https://www.w3schools.com/jsref/dom_obj_tablerow.asp), for example), like all other rows available via [tableDom.rows](https://www.w3schools.com/jsref/coll_table_rows.asp) property. It allows to get new order of rows (rowids) after drag & drop. See the source code of the demo. – Oleg Feb 01 '18 at 21:43
so if I am following you know this is tricky and can't be done from within jQgrid without involve what you've show me before. Having said that, because the example is using thr `rowId` do we have such value in `data` or `lastSelectedData`? My idea is to get the original data array and then having this `rowIndex` loop over the elements and find the one I am dragging & dropping so I can reorder the elements with the new position, I am not seeing any other way to achieve this :( – ReynierPM Feb 02 '18 at 14:14
@ReynierPM: Everything is easy too, but you have to use another technique. I'm now in business trip in Switzerland and I'm the whole time at one customer. Thus I just have almost no time for stackoverflow. $("#test")[0] is DOM of table and `$("#test")[0].rows[i]` (index 0 - hidden row without data, but starting with index 1 - the rows with data) are the rows (`` elements) with properties like `id` and `rowIndex`. `update: function (ev, ui) {...}` provide `ui.item[0]`, which is also DOM of ``. You can use `ui.item[0].rowIndex` to know new position if `$("#test")[0].rows` array. – Oleg Feb 02 '18 at 17:29
great I think I make it to work see [here](https://jsfiddle.net/reynierpm/Lofcv9vm/2/). I need to build a `key => value` pair using the `seq` column, how do I get that value as well? – ReynierPM Feb 02 '18 at 19:24

How to get the new row order after sort rows in jQgrid?

1 Answers1