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.