<table id="grid"></table>
<div id="jqGridPager"></div>
<style>
</style>
@section scripts{
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
jQuery.browser = {};
(function () {
jQuery.browser.msie = false;
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1;
}
})();
$("#grid").jqGrid({
url:"@Url.Action("GetEmployees", "Home")",
mtype: 'GET',
datatype:'json',
height: 250,
colModel: [{name: 'EmployeeID', index: "accounts.account_id", sorttype: "int",key: true,hidden: true, width: 50 },
{ name: 'FirstName', index: 'FirstName', sortable: false ,label: " "},
{ name: 'LastName', index: 'LastName', sortable: false },
{ name: 'Title', index: 'Title', sortable: false },
{ name: 'ReportTo', index: 'ReportTo', sortable: false },
{ name: 'Country', index: 'Country', sortable: false },
{ name: 'City', index: 'City', sortable: false },
{ name: "level", hidden: true }],
treeGrid: true,
scrollrows: true,
pager: '#jqGridPager',
rowNum: 2,
rowList:[2,20,30],
ExpandColumn: "FirstName",
sortorder: "asc",
loadonce:false,
caption: "Example",
});
$('#grid').jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{ "startColumnName": 'LastName', "numberOfColumns": 3, "titleText": 'LastName' },
{ "startColumnName": 'Country', "numberOfColumns": 2, "titleText": 'Country' }
]
});
</script>
}