how to drop jqgrid row between not draggable rows

Question

I have a jgGrid where,

I can drag/drop rows up and down
I also did necessary arrangement, so that user CAN NOT able to drag "test4" & "test5" row

Question : Everything's works perfect, but when I try to drop row between "test4" & "test5" row, I m not able to do that?

Looks like, when there is 2 not draggable rows, we can't put a row in between?

Is there any way, we can drop??? Thanks

Here is code,

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>
    <style type="text/css">
       .unsortable {}
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            'use strict';
            var mydata = [
                    {id: "1", name: "test1"},
                    {id: "2", name: "test2"},
                    {id: "3", name: "test3"},
                    {id: "4", name: "test4"},
                    {id: "5", name: "test5"},
                    {id: "6", name: "test6"},
                    {id: "7", name: "test7"}
                    ];

            $("#list").jqGrid({
                datatype: 'local',
                data: mydata,
                colNames: [/*'Id', */'Client'],
                colModel: [
                    {name: 'name', index: 'name', width: 200}
                ],
                loadComplete: function (data) {
                    jQuery("#4",jQuery("#list")[0]).addClass('unsortable');
                    jQuery("#5",jQuery("#list")[0]).addClass('unsortable');
                }

            }).jqGrid('sortableRows', { items: '.jqgrow:not(.unsortable)'});

        });
    </script>
</head>
<body>
    <table id="list"><tr><td></td></tr></table>
</body>
</html>

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

1

It seems that you use my old code posted many years ago in the answer. jqGrid and jQuery UI have now many new features.

I find your question very interesting. Thus I created the demo, which demonstrates a possible solution:

The idea of the solution consists from using cancel option of jQuery UI sortable instead of items (see jQuery UI documentation for more details).

I used in my demo ui-state-disabled class instead of unsortable and I assign the class to specific items by usage of rowattr, which is more effective as modifying classes of previously created rows in loadComplete.

var disabledIds = ["4", "5"];
$("#list").jqGrid({
    ...
    rowattr: function (item) {
        if ($.inArray(item.id, disabledIds) >= 0) {
            return {"class": "ui-state-disabled"};
        }
    },
    ...
});

The main call of sortableRows will looks as

$("#list").jqGrid("sortableRows", { cancel: ".ui-state-disabled" });

I would recommend you additionally to use more recent version of jqGrid as 4.4.1. I would recommend you to use free jqGrid 4.9.2 (see the wiki).

edited May 23 '17 at 10:28

Community

1
1

answered Aug 21 '15 at 18:19

Oleg

220,925
34
403
798

