jqGrid disable sortablerows

Question

I'm trying to disable sortablerows functionality from a grid. I'd like to have the ability to toggle on/off the sortablerows functionality. Enabling the feature is pretty straightforward:

jQuery("#list").jqGrid('sortableRows', {
     update: function(event, ui) { updateOrder() }
});

But disabling the feature has proven to be a little bit harder. I've consulted the UI Integrations where sortableRows is documented in the jqGrid Wiki:

www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods

And found that "The method is fully compatible with jQuery UI sortable widget." So I ventured off to the jQuery UI sortable documentation and found this:

http://jqueryui.com/demos/sortable/

jQuery("#list").jqGrid('sortableRows', {disabled: true});

The code above simply disables the rows. So I moved onto the destroy method:

jQuery("#list").jqGrid('sortableRows', {destroy: true});

but that doesn't do anything. Based upon the documentation the destroy method seems to be exactly what I need, so maybe my syntax is wrong but I can't seem to get it to work.

Does anyone have experience with this same issue?

gurun8 · Accepted Answer · 2011-06-07T04:31:02.240

8

It took awhile for me to figure this one out but I got it and it's pretty simple. This is all you need to do:

$("#list tbody").sortable("destroy");

My initial instincts to turn to jQuery UI Sortable documentation were right on. My syntax wasn't. I dug through the jqgrid JS file and found this:

a("tbody:first", i).sortable(b)

Which then pointed me in the right direction. It appears that the tbody is the hinge pin to the entire mess.

Not that anyone cares but I thought I should share in case someone else has a similar issue and my solution isn't a 100% fit for them.

Anywho, thanks for the help y'all. Mission accomplished.

edited Jun 07 '11 at 04:31

answered May 06 '10 at 04:49

gurun8

3,526
12
36
53

Thank you. I like your approach as it does everything with one line of code, but does sacrifice Oleg's granularity of independent rows. – Stephen Patten Aug 03 '12 at 00:01

score 3 · Answer 2 · edited May 23 '17 at 12:00

You should define a dummy CSS class like

.unsortable{}

then call sortableRows method of jqGrid replacing default items: '.jqgrow' parameter with

jQuery("#list").jqGrid('sortableRows', { items: '.jqgrow:not(.unsortable)'});

Now you should only add the class "unsortable" to the rows, which you want not permit be sortable. Let us we have in the grid rows with ids 'C28011' and 'C28015'. Then to do so you can either use setRowData method of jqGrid or call addClass method of jQuery directly:

jQuery("#list").setRowData ('C28011', false, 'unsortable');
jQuery("#C28015",jQuery("#list")[0]).addClass('unsortable');

UPDATED (add a code example): After reading of your comment I think it would be better if I post here a code example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
    <title>Demonstration of disabling sortableRows on some jqGrid rows</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.6.5/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.6.5/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.6.5/js/jquery.jqGrid.min.js"></script>

    <style type="text/css">
        #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
        #sortable li span { position: absolute; margin-left: -1.3em; }
        .unsortable {}
    </style>

    <script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function() {
            jQuery("#sortable").sortable({ items: 'li:not(.unsortable)'});
            jQuery("#sortable").disableSelection();

            jQuery("#sortrows").jqGrid({
                datatype: 'local',
                colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
                colModel:[
                    {name:'id',index:'id', width:55},
                    {name:'invdate',index:'invdate', width:90},
                    {name:'name',index:'name asc, invdate', width:100},
                    {name:'amount',index:'amount', width:80, align:"right"},
                    {name:'tax',index:'tax', width:80, align:"right"},
                    {name:'total',index:'total', width:80,align:"right"},
                    {name:'note',index:'note', width:250, sortable:false}
                ],
                rowNum:10,
                width:700,
                rowList:[10,20,30],
                pager: '#psortrows',
                sortname: 'invdate',
                viewrecords: true,
                sortorder: "desc",
                caption:"Sortable Rows Example"
            });
            jQuery("#sortrows").jqGrid('sortableRows', { items: '.jqgrow:not(.unsortable)'});

            var myData = [
                {id: "11", invdate: "2007-10-06", name: "Client 1", amount: "600.00",  tax:"120.00", total: "720.00", note: "not sortable"},
                {id: "9",  invdate: "2007-10-06", name: "Client 1", amount: "200.00",  tax:"40.00", total: "240.00",  note: "not sortable"},
                {id: "5",  invdate: "2007-10-05", name: "Client 3", amount: "100.00",  tax:"0.00", total: "100.00",   note: "not sortable"},
                {id: "7",  invdate: "2007-10-05", name: "Client 2", amount: "120.00",  tax:"12.00", total: "134.00",  note: "no tax at all"},
                {id: "6",  invdate: "2007-10-05", name: "Client 1", amount: "50.00",   tax:"10.00", total: "60.00",   note: ""},
                {id: "4",  invdate: "2007-10-04", name: "Client 3", amount: "150.00",  tax:"0.00", total: "150.00",   note: "no tax"}
            ];

            for (var i = 0; i < myData.length; i++) {
                jQuery("#sortrows").addRowData(myData[i].id, myData[i]);
            }

            jQuery("#sortrows").setRowData ('11', false, 'unsortable');
            jQuery("#sortrows").setRowData ('9', false, 'unsortable');
            jQuery("#5",jQuery("#sortrows")[0]).addClass('unsortable');
        });
    //]]>
    </script>
