jQuery(function($) {
	$("#States").jqGrid({
		url:'../Components/State.cfc?method=NextN&returnformat=json',
		datatype: 'json',
		colNames:['StateID','StateName','StateAbbr', 'Population', 'RowNumber'],
		colModel :[
			{name:'StateID',index:'StateID', width:50, sorttype:"int"},
			{name:'StateName',index:'StateName', width:150, sorttype:"string"
			// ,formatter: 'showlink', formatoptions: {baseLinkUrl: 'State.cfm'}
			},
			{name:'StateAbbr',index:'StateAbbr', width:150, sorttype:"string"},
			{name:'Population',index:'Population', width:150, align:"right",sorttype:"int"},
			{name:'RowNumber',index:'RowNumber', width:150, align:"right",sortable:false}
		],
		pager: $('#StatesPager'),
		rowNum:10,
		rowList:[10,50,100,500],
		sortorder: "asc",
		sortname: "StateID",
		viewrecords: true,
		caption: 'States',
		height:"auto",
		jsonReader: {
			root: "ROWS",
			page: "PAGE",
			records: "RECORDS",
			total: "TOTAL",
			cell: "CELL",
			id: "ID"
		},
		onSelectRow: viewCitiesForState
	});
});


function viewCitiesForState(stateID){
	$('#Cities').setGridParam({url: "../Components/City.cfc?method=NextN&returnformat=json&stateID="+stateID}).trigger("reloadGrid");
}