<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css" />
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet" />
  <script src="http://code.jquery.com/jquery-2.1.3.min.js" data-semver="2.1.3" data-require="jquery@2.1.3"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" data-semver="3.3.2" data-require="bootstrap@*"></script>
  <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="nestGrid">
  <div class="row" ng-controller="Controller as vm">
    <div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
      <script type="text/x-kendo-template" id="rowTemplate">
        <tr ng-if="dataItem.isDomainYearSemester">
          <td colspan="6">
            <div kendo-grid="ausVelsGrid" id="ausVelsGrid" k-options="vm.ausVelsGridOptions" k-ng-delay="vm.ausVelsGridOptions" />
          </td>
        </tr>

        <tr ng-if="dataItem.isSubjectYearSemester">
          <td colspan="6">
            <div kendo-grid="subjectYearSemesterGrid" id="subjectYearSemesterGrid" k-options="vm.subjectYearSemesterGridOptions" k-ng-delay="vm.subjectYearSemesterGridOptions" />
          </td>
        </tr>
      </script>
      <script type="text/x-kendo-template" id="addTemplate">
        hello
      </script>
      <div kendo-grid="subjectYearSemesterGrid" id="subjectYearSemesterGrid" k-options="vm.subjectYearSemesterGridOptions" k-ng-delay="vm.subjectYearSemesterGridOptions"></div>
    </div>

    <script type="text/x-kendo-template" id="subjectYearSemesterGridRowTemplate">
      <tr class="k-master-row" data-uid="#= uid #">
        <td class="k-hierarchy-cell background-color-light-green">
          <a href="\#" ng-show="!(vm.currentFSMState.code === 'EDITSUB' && !dataItem.subjectYearSemesterVO.enabled)" class="k-icon k-plus">
          </a>
        </td>
        <td  class="background-color-light-green">{{dataItem.subjectYearSemesterVO.subjectVO.subject}}</td>
        <td  class="background-color-light-green">
          
          <input type="text" ng-disabled="!(vm.currentFSMState.code === 'EDITSUB' && !dataItem.subjectYearSemesterVO.enabled)" ng-class="{'color-grey-important':!(vm.currentFSMState.code === 'EDITSUB' &&  !dataItem.subjectYearSemesterVO.enabled)}" class="k-input k-textbox col-lg-12 col-md-12"
          ng-model="dataItem.subjectYearSemesterVO.subjectVO.subject" />
        </td>
        <td  class="background-color-light-green">
          <input type="text" ng-disabled="!(vm.currentFSMState.code === 'EDITSUB' && !dataItem.subjectYearSemesterVO.enabled)" ng-class="{'color-grey-important':!(vm.currentFSMState.code === 'EDITSUB' &&  !dataItem.subjectYearSemesterVO.enabled)}" class="k-input k-textbox col-lg-12 col-md-12"
          ng-model="dataItem.subjectYearSemesterVO.subjectVO.subjectCode" />
        </td>
        <td  class="background-color-light-green"></td>
        <td class="background-color-light-green"></td>
        <td  class="background-color-light-green">
          <button type="button" ng-disabled="vm.currentFSMState.code === 'EDITSUB'" class="btn btn-primary btn-xs" ng-click="vm.subjectYearSemesterGrid_Edit_Click(dataItem)">
            <i class="fa fa-edit"></i>
          </button>&nbsp;

          <button type="button" ng-disabled="vm.currentFSMState.code === 'EDITSUB'" class="btn btn-primary btn-xs" ng-click="vm.subjectYearSemesterGrid_Delete_Click(dataItem)">
            <i class="fa fa-trash"></i>
          </button>
        </td>
      </tr>
    </script>

    <script type="text/x-kendo-template" id="domainYearSemesterGridRowTemplate">
      <tr class="k-master-row" data-uid="#= uid #">
        <td class="k-hierarchy-cell">
          <a href="\#" class="k-icon k-plus">
          </a>
        </td>
        <td></td>
        <td>
          <input type="text" class="k-input k-textbox col-lg-12 col-md-12" ng-model="dataItem.domainYearSemesterVO.domainVO.domain" />
        </td>
        <td>
          <input type="text" class="k-input k-textbox col-lg-12 col-md-12" ng-model="dataItem.domainYearSemesterVO.domainVO.kdokey" />
        </td>
        <td>
          {{dataItem.domainYearSemesterVO.reportAtDimensionLevel}}
        </td>
        <td>

        </td>
        <td>

        </td>
      </tr>
    </script>

  </div>
