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>
