jqgrid local on load, then remote

HTML

<script src="http://cdn.octavient.net/jqgrid/grid.locale-en.js"></script>
<script src="http://cdn.octavient.net/jqgrid/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://cdn.octavient.net/jqgrid/ui.jqgrid.css">
<link rel="stylesheet" href="http://cdn.octavient.net/jqgrid/jquery-ui-1.9.2.custom.min.css">
<table id="tbl_test"></table>
<div id="pgr_test"></div>

JavaScript

var obj_initial_data = { "page": 1, "total": 2, "records": 9, "rows": [
	{ "id": "1", "make":"VW", "model":"Bus", "year":"1976", "color":"green" },
	{ "id": "2", "make":"Ford", "model":"F150", "year":"1984", "color":"brown" },
	{ "id": "3", "make":"Toyota", "model":"Camry", "year":"1989", "color":"maroon" },
	{ "id": "4", "make":"VW", "model":"Passat", "year":"2003", "color":"blue" },
	{ "id": "5", "make":"Toyota", "model":"Tacoma", "year":"1997", "color":"silver" }
]};

$(document).ready(function () {
	$("#tbl_test").jqGrid({
		colNames: ['id', 'Make', 'Model', 'Year', 'Color'],
		colModel: [
            {name: 'id', index: 'id', hidden:true},
            {name: 'make', index: 'make'},
            {name: 'model', index: 'model'},
            {name: 'year', index: 'year'},
            {name: 'color', index: 'color'}
            ],
		url: 'http://cdn.octavient.net/jqgrid/test_server.aspx',
		pager: '#pgr_test', pgbuttons: true,
		datatype: 'local', data: obj_initial_data.rows,
        localReader: {
   			root: "rows",
   			page: "page",
   			total: "total",
   			records: "records",
   			repeatitems: false
    	},
		gridview: true,
		height: 180,
		//loadonce: true,
		autowidth:true,
		//rowNum: 5,
		viewrecords: true
	});	
    setTimeout(function(){
		var grid = $("#tbl_test");
		grid.jqGrid('setGridParam', { records: obj_initial_data.records, lastpage: obj_initial_data.total, datatype: 'json'});
		grid[0].updatepager(false,true);
	},1000);
});