</script>
js:
$(function () {
$("#splitter").ejSplitter({
height: $("body").height()-100, width: "100%",
enableAnimation: true,
orientation: ej.Orientation.Horizontal,
animationSpeed: 300,
enableAutoResize: true,
properties: [{}, { paneSize: "70%",collapsible: true}]
});
$("#Grid").ejGrid({
// the datasource "window.employeeView" is referred from jsondata.min.js
dataSource: ej.DataManager({ url: "/TherapyLog/Data", adaptor: new ej.UrlAdaptor(), offline: true }),
detailsTemplate: "#tabGridContents",
detailsDataBound: "detailGridData",
create: "onCreate",
columns: [
{ field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 },
{ field: "FirstName", headerText: 'First Name', textAlign: ej.TextAlign.Left, width: 100 },
{ field: "Title", headerText: 'Title', textAlign: ej.TextAlign.Left, width: 120 },
{ field: "City", headerText: 'City', textAlign: ej.TextAlign.Left, width: 100 },
{ field: "Country", headerText: 'Country', textAlign: ej.TextAlign.Left, width: 100 }
]
});
$('#btnExpandAll').click(function() {
var gridObj = $("#Grid").data("ejGrid");
// Expand all the group caption rows
gridObj.expandAll();
});
$('#btnCollapseAll').click(function () {
var gridObj = $("#Grid").data("ejGrid");
// Expand all the group caption rows
gridObj.collapseAll();
});
});
function onCreate(args) {
this.expandAll();
this.getHeaderContent().hide();
}
function detailGridData(e) {
var filteredData = e.data["EmployeeID"];
// the datasource "window.ordersView" is referred from jsondata.min.js
var data = ej.DataManager({ url: "/TherapyLog/Data", adaptor: new ej.UrlAdaptor() }).executeQuery(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true));
e.detailsElement.find("#detailGrid").ejGrid({
dataSource: data,
allowSelection: false,
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 80, textAlign: ej.TextAlign.Right },
{ field: "CustomerID", headerText: 'Customer ID', width: 80, textAlign: ej.TextAlign.Left },
{ field: "CompanyName", headerText: 'Company Name', width: 120, textAlign: ej.TextAlign.Left },
{ field: "ShipCity", headerText: 'City', width: 120, textAlign: ej.TextAlign.Left },
{ field: "Freight", headerText: 'Freight', width: 90, textAlign: ej.TextAlign.Right }
]
});
e.detailsElement.css("display", "");
e.detailsElement.find("#detailChart" + filteredData).ejChart(
{
chartArea:
{
border: { width: 1 }
},
primaryXAxis:
{
rangePadding: 'Additional',
labelRotation: 45,
title: { text: "City" }
},
primaryYAxis:
{
title: { text: "Sales in Millions" }
},
series: [{
name: 'Country', type: 'column',
enableAnimation: true,
dataSource: data,
xName: "ShipCity",
yName: "Freight",
fill: "#69D2E7",
tooltip: { visible: true, format: "#point.x# : #point.y# millions <br/>" }
}
],
load: "loadTheme",
title: { text: 'Sales Report Analysis ' },
canResize: true,
size: { height: "435" , width:"860"},
legend: { visible: false }
});
e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 1 });
}