First of all Thank You Very Much Oleg for such a nice help. Yes, I follow your code always when I need to work on JQGrid. :) , Only one thing, can we remove gray out color for rows which have been made disabled? Thanks! – user584018 Aug 22 '15 at 01:58
In my case, my first row in grid will not draggable, can we make a arrangement so that user can drop a row above a first row of grid? note - my grid will not have a paging. thanks! – user584018 Aug 22 '15 at 04:10
@user584018: You are welcome! To remove remove gray out color for rows you should just use any other class as `ui-state-disabled`, for example a dummy class `unsortable`. It's just **any class**. See [the modified demo](http://www.ok-soft-gmbh.com/jqGrid/OK/sortableRows_free1_.htm). I used `ui-state-disabled` to make the user visible which rows are not movable. You can easy move sortable row above unsortable. Just try this on my demo. – Oleg Aug 22 '15 at 08:50
Thanks Much! I got it. Can you help me more. Assume in same example (only one page in grid), my first row is unsortable, Can we make a arrangement that user **can't** drop any sortable element above it? Initially I wrote can (sorry) Thanks! – user584018 Aug 22 '15 at 11:24
@user584018: Yes of cause! I posted you two demos. You can **try the demos** and see that you can drop any sortable rows **on any place** inclusive the first position before where there are exist unsortable row. It's the main reason of the usage `cancel` option instead of `items`. – Oleg Aug 22 '15 at 11:27
I don't want, one can place above my first row, which I will make also non draggable – user584018 Aug 22 '15 at 11:29
@user584018: Sorry, but I can't follow you. Could you try [the first demo](http://www.ok-soft-gmbh.com/jqGrid/OK/sortableRows_free1.htm) or [the second one](http://www.ok-soft-gmbh.com/jqGrid/OK/sortableRows_free1_.htm) and to describe step by step instructions to reproduce any problem which you still see. Please include expected results and the results which you have instead. – Oleg Aug 22 '15 at 11:34
In your example grid, the first row (Inv No = 11) is unsortable (non-dragabble), now I want to make it top most element of grid and **one should not able to drop** a row above it, would you please help me on this? Thanks – user584018 Aug 22 '15 at 11:36
@user584018: I'm not sure why you need to have such requirement, but it's the behavior of `items` option which you used before. See [the third demo](http://www.ok-soft-gmbh.com/jqGrid/OK/sortableRows_free1__.htm) which uses *both* `items` and `cancel` options. – Oleg Aug 22 '15 at 11:43
it's a mix of **items** and "cancel". Yes, I agree, this is very annoying requirement, but my customer want like this. Anyway, thanks! – user584018 Aug 22 '15 at 11:48
@user584018: You are welcome! It's important to understand that `sortableRows` just uses jQuery UI sortable on `items: ">.jqgrow"` on `tbody` of jqGrid. The selector ">.jqgrow" selectr `` elements (rows). You can use any other options, callbacks and events of [sortable](http://api.jqueryui.com/sortable/) for customization. – Oleg Aug 22 '15 at 12:00
Thanks Oleg, One more thing, I also need to update the row order after sorting. I thought to get all Id's of grid after drop. to catch this I will use, **is it OK??**, $('#jqgTopMenu').jqGrid('sortableRows', { update: function (e, ui) { var ids = $("#jqgTopMenu").jqGrid('getDataIDs');}); !! Some one suggest here, http://stackoverflow.com/questions/27603349/jqgrid-row-ordering-by-drag-and-drop – user584018 Aug 22 '15 at 12:06
@user584018: You are welcome! I think that `update` callback can be good used for your purpose. You can read in [jQuery UI API documentation](http://api.jqueryui.com/sortable/#event-update): "This event is triggered when the user stopped sorting and **the DOM position has changed**". Thus the ids which you get inside of `update` callback should be already in the changed order. You should only take in consideration to use `$.jgrid.stripPref` if you used `idPrefix` option. – Oleg Aug 22 '15 at 12:21
could you please explain **$.jgrid.stripPref** with some example, We have to have to use *idPrefix * – user584018 Aug 22 '15 at 12:28
@user584018: Let us you have two grids (or grid with subgrids) on the same HTML page. Let us you have input `id` properties for rows which come from id of the *tables* of the database. You can have **the same** `id` values for both grids, for example "11", "7", "3". To prevent id duplicates you can use `idPrefix: "g1_"` in the first grid and `idPrefix: "g2_"` in the second grid. As the result `id` attributes of rows (rowids returned by `getDataIDs`) will be "g1_11", "g1_7", "g1_3" in the first grid and "g2_11", "g2_7", "g2_3" in the second grid. – Oleg Aug 22 '15 at 12:37
@user584018: To get *original ids* used in input data you have to *cut* (strip) the prefix specified in `idPrefix`. The code of `$.jgrid.stripPref` see [here](https://github.com/free-jqgrid/jqGrid/blob/v4.9.2/js/grid.base.js#L633-L640) is very easy. It's simple helper which are used internally in jqGrid to strip the prefix from rowid. You can use `jQuery.map` for example and call `$.jgrid.stripPref` inside to remove `idPrefix` from ids returned by `getDataIDs`. – Oleg Aug 22 '15 at 12:40

how to drop jqgrid row between not draggable rows

1 Answers1

Linked