</body>

</html>
(function(angular) {
  'use strict';
  angular.module('nestGrid', ["kendo.directives"])
    .controller('Controller', [function($timeout) {
      var vm = this;
      vm.title = 'Customers';
      vm.domainYearSemesterVOs = [{
        "domainYearSemesterVO": {
          "id": 389,
          "yearSemesterVO": {
            "id": 16,
            "yearSemester": "June 2015"
          },
          "domainVO": {
            "id": 5,
            "kdokey": "HPE",
            "domain": "Health and Physical Education",
            "domainCurriculumDisplay": "Health and Physical Education - VELS",
            "displayOrder": 1,
            "reportAtDimensionLevel": false,
            "curriculumVO": {
              "id": 1,
              "curriculum": "VELS",
              "code": "VELS"
            }
          },
          "dimensionYearSemesterVOs": [{
            "id": 942,
            "yearSemesterVO": {
              "id": 16,
              "yearSemester": "June 2015"
            },
            "dimensionVO": {
              "id": 12,
              "code": "HPEPA",
              "displayName": "Movement and Physical Activity",
              "dimension": "Movement and Physical Activity",
              "minScore": 0.000,
              "maxScore": 11.500,
              "displayOrder": 1,
              "curriculumVO": {
                "id": 1,
                "curriculum": "VELS",
                "code": "VELS"
              }
            },
            "displayOrder": 1
          }, {
            "id": 973,
            "yearSemesterVO": {
              "id": 16,
              "yearSemester": "June 2015"
            },
            "dimensionVO": {
              "id": 11,
              "code": "HPEKP",
              "displayName": "Health Knowledge and Promotion",
              "dimension": "Health Knowledge and Promotion",
              "minScore": 2.000,
              "maxScore": 11.500,
              "displayOrder": 2,
              "curriculumVO": {
                "id": 1,
                "curriculum": "VELS",
                "code": "VELS"
              }
            },
            "displayOrder": 2
          }],
          "displayOrder": 1
        }
      }, {
        "domainYearSemesterVO": {
          "id": 391,
          "yearSemesterVO": {
            "id": 16,
            "yearSemester": "June 2015"
          },
          "domainVO": {
            "id": 36,
            "kdokey": "MAT",
            "domain": "Mathematics",
            "domainCurriculumDisplay": "Mathematics - AusVELS",
            "displayOrder": 2,
            "reportAtDimensionLevel": false,
            "curriculumVO": {
              "id": 2,
              "curriculum": "AusVELS",
              "code": "AusVELS"
            }
          },
          "dimensionYearSemesterVOs": [{
            "id": 946,
            "yearSemesterVO": {
              "id": 16,
              "yearSemester": "June 2015"
            },
            "dimensionVO": {
              "id": 85,
              "code": "MATNUM",
              "displayName": "Number and Algebra",
              "dimension": "Number and Algebra",
              "minScore": 0.00,
              "maxScore": 11.00,
              "displayOrder": 1,
              "curriculumVO": {
                "id": 2,
                "curriculum": "AusVELS",
                "code": "AusVELS"
              }
            },
            "displayOrder": 1
          }, {
            "id": 947,
            "yearSemesterVO": {
              "id": 16,
              "yearSemester": "June 2015"
            },
            "dimensionVO": {
              "id": 86,
              "code": "MATMGE",
              "displayName": "Measurement and Geometry",
              "dimension": "Measurement and Geometry",
              "minScore": 0.00,
              "maxScore": 11.00,
              "displayOrder": 2,
              "curriculumVO": {
                "id": 2,
                "curriculum": "AusVELS",
                "code": "AusVELS"
              }
            },
            "displayOrder": 2
          }, {
            "id": 948,
            "yearSemesterVO": {
              "id": 16,
              "yearSemester": "June 2015"
            },
            "dimensionVO": {
              "id": 87,
              "code": "MATSTP",
              "displayName": "Statistics and Probability",
              "dimension": "Statistics and Probability",
              "minScore": 0.00,
              "maxScore": 11.00,
              "displayOrder": 3,
              "curriculumVO": {
                "id": 2,
                "curriculum": "AusVELS",
                "code": "AusVELS"
              }
            },
            "displayOrder": 3
          }],
          "displayOrder": 2
        }
      }];
      vm.subjectYearSemesterVOs = [{
        "subjectYearSemesterVO": {
          "id": 87,
          "subjectVO": {
            "id": 27,
            "subject": "Health and Physical Education",
            "subjectCode": "",
            "displayOrder": 26
          },
          "yearSemesterVO": {
            "id": 16,
            "yearSemester": "June 2015"
          },
          "displayOrder": 5,
          "domainYearSemesterSetUpVOs": [{
            "domainYearSemesterVO": {
              "id": 425,
              "yearSemesterVO": {
                "id": 16,
                "yearSemester": "June 2015"
              },
              "domainVO": {
                "id": 5,
                "kdokey": "HPE",
                "domain": "Health and Physical Education",
                "domainCurriculumDisplay": "Health and Physical Education - VELS",
                "displayOrder": 1,
                "reportAtDimensionLevel": false,
                "curriculumVO": {
                  "id": 1,
                  "curriculum": "VELS",
                  "code": "VELS"
                }
              },
              "dimensionYearSemesterVOs": [{
                "id": 1032,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 12,
                  "code": "HPEPA",
                  "displayName": "Movement and Physical Activity",
                  "dimension": "Movement and Physical Activity",
                  "minScore": 0.000,
                  "maxScore": 11.500,
                  "displayOrder": 1,
                  "curriculumVO": {
                    "id": 1,
                    "curriculum": "VELS",
                    "code": "VELS"
                  }
                },
                "displayOrder": 1
              }, {
                "id": 1033,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 11,
                  "code": "HPEKP",
                  "displayName": "Health Knowledge and Promotion",
                  "dimension": "Health Knowledge and Promotion",
                  "minScore": 2.000,
                  "maxScore": 11.500,
                  "displayOrder": 2,
                  "curriculumVO": {
                    "id": 1,
                    "curriculum": "VELS",
                    "code": "VELS"
                  }
                },
                "displayOrder": 2
              }],
              "displayOrder": 1
            }
          }]
        }
      }, {
        "subjectYearSemesterVO": {
          "id": 78,
          "subjectVO": {
            "id": 201,
            "subject": "Music",
            "subjectCode": "",
            "displayOrder": 110
          },
          "yearSemesterVO": {
            "id": 16,
            "yearSemester": "June 2015"
          },
          "displayOrder": 6,
          "domainYearSemesterSetUpVOs": [{
            "domainYearSemesterVO": {
              "id": 412,
              "yearSemesterVO": {
                "id": 16,
                "yearSemester": "June 2015"
              },
              "domainVO": {
                "id": 11,
                "kdokey": "PLE",
                "domain": "Personal Learning",
                "domainCurriculumDisplay": "Personal Learning - VELS",
                "displayOrder": 4,
                "reportAtDimensionLevel": false,
                "curriculumVO": {
                  "id": 1,
                  "curriculum": "VELS",
                  "code": "VELS"
                }
              },
              "dimensionYearSemesterVOs": [{
                "id": 999,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 29,
                  "code": "PLEIDV",
                  "displayName": "The individual learner",
                  "dimension": "The individual learner",
                  "minScore": 2.000,
                  "maxScore": 11.500,
                  "displayOrder": 1,
                  "curriculumVO": {
                    "id": 1,
                    "curriculum": "VELS",
                    "code": "VELS"
                  }
                },
                "displayOrder": 1
              }, {
                "id": 1000,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 30,
                  "code": "PLEMPL",
                  "displayName": "Managing personal learning",
                  "dimension": "Managing personal learning",
                  "minScore": 2.000,
                  "maxScore": 11.500,
                  "displayOrder": 2,
                  "curriculumVO": {
                    "id": 1,
                    "curriculum": "VELS",
                    "code": "VELS"
                  }
                },
                "displayOrder": 2
              }],
              "displayOrder": 4
            }
          }, {
            "domainYearSemesterVO": {
              "id": 397,
              "yearSemesterVO": {
                "id": 16,
                "yearSemester": "June 2015"
              },
              "domainVO": {
                "id": 13,
                "kdokey": "ART",
                "domain": "The Arts",
                "domainCurriculumDisplay": "The Arts - VELS",
                "displayOrder": 6,
                "reportAtDimensionLevel": false,
                "curriculumVO": {
                  "id": 1,
                  "curriculum": "VELS",
                  "code": "VELS"
                }
              },
              "dimensionYearSemesterVOs": [{
                "id": 956,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 33,
                  "code": "ARTCR",
                  "displayName": "Creating and making",
                  "dimension": "Creating and making",
                  "minScore": 0.000,
                  "maxScore": 11.500,
                  "displayOrder": 1,
                  "curriculumVO": {
                    "id": 1,
                    "curriculum": "VELS",
                    "code": "VELS"
                  }
                },
                "displayOrder": 1
              }, {
                "id": 1001,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 34,
                  "code": "ARTER",
                  "displayName": "Exploring and responding",
                  "dimension": "Exploring and responding",
                  "minScore": 2.000,
                  "maxScore": 11.500,
                  "displayOrder": 2,
                  "curriculumVO": {
                    "id": 1,
                    "curriculum": "VELS",
                    "code": "VELS"
                  }
                },
                "displayOrder": 2
              }],
              "displayOrder": 6
            }
          }]
        }
      }, {
        "subjectYearSemesterVO": {
          "id": 76,
          "subjectVO": {
            "id": 203,
            "subject": "English as an Additional Language",
            "subjectCode": "EAL",
            "displayOrder": 1
          },
          "yearSemesterVO": {
            "id": 16,
            "yearSemester": "June 2015"
          },
          "displayOrder": 7,
          "domainYearSemesterSetUpVOs": [{
            "domainYearSemesterVO": {
              "id": 394,
              "yearSemesterVO": {
                "id": 16,
                "yearSemester": "June 2015"
              },
              "domainVO": {
                "id": 27,
                "kdokey": "ESA",
                "domain": "EAL - Stage A",
                "domainCurriculumDisplay": "EAL - Stage A - AusVELS",
                "displayOrder": 1,
                "reportAtDimensionLevel": false,
                "curriculumVO": {
                  "id": 2,
                  "curriculum": "AusVELS",
                  "code": "AusVELS"
                }
              },
              "dimensionYearSemesterVOs": [{
                "id": 951,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 64,
                  "code": "ESAREA",
                  "displayName": "EAL - Reading",
                  "dimension": "EAL - Reading",
                  "minScore": 0.000,
                  "maxScore": 1.750,
                  "displayOrder": 1,
                  "curriculumVO": {
                    "id": 2,
                    "curriculum": "AusVELS",
                    "code": "AusVELS"
                  }
                },
                "displayOrder": 1
              }, {
                "id": 952,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 65,
                  "code": "ESAWRI",
                  "displayName": "EAL - Writing",
                  "dimension": "EAL - Writing",
                  "minScore": 0.000,
                  "maxScore": 1.750,
                  "displayOrder": 2,
                  "curriculumVO": {
                    "id": 2,
                    "curriculum": "AusVELS",
                    "code": "AusVELS"
                  }
                },
                "displayOrder": 2
              }, {
                "id": 953,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 66,
                  "code": "ESASPL",
                  "displayName": "EAL- Speaking and Listening",
                  "dimension": "EAL- Speaking and Listening",
                  "minScore": 0.000,
                  "maxScore": 1.750,
                  "displayOrder": 3,
                  "curriculumVO": {
                    "id": 2,
                    "curriculum": "AusVELS",
                    "code": "AusVELS"
                  }
                },
                "displayOrder": 3
              }],
              "displayOrder": 1
            }
          }, {
            "domainYearSemesterVO": {
              "id": 411,
              "yearSemesterVO": {
                "id": 16,
                "yearSemester": "June 2015"
              },
              "domainVO": {
                "id": 28,
                "kdokey": "ESB",
                "domain": "EAL - Stage B",
                "domainCurriculumDisplay": "EAL - Stage B - AusVELS",
                "displayOrder": 1,
                "reportAtDimensionLevel": false,
                "curriculumVO": {
                  "id": 2,
                  "curriculum": "AusVELS",
                  "code": "AusVELS"
                }
              },
              "dimensionYearSemesterVOs": [{
                "id": 995,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 67,
                  "code": "ESBREA",
                  "displayName": "EAL - Reading",
                  "dimension": "EAL - Reading",
                  "minScore": 0.000,
                  "maxScore": 3.250,
                  "displayOrder": 1,
                  "curriculumVO": {
                    "id": 2,
                    "curriculum": "AusVELS",
                    "code": "AusVELS"
                  }
                },
                "displayOrder": 1
              }, {
                "id": 996,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 68,
                  "code": "ESBWRI",
                  "displayName": "EAL - Writing",
                  "dimension": "EAL - Writing",
                  "minScore": 0.000,
                  "maxScore": 3.250,
                  "displayOrder": 2,
                  "curriculumVO": {
                    "id": 2,
                    "curriculum": "AusVELS",
                    "code": "AusVELS"
                  }
                },
                "displayOrder": 2
              }, {
                "id": 997,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 69,
                  "code": "ESBSPL",
                  "displayName": "EAL- Speaking and Listening",
                  "dimension": "EAL- Speaking and Listening",
                  "minScore": 0.000,
                  "maxScore": 3.250,
                  "displayOrder": 3,
                  "curriculumVO": {
                    "id": 2,
                    "curriculum": "AusVELS",
                    "code": "AusVELS"
                  }
                },
                "displayOrder": 3
              }],
              "displayOrder": 1
            }
          }, {
            "domainYearSemesterVO": {
              "id": 420,
              "yearSemesterVO": {
                "id": 16,
                "yearSemester": "June 2015"
              },
              "domainVO": {
                "id": 29,
                "kdokey": "ESS",
                "domain": "EAL - Stage S",
                "domainCurriculumDisplay": "EAL - Stage S - AusVELS",
                "displayOrder": 1,
                "reportAtDimensionLevel": false,
                "curriculumVO": {
                  "id": 2,
                  "curriculum": "AusVELS",
                  "code": "AusVELS"
                }
              },
              "dimensionYearSemesterVOs": [{
                "id": 1017,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 70,
                  "code": "ESSREA",
                  "displayName": "EAL - Reading",
                  "dimension": "EAL - Reading",
                  "minScore": 0.000,
                  "maxScore": 4.000,
                  "displayOrder": 1,
                  "curriculumVO": {
                    "id": 2,
                    "curriculum": "AusVELS",
                    "code": "AusVELS"
                  }
                },
                "displayOrder": 1
              }, {
                "id": 1018,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 71,
                  "code": "ESSWRI",
                  "displayName": "EAL - Writing",
                  "dimension": "EAL - Writing",
                  "minScore": 0.000,
                  "maxScore": 4.000,
                  "displayOrder": 2,
                  "curriculumVO": {
                    "id": 2,
                    "curriculum": "AusVELS",
                    "code": "AusVELS"
                  }
                },
                "displayOrder": 2
              }, {
                "id": 1019,
                "yearSemesterVO": {
                  "id": 16,
                  "yearSemester": "June 2015"
                },
                "dimensionVO": {
                  "id": 72,
                  "code": "ESSSPL",
                  "displayName": "EAL- Speaking and Listening",
                  "dimension": "EAL- Speaking and Listening",
                  "minScore": 0.000,
                  "maxScore": 4.000,
                  "displayOrder": 3,
                  "curriculumVO": {
                    "id": 2,
                    "curriculum": "AusVELS",
                    "code": "AusVELS"
                  }
                },
                "displayOrder": 3
              }],
              "displayOrder": 1
            }
          }]
        }
      }]

      var curriculumsetupInit = [vm.domainYearSemesterVOs, vm.subjectYearSemesterVOs];
      setKendoUI(curriculumsetupInit);

      function setKendoUI(curriculumsetupInit) {
        curriculumsetupInit[0].isDomainYearSemester = true;
        curriculumsetupInit[1].isSubjectYearSemester = true;

        //Todo: Peter need get CurriculumVO (vels) from server.
        var ausVelsVOs = [{
          "ausVelsVO": {
            "id": 1,
            "curriculumVO": {
              "id": 1,
              "curriculum": "VELS",
              "code": "AV"
            }
          }
        }];
        var domainYearSemesterVOs = curriculumsetupInit[0];
        var subjectYearSemesterVOs = curriculumsetupInit[1];

        //curriculumsetupGridOptions
        var curriculumsetupGridDataSource = new kendo.data.DataSource({
          data: new kendo.data.ObservableArray(curriculumsetupInit),
          schema: {
            model: {}
          }
        });

        vm.curriculumsetupGridOptions = {
          sortable: false,
          selectable: false,
          editable: {
            mode: "popup",
            template: kendo.template($("#addTemplate").html())
          },
          toolbar: [{
            name: "create",
            text: "Add User Defined Subject"
          }],
          dataSource: curriculumsetupGridDataSource,
          //detailInit: curriculumsetupGridDetailInit,
          columns: [{
            field: "",
            title: "Curr"
          }, {
            field: "",
            title: "Subject/Domian/Dimension"
          }, {
            field: "",
            title: "Code"
          }, {
            field: "",
            title: "Print at <br />Dimension <br /> Level"
          }, {
            field: "",
            title: "P 1 2 3 4 5 6"
          }, {
            field: "",
            title: "Command"
          }],
          rowTemplate: kendo.template($("#rowTemplate").html()),
          height: 800
        };

        //ausVelsGridOptions
        var ausVelsGridDataSource = new kendo.data.DataSource({
          data: new kendo.data.ObservableArray(ausVelsVOs),
          schema: {
            model: {
              fields: {}
            }
          }
        });

        vm.ausVelsGridOptions = {
          sortable: false,
          selectable: false,
          scrollable: false,
          dataSource: ausVelsGridDataSource,
          detailInit: ausVelsGridDetailInit,
          columns: [{
            field: "ausVelsVO.curriculumVO.code",
            title: "Curr"
          }, {
            field: "ausVelsVO.curriculumVO.curriculum",
            title: "Subject/Domian/Dimension"
          }, {
            field: "",
            title: "Code"
          }, {
            field: "",
            title: "Print at <br />Dimension <br /> Level"
          }, {
            field: "",
            title: "P 1 2 3 4 5 6"
          }, {
            field: "",
            title: ""
          }],
          dataBound: function(e) {
            var currentGrid = e.sender;
            setGridStyle(currentGrid);
            currentGrid.tbody.find("td").addClass("background-color-light-green");
            currentGrid.collapseRow(currentGrid.tbody.find("tr.k-master-row").first());
          },
          detailExpand: function(e) {
            var currentDetailRow = e.detailRow;
            currentDetailRow.find("td.k-hierarchy-cell").addClass("background-color-light-green");
          }
        };

        //subjectYearSemesterGridOptions
        var subjectYearSemesterGridOptions = new kendo.data.DataSource({
          data: new kendo.data.ObservableArray(subjectYearSemesterVOs),
          schema: {
            model: {
              id: "subjectYearSemesterGridModel",
              fields: {
                "subjectYearSemesterVO.subjectVO.subject": {
                  type: "string",
                  validation: { // validation rules
                    required: true // the field is required
                  }
                },
                "subjectYearSemesterVO.subjectVO.subjectCode": {
                  type: "string",
                  validation: { // validation rules
                    required: true // the field is required
                  }
                }
              }
            }
          }
        });

        vm.subjectYearSemesterGridOptions = {
          sortable: false,
          selectable: false,
          scrollable: false,
          dataSource: subjectYearSemesterGridOptions,
          detailInit: subjectYearSemesterGridDetailInit,
          columns: [{
            field: "",
            title: "Curr"
          }, {
            field: "subjectYearSemesterVO.subjectVO.subject",
            title: "Subject/Domian/Dimension"
          }, {
            field: "subjectYearSemesterVO.subjectVO.subjectCode",
            title: "Code"
          }, {
            field: "",
            title: "Print at <br />Dimension <br /> Level"
          }, {
            field: "",
            title: "P 1 2 3 4 5 6"
          }, {
          
          }],
          rowTemplate: kendo.template($("#subjectYearSemesterGridRowTemplate").html()),
          dataBound: function(e) {
            var currentGrid = e.sender;
            sortGrid(currentGrid, ">tbody >tr", "#subjectYearSemesterGrid tbody", ".background-color-light-blue, input");
            setGridStyle(currentGrid);
          },
          detailExpand: function(e) {
            var currentDetailRow = e.detailRow;
            currentDetailRow.find("td.k-hierarchy-cell").addClass("background-color-light-green");
          },
          editable: {
            mode: "inline",
            confirmation: function(e) {
              return "Are you sure that you want to delete record?";
            }
          }
        };
      }

      function ausVelsGridDetailInit(e) {
        //domainYearSemesterGridOptions
        var domainYearSemesterGridDataSource = new kendo.data.DataSource({
          data: new kendo.data.ObservableArray(vm.domainYearSemesterVOs),
          schema: {
            model: {
              fields: {}
            }
          }
        });

        $("<div/>").appendTo(e.detailCell).kendoGrid({
          sortable: false,
          selectable: false,
          scrollable: false,
          dataSource: domainYearSemesterGridDataSource,
          columns: [{
            field: "domainYearSemesterVO.domainVO.curriculumVO.code",
            title: "Curr"
          }, {
            field: "domainYearSemesterVO.domainVO.domain",
            title: "Subject/Domian/Dimension"
          }, {
            field: "domainYearSemesterVO.domainVO.kdokey",
            title: "Code"
          }, {
            field: "domainYearSemesterVO.reportAtDimensionLevel",
            title: "Print at <br />Dimension <br /> Level"
          }, {
            field: "",
            title: "P 1 2 3 4 5 6"
          }, {
            field: "",
            title: ""
          }],
          dataBound: function(e) {
            var currentGrid = e.sender;
            //Hide header row
            currentGrid.thead.hide();
            sortGrid(currentGrid, ">tbody >tr", "#ausVelsGrid tbody", "");
            currentGrid.tbody.find("td").addClass("background-color-light-blue");
          },
          detailExpand: function(e) {
            var currentDetailRow = e.detailRow;
            currentDetailRow.find("td.k-hierarchy-cell").addClass("background-color-light-blue");
          }
        });
      }

      function subjectYearSemesterGridDetailInit(e) {
        var domainYearSemesterSetUpVOs = e.data.subjectYearSemesterVO.domainYearSemesterSetUpVOs;

        //domainYearSemesterGridOptions
         var domainYearSemesterGridDataSource = new kendo.data.DataSource({
                    data: new kendo.data.ObservableArray(domainYearSemesterSetUpVOs),
                    schema: {
                        model: {
                            id: "domainearSemesterGridModel",
                            fields: {
                                "domainYearSemesterVO.domainVO.domain": {
                                    type: "string",
                                    validation: { // validation rules
                                        required: true // the field is required
                                    }
                                },
                                "domainYearSemesterVO.domainVO.kdokey": {
                                    type: "string",
                                    validation: { // validation rules
                                        required: true // the field is required
                                    }
                                }
                            }
                        }
                    }
                });
        $("<div id=\"domainYearSemesterGrid-" + e.data.subjectYearSemesterVO.id + "\"/>").appendTo(e.detailCell).kendoGrid({
          sortable: false,
          selectable: false,
          scrollable: false,
          dataSource: domainYearSemesterGridDataSource,
          detailInit: domainYearSemesterGridDetailInit,
          columns: [{
            field: "domainYearSemesterVO.domainVO.curriculumVO.code",
            title: "Curr"
          }, {
            field: "domainYearSemesterVO.domainVO.domain",
            title: "Subject/Domian/Dimension"
          }, {
            field: "domainYearSemesterVO.domainVO.kdokey",
            title: "Code"
          }, {
            field: "domainYearSemesterVO.reportAtDimensionLevel",
            title: "Print at <br />Dimension <br /> Level"
          }, {
            field: "",
            title: "P 1 2 3 4 5 6"
          }, {
            command: ["destroy"]
          }],
          //rowTemplate: kendo.template($("#domainYearSemesterGridRowTemplate").html()),
          dataBound: function(e) {
            var currentGrid = e.sender;
            var currentDomainYearSemesterGridId = currentGrid.tbody.closest('.k-grid').attr('id');
            sortGrid(currentGrid, ">tbody >tr", "#" + currentDomainYearSemesterGridId + " tbody", ".background-color-white");
            setGridStyle(currentGrid);
            currentGrid.tbody.find("td").addClass("background-color-light-blue");
          },
          detailExpand: function(e) {
            var currentDetailRow = e.detailRow;
            currentDetailRow.find("td.k-hierarchy-cell").addClass("background-color-light-blue");
          },
          edit: function(e) {
            //if (!e.model.isNew()) {
            //    // Disable the editor of the "id" column when editing data items
            //    var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
            //    numeric.enable(false);
            //}
          },
          editable: {
            mode: "inline",
            confirmation: function(e) {
              return "Are you sure that you want to delete record?";
            }
          }
        });
      }

      function domainYearSemesterGridDetailInit(e) {
        var dimensionYearSemesterVOs = e.data.domainYearSemesterVO.dimensionYearSemesterVOs;

        //dimensionYearSemesterGridOptions
        var dimensionYearSemesterGridDataSource = new kendo.data.DataSource({
          data: new kendo.data.ObservableArray(dimensionYearSemesterVOs),
          schema: {
            model: {
              fields: {}
            }
          }
        });

        $("<div id=\"dimensionYearSemesterGrid-" + e.data.domainYearSemesterVO.id + "\"/>").appendTo(e.detailCell).kendoGrid({
          sortable: false,
          selectable: false,
          scrollable: false,
          dataSource: dimensionYearSemesterGridDataSource,
          columns: [{
            field: "dimensionVO.curriculumVO.code",
            title: "Curr"
          }, {
            field: "dimensionVO.dimension",
            title: "Subject/Domian/Dimension"
          }, {
            field: "dimensionVO.code",
            title: "Code"
          }, {
            field: "",
            title: "Print at <br />Dimension <br /> Level"
          }, {
            field: "",
            title: "P 1 2 3 4 5 6"
          }, {
            field: "",
            title: ""
          }],
          dataBound: function(e) {
            var currentGrid = e.sender;
            var currentDimensionYearSemesterGridId = currentGrid.tbody.closest('.k-grid').attr('id');
            sortGrid(currentGrid, ">tbody >tr", "#" + currentDimensionYearSemesterGridId + " tbody", "");
            setGridStyle(currentGrid);
            currentGrid.tbody.find("td").addClass("background-color-white");
          },
          detailExpand: function(e) {
            var currentDetailRow = e.detailRow;
            currentDetailRow.find("td.k-hierarchy-cell").addClass("background-color-white");
          }
        });
      }

      function sortGrid(currentGrid, filter, container, ignore) {
        currentGrid.table.kendoSortable({
          filter: filter,
          cursor: "move",
          ignore: ignore,
          hint: function(element) { //customize the hint
            return element.clone().addClass("hint");
          },
          placeholder: function(element) {
            return element.clone().addClass("k-state-hover").css("opacity", 0.65);
          },
          container: container,
          change: function(e) {
            var grid = currentGrid,
              oldIndex = e.oldIndex, //the old position
              newIndex = e.newIndex, //the new position
              view = grid.dataSource.view(),
              dataItem = currentGrid.dataSource.getByUid(e.item.data("uid")); //retrieve the moved dataItem

            dataItem.Order = newIndex; //update the order
            dataItem.dirty = true;

            //shift the order of the records
            if (oldIndex < newIndex) {
              for (var i = oldIndex + 1; i <= newIndex; i++) {
                view[i].Order--;
                view[i].dirty = true;
              }
            } else {
              for (var j = oldIndex - 1; j >= newIndex; j--) {
                view[j].Order++;
                view[j].dirty = true;
              }
            }

            currentGrid.dataSource.remove(dataItem);
            currentGrid.dataSource.insert(newIndex, dataItem);
          }

        });
      }

      function setGridStyle(currentGrid) {
        //Hide header row
        currentGrid.thead.hide();
        currentGrid.tbody.find("tr.k-alt").removeClass("k-alt");
      }
      
       function subjectYearSemesterGrid_Edit_Click(e) {
           
        }

        function subjectYearSemesterGrid_Delete_Click(e) {
            e.preventDefault();

        }

        function domainYearSemesterGrid_UnAssign_Click(e) {
            e.preventDefault();

        }
    }]);
})(window.angular);
/* Styles go here */
.background-color-light-green {
  background-color: lightgreen;
}
.background-color-light-blue {
  background-color: lightblue;
}
.background-color-light-grey {
  background-color: #d3d3d3;
}
.background-color-white {
  background-color: white;
}

.k-grid tr td {
    border-width:1px 0 0 0;
}