Skip to content

Instantly share code, notes, and snippets.

@vinayvpg

vinayvpg/demoMVVMWithODataUrl.js

Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vinayvpg/b72d90a152f03b0f086a to your computer and use it in GitHub Desktop.
Save vinayvpg/b72d90a152f03b0f086a to your computer and use it in GitHub Desktop.
Download ZIP
Can do with Kendo - The Master Detail
Raw
demoMVVMWithODataUrl.js
$(document).ready(function () {
var mainVM = kendo.observable({
serviceUrl: "http://myodataserviceurl.svc",
gridVisible: false,
categoryDS: [
{ type: "All", value: "0" },
{ type: "Rigs", value: "1" },
{ type: "Warehouses", value: "2" },
{ type: "Special Crews", value: "3" }
],
onCategoryChange: function (e) {
var ddTypes = e.sender;
var dataItemCategory = ddTypes.dataItem();
var gridZIO = $('#gridZIO').data("kendoGrid");
var filtersArray = [];
filtersArray.push({
"logic": "or",
"filters": [
{ "field": "Completed_Flag", "operator": "eq", "value": false },
{ "field": "Completed_Flag", "operator": "eq", "value": null }
]
});
filtersArray.push({
"logic": "or",
"filters": [
{ "field": "Delete_Flag", "operator": "eq", "value": false },
{ "field": "Delete_Flag", "operator": "eq", "value": null }
]
});
filtersArray.push({
"logic": "or",
"filters": [
{ "field": "Inactive", "operator": "eq", "value": false },
{ "field": "Inactive", "operator": "eq", "value": null }
]
});
switch (dataItemCategory.value) {
case "1":
filtersArray.push({ field: "Warehouse_Flag", operator: "eq", value: false });
filtersArray.push({ field: "SpecialCrew_Flag", operator: "eq", value: false });
break;
case "2":
filtersArray.push({ field: "Warehouse_Flag", operator: "eq", value: true });
break;
case "3":
filtersArray.push({ field: "SpecialCrew_Flag", operator: "eq", value: true });
break;
default:
break;
}
gridZIO.dataSource.filter(filtersArray);
this.set("gridVisible", true);
},
zioStatsDS: function () {
return getZIOStatsDS(this.get('serviceUrl'));
},
initHistoricDetails: function (e) {
var masterDataItem = e.sender.dataItem(e.masterRow);
var ds = getZIOStatsDS(this.get('serviceUrl'));
ds.pageSize(5);
ds.sort([
{ field: 'Zio_EndDate', dir: 'desc' },
{ field: 'Incident_date', dir: 'desc' }
]);
// issue the datasource read with attached filters
ds.filter([
{ field: "Rigno", operator: "eq", value: masterDataItem.Rigno },
{ field: "Completed_Flag", operator: "eq", value: true },
{ logic: "or", filters: [{ field: "Delete_Flag", operator: "eq", value: false }, { field: "Delete_Flag", operator: "eq", "value": null }] }
]);
// find the grid element within the row by css class...not by id
e.detailRow.find('.gridHistoricZIO').kendoGrid({
dataSource: ds,
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "Incident_date", title: "Incident Date", format: "{0:dd-MMM-yyyy}" },
{ field: "OIM_Name", title: "OIM" },
{ field: "Supervisor_Name", title: "Supervisor" },
{ field: "Zio_Number", title: "ZIO Number", template: kendo.template($('#currentZIODisp').html()) },
{ field: "Comments", title: "Comments" },
]
});
}
});
kendo.bind($('#pnlMain'), mainVM);
});
function getZIOStatsDS(myServiceBaseUrl) {
return new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: function () { return myServiceBaseUrl + "/SafetyData"; },
headers: { DataServiceVersion: "2.0", MaxDataServiceVersion: "2.0" }
}
},
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data["odata.count"];
},
model: {
id: "tblID2",
fields: {
tblID2: { type: "number" },
Rigno: { type: "number" },
Supervisor_Name: { type: "string" },
OIM_Name: { type: "string" },
Zio_Number: { type: "number" },
Rigname: { type: "string" },
OpsManager: { type: "string" },
Comments: { type: "string" },
Warehouse_Flag: { type: "boolean" },
SpecialCrew_Flag: { type: "boolean" },
Delete_Flag: { type: "boolean" },
Inactive: { type: "boolean" },
Completed_Flag: { type: "boolean" },
Zio_EndDate: { type: "date" },
Incident_date: { type: "date" }
}
}
},
serverFiltering: true,
serverSorting: true,
serverPaging: true,
pageSize: 50,
sort: { field: 'Rigname', dir: 'asc' }
});
}
Raw
demoMVVMWithSampleData.js
$(document).ready(function () {
var mainVM = kendo.observable({
masterData: { "odata.metadata": "http://localhost:50834/Services/DOWAVEDataService.svc/$metadata#Safety_Zio", "odata.count": "40", "value": [{ "tbl_id": 1144, "Incident_date": "2014-10-04T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "10/27/14", "Rigno": 163, "Rigname": "Rig 1", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1088 }, { "tbl_id": 1148, "Incident_date": "2014-10-28T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "11/3/14", "Rigno": 116, "Rigname": "Rig 2", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1092 }, { "tbl_id": 1137, "Incident_date": "2014-09-21T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "9/22/14", "Rigno": 123, "Rigname": "Rig 3", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1081 }, { "tbl_id": 836, "Incident_date": "2012-10-01T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "10/1/12", "Rigno": 144, "Rigname": "Rig 4", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 783 }, { "tbl_id": 1146, "Incident_date": "2014-10-27T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "11/3/14", "Rigno": 165, "Rigname": "Rig 5", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1090 }, { "tbl_id": 1100, "Incident_date": "2014-07-09T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "7/24/14", "Rigno": 174, "Rigname": "Rig 6", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1046 }, { "tbl_id": 838, "Incident_date": "2012-10-01T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "10/1/12", "Rigno": 180, "Rigname": "Rig 7", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 786 }, { "tbl_id": 839, "Incident_date": "2012-10-01T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "10/1/12", "Rigno": 157, "Rigname": "Rig 8", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 787 }, { "tbl_id": 840, "Incident_date": "2012-10-01T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "10/1/12", "Rigno": 188, "Rigname": "Rig 9", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 788 }, { "tbl_id": 1123, "Incident_date": "2014-08-24T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "8/25/14", "Rigno": 150, "Rigname": "Rig 10", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1067 }, { "tbl_id": 878, "Incident_date": "2013-01-09T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "1/23/13", "Rigno": 113, "Rigname": "Rig 11", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 825 }, { "tbl_id": 1132, "Incident_date": "2014-09-12T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "9/16/14", "Rigno": 185, "Rigname": "Rig 12", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1076 }, { "tbl_id": 1125, "Incident_date": "2014-08-19T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "8/25/14", "Rigno": 176, "Rigname": "Rig 13", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1069 }, { "tbl_id": 1069, "Incident_date": "2014-05-25T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "5/28/14", "Rigno": 126, "Rigname": "Rig 14", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1015 }, { "tbl_id": 1145, "Incident_date": "2014-10-28T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "11/3/14", "Rigno": 102, "Rigname": "Rig 15", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1089 }, { "tbl_id": 1142, "Incident_date": "2014-10-15T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "10/21/14", "Rigno": 164, "Rigname": "Rig 16", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1086 }, { "tbl_id": 1127, "Incident_date": "2014-08-23T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "9/2/14", "Rigno": 128, "Rigname": "Rig 17", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1071 }, { "tbl_id": 1118, "Incident_date": "2014-08-07T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "8/11/14", "Rigno": 114, "Rigname": "Rig 18", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1062 }, { "tbl_id": 1117, "Incident_date": "2014-08-02T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "8/4/14", "Rigno": 173, "Rigname": "Rig 19", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1061 }, { "tbl_id": 1143, "Incident_date": "2014-10-19T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "10/27/14", "Rigno": 142, "Rigname": "Rig 20", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1087 }, { "tbl_id": 1128, "Incident_date": "2014-08-25T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "9/2/14", "Rigno": 105, "Rigname": "Rig 21", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1072 }, { "tbl_id": 1129, "Incident_date": "2014-08-30T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "9/2/14", "Rigno": 139, "Rigname": "Rig 22", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1073 }, { "tbl_id": 1136, "Incident_date": "2014-09-13T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "9/22/14", "Rigno": 186, "Rigname": "Rig 23", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1080 }, { "tbl_id": 1135, "Incident_date": "2014-09-18T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "9/22/14", "Rigno": 166, "Rigname": "Rig 24", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1079 }, { "tbl_id": 1141, "Incident_date": "2014-10-08T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "10/20/14", "Rigno": 129, "Rigname": "Rig 25", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1085 }, { "tbl_id": 1097, "Incident_date": "2014-07-03T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "7/7/14", "Rigno": 133, "Rigname": "Rig 26", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1043 }, { "tbl_id": 1094, "Incident_date": "2014-05-16T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "7/3/14", "Rigno": 118, "Rigname": "Rig 27", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1040 }, { "tbl_id": 1038, "Incident_date": "2014-03-14T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "3/20/14", "Rigno": 134, "Rigname": "Rig 28", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 985 }, { "tbl_id": 793, "Incident_date": "2012-06-10T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "6/26/12", "Rigno": 160, "Rigname": "Rig 29", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 740 }, { "tbl_id": 1089, "Incident_date": "2014-06-29T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "6/30/14", "Rigno": 167, "Rigname": "Rig 30", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1035 }, { "tbl_id": 1116, "Incident_date": "2014-08-01T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "8/4/14", "Rigno": 99, "Rigname": "Rig 31", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1060 }, { "tbl_id": 1067, "Incident_date": "2014-05-22T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "5/28/14", "Rigno": 153, "Rigname": "Rig 32", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1013 }, { "tbl_id": 1138, "Incident_date": "2014-09-25T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "9/29/14", "Rigno": 158, "Rigname": "Rig 33", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1082 }, { "tbl_id": 1131, "Incident_date": "2014-09-12T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "9/16/14", "Rigno": 177, "Rigname": "Rig 34", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1075 }, { "tbl_id": 934, "Incident_date": "2013-07-07T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "7/16/13", "Rigno": 187, "Rigname": "Rig 35", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 880 }, { "tbl_id": 1124, "Incident_date": "2014-08-19T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "8/25/14", "Rigno": 145, "Rigname": "Rig 36", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1068 }, { "tbl_id": 1049, "Incident_date": "2014-03-12T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "4/4/14", "Rigno": 179, "Rigname": "Rig 37", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 996 }, { "tbl_id": 965, "Incident_date": "2013-09-09T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "9/16/13", "Rigno": 183, "Rigname": "Rig 38", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 911 }, { "tbl_id": 1071, "Incident_date": "2014-05-16T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "5/28/14", "Rigno": 182, "Rigname": "Rig 39", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1017 }, { "tbl_id": 1133, "Incident_date": "2014-09-10T00:00:00", "Supervisor_ID": null, "Supervisor_Name": null, "OIM_ID": null, "OIM_Name": null, "Entered_Date": "9/16/14", "Rigno": 119, "Rigname": "Rig 40", "OpsManager": null, "Zio_EndDate": null, "Completed_Flag": false, "Comments": null, "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1077 }]},
detailData: { "odata.metadata": "http://localhost:50834/Services/DOWAVEDataService.svc/$metadata#Safety_Zio", "odata.count": "5", "value": [{ "tbl_id": 1098, "Incident_date": "2014-07-04T00:00:00", "Supervisor_ID": null, "Supervisor_Name": "John Doe", "OIM_ID": null, "OIM_Name": "Mike Doe", "Entered_Date": "7/7/14", "Rigno": 174, "Rigname": "Rig 6", "OpsManager": "Jane Doe", "Zio_EndDate": "2014-07-09T00:00:00", "Completed_Flag": true, "Comments": "MTC: The employee sustained a cut on his left knee after striking it against the deck when he tripped and fell over a hose lying on the deck.", "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1044 }, { "tbl_id": 1088, "Incident_date": "2014-06-10T00:00:00", "Supervisor_ID": null, "Supervisor_Name": "John Doe", "OIM_ID": null, "OIM_Name": "Mike Doe", "Entered_Date": "6/23/14", "Rigno": 174, "Rigname": "Rig 6", "OpsManager": "Jane Doe", "Zio_EndDate": "2014-07-04T00:00:00", "Completed_Flag": true, "Comments": "LTI: As the employee was attempting to step down from the #4 mud pump, he struck his left buttock against a protruding bolt on the j-box, which caused a deep gash.", "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1034 }, { "tbl_id": 1081, "Incident_date": "2014-06-06T00:00:00", "Supervisor_ID": null, "Supervisor_Name": "John Doe", "OIM_ID": null, "OIM_Name": "Mike Doe", "Entered_Date": "6/16/14", "Rigno": 174, "Rigname": "Rig 6", "OpsManager": "Jane Doe", "Zio_EndDate": "2014-06-10T00:00:00", "Completed_Flag": true, "Comments": "ENV/SPILL: Due to the overboard discharge valve policy not being followed, approximately 2.4-ltrs of light lubricated oil spilled into the sea from a drain in the pollution pan that was inadvertently left open.", "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1027 }, { "tbl_id": 1076, "Incident_date": "2014-06-05T00:00:00", "Supervisor_ID": null, "Supervisor_Name": "John Doe", "OIM_ID": null, "OIM_Name": "Mike Doe", "Entered_Date": "6/9/14", "Rigno": 174, "Rigname": "Rig 6", "OpsManager": "Jane Doe", "Zio_EndDate": "2014-06-06T00:00:00", "Completed_Flag": true, "Comments": "LTI: The employee had removed a section of floor grating to place some flow magnets inside the return ditch, when he stepped into the hole and injured his right shoulder while trying to secure himself.", "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 1022 }, { "tbl_id": 837, "Incident_date": "2012-10-01T00:00:00", "Supervisor_ID": null, "Supervisor_Name": "John Doe", "OIM_ID": null, "OIM_Name": "", "Entered_Date": "10/1/12", "Rigno": 174, "Rigname": "Rig 6", "OpsManager": "Jane Doe", "Zio_EndDate": "2014-06-05T00:00:00", "Completed_Flag": true, "Comments": "NMH/ENV: While transferring base oil into a holding tank, 2 misaligned valves caused approximately 300-bbl of base oil to be transferred to the wrong holding tank.", "Warehouse_Flag": false, "SpecialCrew_Flag": false, "Delete_Flag": false, "Zio_Number": null, "Inactive": false, "CodeID": null, "SubCode": null, "tblID2": 785 }] },
gridVisible: false,
categoryDS: [
{ type: "All", value: "0" },
{ type: "Rigs", value: "1" },
{ type: "Warehouses", value: "2" },
{ type: "Special Crews", value: "3" }
],
onCategoryChange: function (e) {
var ddTypes = e.sender;
var dataItemCategory = ddTypes.dataItem();
var gridZIO = $('#gridZIO').data("kendoGrid");
var filtersArray = [];
filtersArray.push({
"logic": "or",
"filters": [
{ "field": "Completed_Flag", "operator": "eq", "value": false },
{ "field": "Completed_Flag", "operator": "eq", "value": null }
]
});
filtersArray.push({
"logic": "or",
"filters": [
{ "field": "Delete_Flag", "operator": "eq", "value": false },
{ "field": "Delete_Flag", "operator": "eq", "value": null }
]
});
filtersArray.push({
"logic": "or",
"filters": [
{ "field": "Inactive", "operator": "eq", "value": false },
{ "field": "Inactive", "operator": "eq", "value": null }
]
});
switch (dataItemCategory.value) {
case "1":
filtersArray.push({ field: "Warehouse_Flag", operator: "eq", value: false });
filtersArray.push({ field: "SpecialCrew_Flag", operator: "eq", value: false });
break;
case "2":
filtersArray.push({ field: "Warehouse_Flag", operator: "eq", value: true });
break;
case "3":
filtersArray.push({ field: "SpecialCrew_Flag", operator: "eq", value: true });
break;
default:
break;
}
gridZIO.dataSource.filter(filtersArray);
this.set("gridVisible", true);
},
zioStatsDS: function () { return getZIOStatsDS(this.get('masterData')); },
initHistoricDetails: function (e) {
var masterDataItem = e.sender.dataItem(e.masterRow);
var ds = getZIOStatsDS(this.get('detailData'));
ds.pageSize(5);
ds.sort([
{ field: 'Zio_EndDate', dir: 'desc' },
{ field: 'Incident_date', dir: 'desc' }
]);
// issue the datasource read with attached filters
ds.filter([
{ field: "Rigno", operator: "eq", value: masterDataItem.Rigno },
{ field: "Completed_Flag", operator: "eq", value: true },
{ logic: "or", filters: [{ field: "Delete_Flag", operator: "eq", value: false }, { field: "Delete_Flag", operator: "eq", "value": null }] }
]);
// find the grid element within the row by css class...not by id
e.detailRow.find('.gridHistoricZIO').kendoGrid({
dataSource: ds,
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "Incident_date", title: "Incident Date", format: "{0:dd-MMM-yyyy}" },
{ field: "OIM_Name", title: "OIM" },
{ field: "Supervisor_Name", title: "Supervisor" },
{ field: "Zio_Number", title: "ZIO Number", template: kendo.template($('#currentZIODisp').html()) },
{ field: "Comments", title: "Comments" },
]
});
}
});
kendo.bind($('#pnlMain'), mainVM);
});
function getZIOStatsDS(d) {
return new kendo.data.DataSource({
data: d,
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data["odata.count"];
},
model: {
id: "tblID2",
fields: {
tblID2: { type: "number" },
Rigno: { type: "number" },
Supervisor_Name: { type: "string" },
OIM_Name: { type: "string" },
Zio_Number: { type: "number" },
Rigname: { type: "string" },
OpsManager: { type: "string" },
Comments: { type: "string" },
Warehouse_Flag: { type: "boolean" },
SpecialCrew_Flag: { type: "boolean" },
Delete_Flag: { type: "boolean" },
Inactive: { type: "boolean" },
Completed_Flag: { type: "boolean" },
Zio_EndDate: { type: "date" },
Incident_date: { type: "date" }
}
}
},
serverFiltering: true,
serverSorting: true,
serverPaging: true,
pageSize: 50,
sort: { field: 'Rigname', dir: 'asc' }
});
}
Raw
index.html
<html>
<head>
<title>Kendo Master Detail Demo</title>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="pnlMain">
<div class="section k-header">
<p>
<label for="ddTypes">Category:</label>
<input id="ddTypes" data-role="dropdownlist"
data-option-label="Select a category..."
data-text-field="type"
data-value-field="value"
data-bind="source: categoryDS, events: { change: onCategoryChange }" />
</p>
</div>
<script type="text/x-kendo-template" id="rigNameDisp">
# var nm = data.Rigname.toUpperCase(); #
<span title='Expand to view ZIO historical details'>#= nm #</span>
</script>
<script type="text/x-kendo-template" id="currentZIODisp">
# var n = 0; #
# var one_day = 1000 * 60 * 60 * 24; #
# var td = new Date(); #
# var id = Date.parse(data.Incident_date); #
# var zd = (data.Zio_EndDate != null ? Date.parse(data.Zio_EndDate) : 0); #
# if(zd == 0) { n = ( id < td ? Math.round((td - id)/one_day) : 0); } else { n = Math.round((zd - id)/one_day) - 1;} #
<span>#= n #</span>
</script>
<script type="text/x-kendo-template" id="historicZIODisp">
<div class="gridHistoricZIO" />
</script>
<div id="pnlZIOInfo">
<div id="gridZIO" data-role="grid"
data-auto-bind="false"
data-scrollable="false"
data-resizable="true"
data-pageable="true"
data-filterable="true"
data-groupable="false"
data-sortable="true"
data-detail-template="historicZIODisp"
data-columns="[
{'field': 'Rigname', 'title': 'Name', 'template': kendo.template($('#rigNameDisp').html()) },
{'field': '', 'title': 'Current ZIO', 'template': kendo.template($('#currentZIODisp').html()) }
]"
data-bind="source: zioStatsDS, visible: gridVisible, events: { detailInit: initHistoricDetails }"></div>
</div>
</div>
<script src="demoMVVMWithSampleData.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment