CODEWITHSUNDEEP
sortingjqgrid
David__
David__

Reputation: 375

jqGrid: sort by index

I am having trouble getting a column to sort by an index other than the 'name' value. In this case I am trying to sort the aggregation type column (values are days of the week) by the week order, rather than alphanumeric order. To do this I added an index column ('Aggregation type-index') that has the days of week an integers. However with this configuration, it fails to sort that column by index or name. Can someone point me the err in my ways?

I posted all the js and css that is on the page, because I am also having two other issues, that if you notice the problem great, otherwise I'll keep hunting. I want to be able to enable the column reodering and be able to resize the grid (Both shown at http://trirand.com/blog/jqgrid/jqgrid.html under the new in 3.6 tab). Both options are not working either.

<link rel="stylesheet" type="text/css" href="/static/latest_ui/themes/base/jquery.ui.all.css"/> 
<link rel="stylesheet" type="text/css" media="print" href="/static/css/print.css"/>


<script src="/static/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/static/latest_ui/ui/jquery.ui.core.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.widget.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.position.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.button.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.menu.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.menubar.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.tabs.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.datepicker.js"></script>
<script src="/static/js/custom.js"></script>



<link rel="stylesheet" type="text/css" media="all" href="/static/css/custom_style.css" />
<link rel="stylesheet" type="text/css" media="all" href="/static/css/custom_colors.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/ui.jqgrid.css" />

<body>
<table id="grid_reports"></table>
<div id='pager'></div>
</body>

<script src="/static/latest_ui/ui/jquery.ui.resizable.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.sortable.js"></script>
<script src="/static/js/grid.locale-en.js" type="text/javascript"></script>
<script src="/static/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/static/js/jqGrid_src/grid.jqueryui.js"></script>

<script>
$(function() {
jQuery("#grid_reports").jqGrid({
sortable: true,
datatype: "local",
height: 500,
width: 300,
colNames:['Series', 'Agg Type', 'Days'],
colModel:[{'index': 'By series', 'align': 'left', 'sorttype': 'text', 'name': 'By series', 'width': 65}, {'index': 'Aggregation type-index', 'align': 'left', 'sorttype': 'int', 'name': 'Aggregation type', 'width': 75}, {'index': 'Days since event', 'align': 'center', 'sorttype': 'text', 'name': 'Days since event', 'width': 50}],

rowNum:50,
pager: '#pager',  
sortname: 'Aggregation type',       
sortorder: 'desc',   
altRows: true,                                                              
rowList:[20,50,100,500,10000],
viewrecords: true,
gridview: true,
caption: "Report for 6/19/12"               
});
jQuery("#grid_reports").navGrid("#pager",{edit:false,add:false,del:false});
jQuery("#grid_reports").jqGrid('gridResize',{minWidth:60,maxWidth:2500,minHeight:80, maxHeight:2500});

var mydata = [{'Days since event': 132, 'Aggregation type': 'Date=Fri', 'By series': 'mean', 'Aggregation type-index': 5}, {'DIM at event': 178, 'Aggregation type': 'Date=Thu', 'By series': 'mean', 'Aggregation type-index': 4}, {'DIM at event': 172, 'Aggregation type': 'Date=Wed', 'By series': 'mean', 'Aggregation type-index': 3}, {'DIM at event': 146, 'Aggregation type': 'Date=Tue', 'By series': 'mean', 'Aggregation type-index': 2}, {'DIM at event': 132, 'Aggregation type': 'Date=Sat', 'By series': 'mean', 'Aggregation type-index': 6}, {'DIM at event': 162, 'Aggregation type': 'Date=Mon', 'By series': 'mean', 'Aggregation type-index': 1}, {'DIM at event': 139, 'Aggregation type': 'Date=Sun', 'By series': 'mean', 'Aggregation type-index': 0}];
for(var i=0;i<=mydata.length;i++)
jQuery("#grid_reports").jqGrid('addRowData',i+1,mydata[i]);
});

</script>

Upvotes: 0

Views: 1608

Answers (1)

Oleg
Oleg

Reputation: 221997

You have some problems in the code:

  • you should use name and index properties which has no spaces or meta-characters (see here). For example you can rename the column name 'Aggregation type' in 'Aggregation_type'.
  • you can use different values for name and index properties only in case of remote data (in case of datatype: "json" or datatype: "xml").
  • you should not fill grid with respect of addRowData. It's the most slow way which I know. Much better and easier would be to move definition of the mydata on the top of the code (before creating of the grid), include additional property id in every item of the array and use data: mydata option of jqGrid. In the case the grid will be created together with the data, the data will be sorted and the first page of data will be displayed.
  • if you need implement any custom sorting you can define sorttype property of the column as function instead of default 'text' (see here and here for example). For example the function can return 4 for 'Date=Fri' value and return 5 for 'Date=Sat'. Then you can implement the exact custom sorting as you want.

Upvotes: 1

Related Questions