jqGrid disable sortablerows

Y

3

5

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?

Yi answered 30/4, 2010 at 19:55 Comment(0)

Y

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.

Yi answered 6/5, 2010 at 4:49 Comment(1)

Thank you. I like your approach as it does everything with one line of code, but does sacrifice Oleg's granularity of independent rows. – Parmesan 3/8, 2012 at 0:1

N

3

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.

Necessity answered 5/5, 2010 at 17:55 Comment(7)

I'll give this a whirl. I don't exactly follow the logic, especially the #C28015 part, but anything is worth a try. – Yi 6/5, 2010 at 1:28

every <tr> has the same id as you define in row of your data. To find <tr> 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 <tr> with id='C28015'. – Necessity 6/5, 2010 at 6:27

@Joper: Could you explain context of your question? Is it the question to my this answer? Where I used this statement? – Necessity 22/8, 2011 at 12:42

@Necessity 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 – Antoine 22/8, 2011 at 12:53

@Necessity on this sample ok-soft-gmbh.com/jqGrid/sortableRows.htm only last row(Notes) not sortable – Antoine 22/8, 2011 at 13:5

@Joper: I still not understand where you have the problem. You can open the source code of 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. – Necessity 22/8, 2011 at 13:53

@Oleg... Dr. where do you come up with this stuff? Great solution to the problem! – Parmesan 3/8, 2012 at 0:3

H

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.

Harwilll answered 27/6, 2011 at 6:53 Comment(0)

Recommended topics

Hot tags