</head>

<body>


<div class="demo">

<ul id="sortable">
    <li class="ui-state-default unsortable"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 (not sortable)</li>
    <li class="ui-state-default unsortable"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2 (not sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3 (sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4 (sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5 (sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6 (sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7 (sortable)</li>
</ul>

</div>

<table id="sortrows"></table>
<div id="psortrows"></div>

</body>
</html>

In this code I use at the beginning standard jQuery sortable functionality to allow sort only selected items. Than I do the same inside of jqGrid. You can see this example working here http://www.ok-soft-gmbh.com/jqGrid/sortableRows.htm. So adding a dummy class 'unsortable' to a row follow to disabling "sortable" functionality. Removing of this class switch "sortable" on. You can do this any time for selected rows of grid or for all (jQuery("tr",jQuery("#list")[0]).addClass('unsortable');).

The only thing which you should don't forget: you should call setRowData or addClass after the data added in the grid, for example, inside of loadComplete function of jqGrid.

UPDATED 2: See the answer which described how to disable sorting for specific rows of the grid. It uses possibilities existing in more recent versions of jqGrid and jQuery UI.

I'll give this a whirl. I don't exactly follow the logic, especially the #C28015 part, but anything is worth a try. — gurun8, May 06 '10 at 01:28
every `` has the same `id` as you define in row of your data. To find `` with `id='C28015'` you should use `'#C28015'` selector. To search not in whole document, you can search only in the table body. `jQuery("#list")` point to table body `jQuery("#list")[0]` is the same, but as a DOM element and not jQuery object. So `jQuery("#C28015",jQuery("#list")[0]).addClass('unsortable')` add class `'unsortable'` to the `` with `id='C28015'`. — Oleg, May 06 '10 at 06:27
@Joper: Could you explain context of your question? Is it the question to my this answer? Where I used this statement? — Oleg, Aug 22 '11 at 12:42
@Oleg could not get it work with my grid, the columns staying sortable, i look at sourcecode in firebug and the columns still have class 'ui-jqgrid-sortable' just for test i replaced it to `unsortable` manually in fire bug and it is working, so fore some reason the `jQuery("#mygrid").jqGrid('sortableRows', { items: '.jqgrow:not(.unsortable)'});` does not get replaced with `unsortable` — Joper, Aug 22 '11 at 12:53
@Oleg on this sample http://www.ok-soft-gmbh.com/jqGrid/sortableRows.htm only last row(`Notes`) not sortable — Joper, Aug 22 '11 at 13:05
@Joper: I still not understand where you have the problem. You can open the source code of http://www.ok-soft-gmbh.com/jqGrid/sortableRows.htm in any browser and examine it. You will see that tree first items with ids '11', '9' and '5' will be first mark as unsortable by adding the class 'unsortable' to the rows. In the demo I do this in two ways: one with respect of `setRowData` and other with respect of `$.addClass`. Then with `jQuery("#sortable").sortable({ items: 'li:not(.unsortable)'});` one informs only jQuery UI Sortable which items should be not sorted. — Oleg, Aug 22 '11 at 13:53
@Oleg... Dr. where do you come up with this stuff? Great solution to the problem! — Stephen Patten, Aug 03 '12 at 00:03

ryziek · Answer 3 · 2011-06-29T13:16:04.843

2

As gurun8 wrote:

 $("#list tbody").sortable("destroy");

This works great. But, if you use inline editing, you might want to do

$("tbody:first","#list").enableSelection();

jqGrid sortableRows calls the disableSelection() function, which disallows the selection of any form element within the grid's tbody, thus preventing proper inline editing.

edited Jun 29 '11 at 13:16

answered Jun 27 '11 at 06:53

ryziek

41
3

jqGrid disable sortablerows

3 Answers3

Linked