<script id="tabGridContents" type="text/x-jsrender">
<div id="detailGrid{{:EmployeeID}}">
</div>
</script>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// the datasource "window.employeeView" is referred from jsondata.min.js
dataSource: ej.DataManager(window.employeeView).executeLocal(ej.Query().take(9)),
detailsTemplate: "#tabGridContents",
detailsDataBound: "detailGridData",
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
------------------------------
]
});
});
function detailGridData(e) {
var filteredData = e.data["EmployeeID"];
// the datasource "window.ordersView" is referred from jsondata.min.js
var data = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true));
e.detailsElement.find("#detailGrid" + filteredData).ejGrid({
dataSource: data,
allowSelection: true,
allowPaging: true,
pageSettings : { pageSize : 2},
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
--------------------------------
]
});
}
</script> | 
