views:

949

answers:

2

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?

A: 

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.6.5/js/i18n/grid.locale-en.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.6.5/js/jquery.jqGrid.min.js"&gt;&lt;/script&gt;

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

Oleg
I'll give this a whirl. I don't exactly follow the logic, especially the #C28015 part, but anything is worth a try.
gurun8
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'`.
Oleg
A: 

It took awhile for me to figure this one out but I got 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.

gurun8