My code is as follows;

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Maintenance
</asp:Content>
 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 
	<fieldset>
		<legend>Maintenance of Departments and Divisions</legend>
		<p>Add, edit or delete a department or division: <%: Html.DropDownList("BusinessUnitTypes")%></p>
		<p>To amend the department or division, select the row, make the change and then press the return key.</p>
		<table id="list" class="scroll"></table>
		<div id="pager" class="scroll" style="text-align:center;font-size: 11px;"></div>
	</fieldset>
	<!-- "BusinessUnitTypeId", (SelectList)ViewData["BusinessUnitTypes"] -->
<script type="text/javascript">
	$(document).ready(function () { reloadGrid(); });
 
	$('#BusinessUnitTypes').change(function () {
		$("#list").trigger("reloadGrid");
	});
 
		function reloadGrid() {
			//var businessUnitTypeId = function() { return $("#BusinessUnitTypes option:selected").val(); };
		var businessUnitTypeId =  $("#BusinessUnitTypes option:selected").val();
			
		var lastSelectedId,
			inlineEditParam = {
				keys: true,
				extraparam: {
				    businessUnitTypeId: businessUnitTypeId
				}
			},
			$grid = $('#list');
 
 
		$('#list').jqGrid({
			url: '<%: Url.Action("GetBusinessUnits", "BusinessUnit")%>',
			postData: {
				businessUnitTypeId: function () { return $("#BusinessUnitTypes option:selected").val(); }
			},
			datatype: 'json',
			mtype: 'POST',
			colNames: ['ID', 'Name', 'Fax', 'Email', "Employees"],
			colModel: [
				{ name: 'BusinessUnitId', index: 'BusinessUnitId', hidden: true, editable: false, key: true },
				{ name: 'BusinessUnitName', index: 'BusinessUnitName', width: 200, editable: true, edittype: 'text' },
				{ name: 'Fax', index: 'Fax', width: 80, align: 'right', edittype: 'text', editable: true },
				{ name: 'Email', index: 'Email', width: 200, editable: true, edittype: 'text' },
				{ name: 'NumberOfEmployees', index: 'NumberOfEmployees', width: 70, editable: false}],
			rowNum: 30,
			rowList: [10, 20, 30],
			pager: '#pager',
			gridview: true,
			sortname: 'BusinessUnitName',
			viewrecords: true,
			sortorder: "asc",
			caption: "Edit",
			width: 700,
			height: "auto",
			onSelectRow: function (id) {
				if (id && id !== lastSelectedId) {
					$(this).restoreRow(lastSelectedId);
					lastSelectedId = id;
				}
				$(this).jqGrid('editRow', id, inlineEditParam);
 
			},
			editurl: '<%: Url.Action("Save", "BusinessUnit")%>'
		});
		// change defaults of delGridRow to use short for for navGrid
		$.extend($.jgrid.del, {
			width: 'auto',
			url: '<%:Url.Action("Delete", "BusinessUnit")%>'
		});
 
		// create navigator bar
		$grid.jqGrid('navGrid', '#pager',
			{ add: true, del: true, edit: false, search: false });
 
		// add buttons to navigator bar
		$('#list').jqGrid('inlineNav', {
			edit: false,
			addParams: { addRowParams: inlineEditParam }
		});
	}
 
</script>
</asp:Content>