CODEWITHSUNDEEP
jqgrid
user584018
user584018

Reputation: 11304

how to drop jqgrid row between not draggable rows

I have a jgGrid where, enter image description here

  1. I can drag/drop rows up and down
  2. 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>

Upvotes: 1

Views: 624

Answers (1)

Oleg
Oleg

Reputation: 221997

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:

enter image description here

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).

Upvotes: 1

Related Questions