how to drop jqgrid row between not draggable rows

Asked 21/8, 2015 at 16:24 Answered 21/8, 2015 at 18:19

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>

Thumbnail answered 21/8, 2015 at 16:24 Comment(0)

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

Circumstance answered 21/8, 2015 at 18:19 Comment(16)

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! – Thumbnail 22/8, 2015 at 1: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! – Thumbnail 22/8, 2015 at 4: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. 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. – Circumstance 22/8, 2015 at 8: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! – Thumbnail 22/8, 2015 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. – Circumstance 22/8, 2015 at 11:27

I don't want, one can place above my first row, which I will make also non draggable – Thumbnail 22/8, 2015 at 11:29

@user584018: Sorry, but I can't follow you. Could you try the first demo or the second one 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. – Circumstance 22/8, 2015 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 – Thumbnail 22/8, 2015 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 which uses both items and cancel options. – Circumstance 22/8, 2015 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! – Thumbnail 22/8, 2015 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 <tr> elements (rows). You can use any other options, callbacks and events of sortable for customization. – Circumstance 22/8, 2015 at 12:0

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, #27603849 – Thumbnail 22/8, 2015 at 12:6

@user584018: You are welcome! I think that update callback can be good used for your purpose. You can read in jQuery UI API documentation: "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. – Circumstance 22/8, 2015 at 12:21

could you please explain $.jgrid.stripPref with some example, We have to have to use *idPrefix * – Thumbnail 22/8, 2015 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. – Circumstance 22/8, 2015 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 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. – Circumstance 22/8, 2015 at 12:40

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags