cuissues_edit.prg

<?php
// File: cuissues_edit.v2 (partially replaces cuissues_report)
// This file expands the edit form to be better suited for the workflow design.
// SPB 10/6/2015-- Replaced previous cuissues_report for kendo upgrade and billing workflow expansion.

$monLibrary = dirname(__FILE__) . "/../library";
$sharedLibrary = dirname(__FILE__) . "/../../shared/library";
require_once("$monLibrary/cu_top.i");
require_once("$monLibrary/ck_hticket.i");
require_once("$monLibrary/monitorView.i");
require_once("$sharedLibrary/commonJsFunctions.i");

  if (!CheckPerm($link, $Hu, basename($_SERVER['SCRIPT_NAME']), $_SERVER['REMOTE_ADDR'])) {
    // ** Permissions failed
    // ** redirect to new page
    header("Location: /hcuadm/hcu_noperm.prg");
    exit;
  }

// Globals
$listFile = "cuissues_report.prg";
$editFile = "cuissues_edit.prg";
$dataFile = "cuissues_data.prg";

dms_import_v2($DATA_PARAMETERS, "TOP_LEVEL", array("user_name" => "string", "trackId" => "digits", "trackItemId" => "digits"));
$cu = trim($DATA_PARAMETERS["TOP_LEVEL"]["user_name"]);
$trackId = intval($DATA_PARAMETERS["TOP_LEVEL"]["trackId"]);
$trackItemId = intval($DATA_PARAMETERS["TOP_LEVEL"]["trackItemId"]);

$backURL = "/hcuadm/$listFile";
if ($cu != "") {
  $backURL .= "?user_name=$cu";
}

$refreshURL = "/hcuadm/$editFile?";
if ($cu != "") {
  $refreshURL .= "user_name=$cu";
}

if ($trackId == 0) {
  $saveURL = "/hcuadm/$dataFile?operation=saveIssueAdd";
} else {
  $saveURL = "/hcuadm/$dataFile?operation=saveIssueEdit";
}

$todayDateTime = new DateTime();
$today = $todayDateTime->format("m/d/Y");

printMonitorPageTop("CU Job Tracking", $homecuKendoVersion, $cloudfrontDomainName);
?>

<style>
  .popupForm .grid_12, .formContainer .grid_12 {
    margin-bottom: 5px;
  }

  fieldset {
    border: 1px solid #cccccc;
    border-radius: 10px;
    margin: 5px;
    vertical-align: top;
    display: inline;
  }

  #issueDiv {
    width: 500px;
  }

  #cuDiv {
    width: 300px;
  }

  #contactDiv, #oldCommentDiv {
    width: 300px;
  }

  #commentDiv {
    width: 99%;
    height: 200px;
    overflow: auto;
  }

  .otherFieldsets {
    height: 200px;
  }

  .otherFieldsets .grid_12 {
    margin-top: 5px;
  }

  legend {
    padding: 5px;
  }

  #commentsGrid .k-grid-delete {
    min-width: 0px !important;
  }

  #dateGroup {
    width: 400px;
    padding: 5px;
  }

  #contactGroup, #topGroup {
    width: 500px;
  }

  #topGroup {
    border: 0px solid black;
    border-radius: 10px;
  }

  #currentStatus {
      position: fixed;
      right: 20px;
      top: 50px;
      width: 250px;
      padding: 10px;
      z-index: 99;
  }

  #btnDiv {
    margin-top: 5px;
  }

  #currentStatus, #currentStatus a {
    display: block;
  }

  #changesMadeLabel .top {
    font-weight: bold;
    display: block;
  }

  #changesMadeLabel .bottom {
    list-style:upper-roman inside none;
    display:list-item;
    margin-left: 5px;
  }

  .k-context-menu .k-item, .k-context-menu {
    width: 150px !important;
  }

  .moveUnderLi ul, .moveUnderLi ul .k-item {
    width: 300px !important;
    text-overflow: ellipsis;
  }

  .taskCommentPopupCircle.on {
    background-color: blue;
    border-radius: 5px;
    width: 10px;
    height: 10px;
  }

  .taskCommentPopupCircle.off {
    display:none;
  }

  #taskCommentGrid .k-grid-header, .detailGrid .k-grid-header, #commentsGrid .k-grid-header {
    display: none;
  }

  .k-notification {
    text-align: left;

    width: 350px;
  }

  .k-notification-wrap {
    white-space: normal !important;
    text-overflow: ellipsis;
    overflow: auto;
  }

  #tasksGrid .k-detail-cell {
    padding-left: 0px;
    padding-right: 0px;
  }

  .k-edit-form-container {
    width: auto !important;
  }

  #tasksGrid .k-grid-content tr, #commentsGrid .k-grid-content tr {
    cursor: context-menu;
  }

  #oldComments {
    width: 96%;
    height: 100px;
    margin-left: 5px;
    border-width: 0px;
    background-color: #eeeeee;
  }

  #taskContextMenu .k-link {
    text-overflow: ellipsis;
    overflow: auto;
  }
</style>

<script type="text/javascript">

<?php
// Include common functions
getErrorsAreShownFunction();
getSetupDeleteConfirmDialogFunction();
getEscapeHTMLFunction();
getShowWaitFunctions();
getAddMinifiedActionStyleFunction();
getUseValidatorInGridFunction();
getSetupValidatorInGridFunction();
?>

<?php // Initializes a dialog for when completing an issue and there are still open tasks assigned to it. ?>
function OpenCompleteConfirm() {
  var completeConfirm = $("#completeConfirmDialog").data("kendoWindow");
  var statusDDL = $("#statusDDL").data("kendoDropDownList");

  if (completeConfirm == null) {
    var completeConfirm = $("<div id='completeConfirmDialog'></div>").kendoWindow({
        content: {template: $("#confirmCompleteTemplate").html()},
        draggable: false,
        visible: false,
        actions: [],
        modal: true,
        title: "Confirm Completion",
        width: 400,
        resizable: false
    }).data("kendoWindow");

    $("#completeConfirmDialog .okayBtn").click(function () {
      ShowChanges("status", "Completed");
      changed.changedStatus = "Y";

      completeConfirm.close();
      return false;
    });

    $("#completeConfirmDialog .cancelBtn").click(function () {
      statusDDL.value(statusDDL.previousValue);

      completeConfirm.close();
      return false;
    });
  }

  completeConfirm.open().center();
}


<?php // Initializes the whole page. ?>
function InitPage() {
    $.homecuValidator.setup({formValidate: "mainForm", formStatusField: "formValidateMainDiv"});
    var unattachedFeatureDetailsDDL = [];

    $("#mainForm").submit(function (e) {
      e.preventDefault();
      return false;
    });

    var targetDatePicker = $("#targetDatePicker").kendoDatePicker({
      change: function() {
        ShowChanges("targetDate", kendo.toString(this.value(), "yyyy-MM-dd"));
        changed.targetDateChanged = "Y";
        changed.targetDateType = "";
      }
    }).data("kendoDatePicker");

    var dropDeadDatePicker = $("#dropDeadDatePicker").kendoDatePicker({
      change: function() {
        ShowChanges("dropDeadDate", kendo.toString(this.value(), "yyyy-MM-dd"));
        changed.changedDropDeadDate = "Y";
      }
    }).data("kendoDatePicker");

    $("[name='targetDateType']").click(function () {
      if ($(this).val() == "") {
        targetDatePicker.enable(true);
        $("#targetDatePicker").prop("required", true);
      } else {
        targetDatePicker.enable(false);
        targetDatePicker.value(null);
        $("#targetDatePicker").prop("required", false);
        $(".k-invalid-msg[data-for='targetDate']").hide();
      }

      ShowChanges("targetDate", null);
      changed.targetDateChanged = "Y";
      changed.targetDateType = $(this).val();
    });

    var issueOwnerDDL = $("#issueOwnerDDL").kendoDropDownList({
        dataSource: {
          data:[],
          schema: {
            model: {
              id: "value",
              fields: {
                value: {type: "string"},
                text: {type: "string"},
                filterNumber: {type: "number"}
              }
            }
          },
          filter: {field: "filterNumber", operator: "eq", value: 0}
        },
        dataTextField: "text",
        dataValueField: "value",
        filter: "startswith",
        change: function() {
          ShowChanges("owner", this.value());
          changed.changedOwner = "Y";
        }
    }).data("kendoDropDownList");

    var statusDDL = $("#statusDDL").kendoDropDownList({
      dataSource: {
        data: [],
        schema: {
          id: "value",
          fields: {
            value: {type: "string"},
            currentStatus: {type: "string"}
          }
        }
      },
      dataTextField: "value",
      dataValueField: "value",
      filter: "startswith",
      change: function() {

        if (this.value() == "Completed") {
          var taskData = $("#tasksGrid").data("kendoGrid").dataSource.data();
          var hasIncompleteTasks = false;
          for(var i = 0; i != taskData.length; i++) {
            if (taskData[i].completedOn == null && taskData[i].statusId != 2) {
              hasIncompleteTasks = true;
              break;
            }
          }

          if (hasIncompleteTasks) {
            OpenCompleteConfirm();
          } else {
            ShowChanges("status", this.value());
            changed.changedStatus = "Y";
            this.previousValue = this.value();
          }
        } else {
          ShowChanges("status", this.value());
          changed.changedStatus = "Y";
          this.previousValue = this.value();
        }
      }
    }).data("kendoDropDownList");

    var contactDDL = $("#contactDDL").kendoDropDownList({
      dataSource: {
        data: [],
        schema: {
          model: {
            id: "contactId",
            fields: {
              contactId: {type: "string"},
              text: {type: "string"},
              fullName: {type: "string"},
              email: {type: "string"},
              phone: {type: "string"},
              cu: {type: "string"},
              sortNumber: {type: "number"}
            }
          }
        },
        sort: [{field: "sortNumber", dir: "asc"}, {field: "text", dir: "asc"}]
      },
      dataTextField: "text",
      dataValueField: "contactId",
      change: function () {
        var dataItem = this.dataItem();

        if (dataItem.text == "SPECIAL") {
          $("#contactName").text(dataItem.fullName);
          $("#contactNameRow").show();
        } else {
          $("#contactNameRow").hide();
        }
        $("#contactPhone").text(dataItem.phone);
        $("#contactEmail").text(dataItem.email);
        ShowChanges("contactId", this.value());
        changed.changedContactId = "Y";

        if (this.text() == "NEW") {
          isSpecial = false;
          OpenContactPopup();
        } else if (this.text() == "SPECIAL") {
          isSpecial = true;
          OpenContactPopup();
        } else {
          this.previousValue = this.value();
        }
      }
    }).data("kendoDropDownList");

    var filterDefinition = {
      logic: "or",
      filters: [
        {field: "cu", operator: "eq", value: ""},
        {field: "cu", operator: "eq", value: "<?php echo $cu; ?>"}
      ]
    };

    $("#issue").blur(function () {
      ShowChanges("job", $(this).val());
      changed.changedIssue = "Y";
    });

    <?php if ($trackId == 0) { // If we are adding an issue, we will still need to get the data for the DDLs. ?>
      $("#issueNumber").text("NEW");

      var menu = $("#topMenuBar").data("kendoMenu");

      $("#changesMenuItem").addClass("k-info-colored");
      $("#changesMenuItem span").html("NEW job");
      menu.enable("#saveMenuItem", true);

      var today = kendo.toString(new Date(), "MM/dd/yyyy");
      $("#enteredDate").text(today);
      $("#lastActivityDate").text(today);
      $("#completedDate").text("N/A");

      showWaitWindow();
      $.post("/hcuadm/<?php echo $dataFile; ?>?operation=readIssueAdd", {cu: "<?php echo $cu; ?>"}, function (data) {
        hideWaitWindow();
        if (!errorsAreShown(data, "formValidateMainDiv")) {
          issueOwnerDDL.dataSource.data(data.ownerDDL);
          statusDDL.dataSource.data(data.statusDDL);

          // Force new status
          statusDDL.enable(false);
          issueOwnerDDL.value("<?php echo $Hu; ?>");
          $("#currentIssueStatus").text("Active");

          contactDDL.dataSource.data(data.contactDDL);
          contactDDL.previousValue = data.contactDDL;
          SetupContactPopup(data.roleDDL, contactDDL);

            <?php if ($cu != "") { // For now, let's assume that if there is a CU, then issue is from the CU index versus the report page. ?>
              $("#cu").text("<?php echo $cu; ?>");

              var dataItem = $.grep(data.cuDDL, function(n,i) {return n.value == "<?php echo $cu; ?>"})[0];
              $("#cu").click(function() {
                window.open("/hcuadm/cuindex.prg?action=fetch&rowid=" + dataItem.value.toLowerCase() + "&vc=" + dataItem.vendor + "&wc=" + dataItem.server);
                return false;
              });
              $("#cuDDL").text(data.cuName);
              $("#cuName").text(data.cuName);
              contactDDL.dataSource.filter(filterDefinition);
              contactDDL.select(0);
              unattachedFeatureDetailsDDL = $.grep(data.unattachedFeatureDetailsDDL, function(n,i) {
                return n.cu == "" || n.cu.toLowerCase() == $("#cu").text().toLowerCase();
              });
              AddAssociateBillingIdDDL(0, "Active", unattachedFeatureDetailsDDL);
            <?php } else { ?>
              var fullUnattachedFeatureDetailsDDL = data.unattachedFeatureDetailsDDL;
              var fromBillingDDL = null;
              var cuDDL = $("#cuDDL").kendoDropDownList({
                dataSource: {
                  data: data.cuDDL,
                  schema: {
                    model: {
                      id: "value",
                      fields: {
                        value: {type: "string"},
                        text: {type: "string"},
                        server: {type: "string"},
                        vendor: {type: "string"}
                      }
                    }
                  }
                },
                dataTextField: "text",
                dataValueField: "value",
                filter: "startswith",
                dataBound: function () {
                  filterDefinition.filters[1].value = this.value();
                  contactDDL.dataSource.filter(filterDefinition);
                  contactDDL.select(0);
                  var dataItem = contactDDL.dataItem();
                  $("#contactPhone").text(dataItem.phone);
                  $("#contactEmail").text(dataItem.email);
                  $("#cu").text(this.value());
                  $("#cuName").text(this.text());
                  unattachedFeatureDetailsDDL = $.grep(fullUnattachedFeatureDetailsDDL, function(n,i) {
                    return n.cu == "" || n.cu.toLowerCase() == $("#cu").text().toLowerCase();
                  });
                  AddAssociateBillingIdDDL(0, "Active", unattachedFeatureDetailsDDL);
                  fromBillingDDL = $("#fromBilling div").data("kendoDropDownList");
                },
                change: function () {
                  filterDefinition.filters[1].value = this.value();
                  contactDDL.dataSource.filter(filterDefinition);
                  contactDDL.select(0);
                  var dataItem = contactDDL.dataItem();
                  $("#contactPhone").text(dataItem.phone);
                  $("#contactEmail").text(dataItem.email);
                  $("#cu").text(this.value());
                  $("#cuName").text(this.text());
                  unattachedFeatureDetailsDDL = $.grep(fullUnattachedFeatureDetailsDDL, function(n,i) {
                    return n.cu == "" || n.cu.toLowerCase() == $("#cu").text().toLowerCase();
                  });
                  fromBillingDDL.dataSource.data(unattachedFeatureDetailsDDL);
                  fromBillingDDL.select(0);
                }
              }).data("kendoDropDownList");

              $("#cu").click(function() {
                var dataItem = cuDDL.dataItem();
                window.open("/hcuadm/cuindex.prg?action=fetch&rowid=" + dataItem.value.toLowerCase() + "&vc=" + dataItem.vendor + "&wc=" + dataItem.server);
                return false;
              });
            <?php } ?>

            $("#oldCommentDiv textarea").hide();
            $("#oldCommentDiv div").show();
            InitComments("#commentsGrid");
            $("#fromTemplate").text("No");
            $("#billed").text("No");
        }
      });

    <?php } else { ?>
    $("#issueNumber").text("<?php echo $trackId; ?>");

    showWaitWindow();
    $.post("/hcuadm/<?php echo $dataFile; ?>?operation=readIssueEdit", {trackId: "<?php echo $trackId; ?>"}, function(data) {
      hideWaitWindow();
      if (!errorsAreShown(data, "formValidateMainDiv")) {
        $("#creditUnion input").val(data.record.cuName);

        if (data.record.targetDateType != "") {
          if (data.record.targetDateType == "TBD") {
            $("[name='targetDateType']:eq(1)").prop("checked", true);
          } else if (data.record.targetDateType == "FLEX") {
            $("[name='targetDateType']:eq(2)").prop("checked", true);
          }
          $("#targetDate").prop("required", false);
          targetDatePicker.enable(false);
        } else {
          $("[name='targetDateType']:eq(0)").prop("checked", true);
          $("#targetDate").prop("required", true);
          targetDatePicker.enable(true);
        }

        if (data.record.targetDate != "") {
          var parts = data.record.targetDate.split("-");
          targetDatePicker.value(new Date(parts[0], parts[1] - 1, parts[2]));
          // new Date("2015-10-09") becomes 10/08/2015 18:00 on Chrome; new Date("10/09/2015") is different on Chrome and Firefox.
        }

        if (data.record.dropDeadDate != "") {
          var parts = data.record.dropDeadDate.split("-");
          dropDeadDatePicker.value(new Date(parts[0], parts[1] - 1, parts[2]));
          // new Date("2015-10-09") becomes 10/08/2015 18:00 on Chrome; new Date("10/09/2015") is different on Chrome and Firefox.
        }


        if (data.record.enteredOn == "") {
          $("#enteredDate").text("Not Recorded");
        } else {
          var parts = data.record.enteredOn.split("-");
          $("#enteredDate").text(kendo.toString(new Date(parts[0], parts[1] - 1, parts[2]), "MM/dd/yyyy"));
        }


        if (data.record.lastActivity == "") {
          $("#lastActivityDate").text("Not Recorded");
        } else {
          var parts = data.record.lastActivity.split("-");
          $("#lastActivityDate").text(kendo.toString(new Date(parts[0], parts[1] - 1, parts[2]), "MM/dd/yyyy"));
        }


        if (data.record.completedOn == "") {
            $("#completedDate").text("N/A");
        } else {
          var parts = data.record.completedOn.split("-");
          $("#completedDate").text(kendo.toString(new Date(parts[0], parts[1] - 1, parts[2]), "MM/dd/yyyy"));
        }

        $("#cuDDL").text(data.record.cuName);
        $("#cu").text(data.record.cu);
        $("#cuName").text(data.record.cuName);
        $("#cuServer").text(data.record.server);

        $("#cu").click(function() {
          window.open("/hcuadm/cuindex.prg?action=fetch&rowid="+data.record.cu.toLowerCase() + "&vc=" + data.record.vendor + "&wc=" + data.record.server);
          return false;
        });

        statusDDL.dataSource.data(data.statusDDL);

        contactDDL.dataSource.data(data.contactDDL);
        filterDefinition.filters[1].value = data.record.cu;
        contactDDL.dataSource.filter(filterDefinition);

        if (data.selectSpecial) {
          contactDDL.value("-1");
          $("#contactName").text(data.record.contactName);
          $("#contactNameRow").show();
        } else if (data.record.contactId == "") {
          contactDDL.select(0);
        } else {
          contactDDL.value(data.record.contactId);
        }
        contactDDL.previousValue = data.record.contactId;
        SetupContactPopup(data.roleDDL, contactDDL);

        $("#currentIssueOwner").text(data.record.issueOwner);

        if (data.record.issueOwner.toLowerCase() == "<?php echo strtolower($Hu); ?>" || data.record.issueOwner == "") {
          issueOwnerDDL.dataSource.data(data.ownerDDL);
          issueOwnerDDL.value(data.record.issueOwner);
        } else {
          issueOwnerDDL.destroy();
          $("#issueOwnerDiv").remove();
          $("#currentIssueOwner").show();
        }

        statusDDL.value(data.record.status);
        statusDDL.dataSource.filter({field: "currentStatus", operator: "eq", value: data.record.status});
        if (statusDDL.dataSource.view().length == 0) {
          statusDDL.dataSource.filter({field: "currentStatus", operator: "eq", value: "Unrecognized"});
          statusDDL.value("Unrecognized");
          statusDDL.previousValue = "Unrecognized";
          $("#currentIssueStatus").text("Unrecognized");
        } else {
          statusDDL.previousValue = data.record.status;
          $("#currentIssueStatus").text(data.record.status);
        }

        var dataItem = contactDDL.dataItem();
        if (dataItem != null) {
          $("#contactPhone").text(dataItem.phone);
          $("#contactEmail").text(dataItem.email);
        } else {
          contactDDL.select(0);
        }

        $("#issue").val(data.record.issue);

        commentData = data.comments;
        InitComments("#commentsGrid");

        if (data.record.oldComments.trim() == "") {
          $("#oldCommentDiv textarea").hide();
          $("#oldCommentDiv div").show();
        } else {
          $("#oldComments").val(data.record.oldComments);
        }

        var templateId = Number(data.record.templateId);
        var billingFeatureId = Number(data.record.billingFeatureId);
        $("#billingExists").text(Number(data.record.testId) == 0 ? "N" : "Y");
        $("#fromTemplate").text(templateId == 0 ? "No" : "Yes");
        $("#templateId").text(templateId);
        $("#billed").text(data.record.billed == "Y" ? "Yes" : "No");
        unattachedFeatureDetailsDDL= $.grep(data.unattachedFeatureDetailsDDL, function(n,i){
          return n.cu == "" || n.cu.toLowerCase() == data.record.cu.toLowerCase();
        });
        AddAssociateBillingIdDDL(data.record.billingFeatureId, data.record.status, unattachedFeatureDetailsDDL);
        InitTasks(data.ownerDDL, data.taskStatusDDL, data.comments);
      }

    });
    <?php } ?>

    $("#pageUpdateBtn").click(function () {
      UpdatePage(true, unattachedFeatureDetailsDDL);
      return false;
    });

    $("#pageContinueBtn").click(function () {
      UpdatePage(false, unattachedFeatureDetailsDDL);
      return false;
    });

    $("#pageCancelBtn").click(function () {
      showWaitWindow();
      window.location.href = "<?php echo $backURL; ?>";
      return false;
    });
}

function AddAssociateBillingIdDDL(billingFeatureId, status, ddlData) {
  var billingFeatureExists= $("#billingExists").text() == "Y";
  if ((billingFeatureId != null && billingFeatureId != 0) || status == "Deleted") {
    var fromBillingDDL = $("#fromBilling div").data("kendoDropDownList");
    if (fromBillingDDL != null) {
      fromBillingDDL.destroy();
    }
    $("#fromBilling").html(status == "Deleted" ? "No" : (billingFeatureExists ? "Yes" : "Feature doesn't exist"));
  } else {
    $("#fromBilling").empty();
    $("#fromBilling").append("<div style='width:100%'></div>");
    var fromBillingDDL = $("#fromBilling div").kendoDropDownList({
      dataSource: {
        data: ddlData,
        schema: {
          model: {
            id: "value",
            fields: {
              value: {type: "string"},
              text: {type: "string"},
              cu: {type: "string"}
            }
          }
        }
      },
      dataTextField: "text",
      dataValueField: "value",
      filter: "startswith",
      change: function () {
        ShowChanges("billingFeatureId", this.value());
      }
    }).data("kendoDropDownList");
    fromBillingDDL.select(0);
  }
}

<?php // This will add whatever was changed to the list of things that were changed.  This will also enable the save and save and return buttons. ?>
var changed = {};
function ShowChanges(key, value) {
  <?php if ($trackId != 0) { ?>
    var menu = $("#topMenuBar").data("kendoMenu");
    if (["No Changes", "Changes were saved"].indexOf($("#changesMenuItem").text().trim()) != -1) {
      $("#changesMenuItem").addClass("k-info-colored");
      $("#changesMenuItem").removeClass("k-success-colored");
      $("#changesMenuItem span").html("There are <span id='numChanges'>1</span> Changes");
      menu.enable("#saveMenuItem", true);
    }

    if (typeof(changed[key]) == "undefined") { // Add it to the list
      menu.append({text: key, cssClass: "changedList"}, $("#changesMenuItem"));
    }

    $("#numChanges").text($(".changedList").length);

    changed[key] = value;
  <?php } ?>
}

<?php // Prepares the page for saving and then does it. ?>
function UpdatePage(stayOnPage, ddlData) {
  $.homecuValidator.validate();
  if ($("#formValidateMainDiv li:visible").length == 0) {

    <?php if ($trackId == 0) { ?>
      var parameters = {};
      if ($("#targetDatePicker").data("kendoDatePicker").value() != null) {
        parameters.targetDate = kendo.toString(new Date($("#targetDatePicker").data("kendoDatePicker").value()), "yyyy-MM-dd");
      }
      parameters.targetDateType = $("[name='targetDateType']:checked").val();
      parameters.owner = $("#issueOwnerDDL").data("kendoDropDownList").value();
      parameters.contactId = $("#contactDDL").data("kendoDropDownList").value();
      parameters.contactName = $("#contactName").text();
      parameters.contactPhone = $("#contactPhone").text();
      parameters.contactEmail = $("#contactEmail").text();
      parameters.comments = "";
    <?php } else { ?>
      var parameters = changed;
      parameters.trackId = <?php echo intval($trackId); ?>;
      parameters.owner = $("#currentIssueOwner").is(":visible") ? $("#currentIssueOwner").text() : $("#issueOwnerDDL").data("kendoDropDownList").value();
    <?php } ?>
      parameters.deletedCommentIds = kendo.stringify(deletedIds);
      parameters.issue = $("#issue").val();
      parameters.status = $("#statusDDL").data("kendoDropDownList").value();
      parameters.cu = $("#cu").text(); // So it doesn't matter if it is set or if it is from the combobox.
      parameters.cuName = $("#cuName").text();

      if (typeof(parameters.comments) != "undefined") {
        var data = $("#commentsGrid").data("kendoGrid").dataSource.data();
        var comments = [];
        for (var i = 0; i != data.length; i++) {
          if (typeof(data[i].thisRowDirty) != "undefined" && data[i].thisRowDirty) {
            comments.push({commentId: data[i].commentId, subject: data[i].subject, text: data[i].text});
          }
        }
        parameters.comments = kendo.stringify(comments);
      }

      showWaitWindow();
      $.post("<?php echo $saveURL; ?>", parameters, function (data) {
        hideWaitWindow();
        if (!errorsAreShown(data, "formValidateMainDiv")) {
          if (!stayOnPage) {
            showWaitWindow();
            window.location.href = "<?php echo $backURL; ?>";
          }
          <?php if ($trackId == 0) { // If saving from a new issue, refreshing is necessary for functions that are only available to editing an issue. ?>
            showWaitWindow();
            window.location.href = "<?php echo $refreshURL; ?>&trackId=" + data.trackId;
          <?php } else { ?>
            $("#changesMenuItem").html('<span class="k-link">Changes were saved</span>');
            $("#changesMenuItem").removeClass("k-info-colored");
            $("#changesMenuItem").addClass("k-success-colored");
            var menu = $("#topMenuBar").data("kendoMenu");
            menu.enable("#saveMenuItem", false);
            menu.close("#saveMenuItem");

            if (!$("#currentIssueOwner").is(":visible")) {
                var issueOwnerDDL = $("#issueOwnerDDL").data("kendoDropDownList");
                $("#currentIssueOwner").text(issueOwnerDDL.value());

                if ($("#currentIssueOwner").text() != "<?php echo $Hu; ?>") {
                  issueOwnerDDL.destroy();
                  $("#issueOwnerDiv").remove();
                  $("#currentIssueOwner").show();
                }
            }

            var statusDDL = $("#statusDDL").data("kendoDropDownList");
            $("#currentIssueStatus").text(statusDDL.value());
            statusDDL.dataSource.filter({field: "currentStatus", operator: "eq", value: statusDDL.value()});
            if (statusDDL.value() == "Completed") {
                $("#completedDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));
            } else {
                $("#completedDate").text("N/A");
            }
            $("#lastActivityDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));

            var refreshTaskCommentGrids = typeof(changed["comments"]) != "undefined";
            if (deletedIds.length > 0) {
              commentData = $.grep(commentData, function(n,i) { return deletedIds.indexOf(n.commentId) == -1; });
              refreshTaskCommentGrids = true;
              deletedIds = [];
            }

            if (refreshTaskCommentGrids) {
              $(".taskCommentGrid:visible").each(function() {
                $(this).data("kendoGrid").dataSource.read();
              });
            }

            if (parameters.billingFeatureId != null) {
              $("#billingExists").text("Y"); // presumably
              AddAssociateBillingIdDDL(parameters.billingFeatureId, parameters.status, ddlData);
            } else if (parameters.changedStatus == "Y") {
              AddAssociateBillingIdDDL(parameters.billingFeatureId, parameters.status, ddlData);
            }

            changed = {}; // Clear out so that next save doesn't pick up previously changed stuff.
          <?php } ?>
        }
      });
  }
}

<?php // This will setup all the stuff for the contact popup using the two DDLs needed. It is called once. ?>
var isSpecial = false;
function SetupContactPopup(roleDDL, contactDDL) {
  var popup = $("<div id='contactPopup'></div>").kendoWindow({
        content: {template: $("#contactPopupTemplate").html()},
        draggable: false,
        visible: false,
        actions: [],
        modal: true,
        title: "Add Contact",
        width: 400,
        resizable: false,
        autoFocus: false
    }).data("kendoWindow");

  var roleDDL = $("#roleDDL").kendoDropDownList({
      dataSource: {
        data: roleDDL
      },
      dataTextField: "text",
      dataValueField: "value",
      filter: "startswith"
    }).data("kendoDropDownList");

  var phoneMTB = $("[name='contactPhone']").kendoMaskedTextBox({
            mask: "000-000-0000"
      }).data("kendoMaskedTextBox");

  $("#contactPopup .updateBtn").click(function () {

    $.homecuValidator.validate();
    if ($("#formValidateContactDiv li:visible").length == 0) {
      var parameters = {};
      parameters.cu = $("#cu").text();
      parameters.firstName = $("[name='contactFirstName']").val();
      parameters.lastName = $("[name='contactLastName']").val();
      parameters.email = $("[name='contactEmail']").val();
      parameters.comment = $("[name='contactComment']").val();
      parameters.role = roleDDL.value();
      parameters.phone = phoneMTB.value();
      parameters.decider = $("[name='decider']").prop("checked") ? "Y" : "N";

      if(isSpecial) {
        ShowChanges("contactId", -1);
        ShowChanges("contactName", parameters.firstName);
        ShowChanges("contactEmail", parameters.email);
        ShowChanges("contactPhone", parameters.phone);

        $("#contactNameRow").show();
        $("#contactName").text(parameters.firstName);
        $("#contactEmail").text(parameters.email);
        $("#contactPhone").text(parameters.phone);

        var ddlData = contactDDL.dataSource.data();

        // Update the "SPECIAL" record.
        ddlData[2].fullName = parameters.firstName;
        ddlData[2].email = parameters.email;
        ddlData[2].phone = parameters.phone;
        $.homecuValidator.setup({formValidate: "mainForm", formStatusField: "formValidateMainDiv"});
        popup.close();
      } else {
        showWaitWindow();
        $.post("/hcuadm/<?php echo $dataFile; ?>?operation=addNewContact", parameters, function(data) {
          hideWaitWindow();
          if (!errorsAreShown(data, "formValidateContactDiv")) {
            var ddlData = contactDDL.dataSource.data();
            ddlData.push(data.newDDLRecord);
            contactDDL.value(data.newDDLRecord.contactId);
            $("#contactPhone").text(data.newDDLRecord.phone);
            $("#contactEmail").text(data.newDDLRecord.email);
            ShowChanges("contactId", data.newDDLRecord.contactId);
            changed.changedContactId = "Y";
            contactDDL.previousValue = data.newDDLRecord.contactId; // At this point, the change is done.
            $.homecuValidator.setup({formValidate: "mainForm", formStatusField: "formValidateMainDiv"});
            popup.close();
          } else {
            contactDDL.value(contactDDL.previousValue);
          }
        });
      }
    }
    return false;
  });

  $("#contactPopup .cancelBtn").click(function () {
    if (contactDDL.previousValue == "") {
      contactDDL.select(0);
    } else {
      contactDDL.value(contactDDL.previousValue); // Cancelled so contact is not attached.
      var dataItem = contactDDL.dataItem();
      $("#contactPhone").text(dataItem.phone);
      $("#contactEmail").text(dataItem.email);

      if (dataItem.text == "SPECIAL") {
        $("#contactNameRow").show();
        $("#contactName").text(dataItem.fullName);
      } else {
        $("#contactNameRow").hide();
      }

    }

    $.homecuValidator.setup({formValidate: "mainForm", formStatusField: "formValidateMainDiv"});
    popup.close();
    return false;
  });
}

<?php // Called everytime the user selects the NEW contact option.  It will clear out the form and then open it. ?>
function OpenContactPopup() {

    $("#roleDDL").data("kendoDropDownList").select(0);
    $("[name='contactComment']").val(null);
    $("[name='decider']").prop("checked", false);
    $("#contactPopup .k-invalid-msg").hide();
    $("[name='contactLastName']").val(null);

    if (isSpecial) {
      $("#contactRoleRow").hide();
      $("#contactCommentRow").hide();
      $("#commentDeciderRow").hide();
      $("#contactLastNameRow").hide();
      $("[name='contactLastName']").prop("required", false);
      $("label[data-for='contactFirstName']").text("Full Name:");

      // Prepopulate
      var dataItem = $("#contactDDL").data("kendoDropDownList").dataItem();
      $("[name='contactFirstName']").val(dataItem.fullName);
      $("[name='contactEmail']").val(dataItem.email);
      $("[name='contactPhone']").data("kendoMaskedTextBox").value(dataItem.phone);
    } else {
      $("label[data-for='contactFirstName']").text("First Name:");
      $("[name='contactFirstName']").val(null);
      $("[name='contactEmail']").val(null);
      $("[name='contactPhone']").data("kendoMaskedTextBox").value(null);
      $("#contactRoleRow").show();
      $("#contactCommentRow").show();
      $("#commentDeciderRow").show();
      $("#contactLastNameRow").show();
      $("[name='contactLastName']").prop("required", true);
    }

    $.homecuValidator.setup({formValidate: "contactForm", formStatusField: "formValidateContactDiv"});
    $("#contactPopup").data("kendoWindow").open().center();
    $("[name='contactFirstName']").focus();
    setTimeout(function() { $("[name='contactFirstName']").focus();}, 400);
}

var showAllComments = true;
var deletedIds = [];
var commentIdToDelete = null;
var commentData = [];
var taskCommentGrids = [];
var taskIdMap = {};
<?php // Called once to set up the comment grid. ?>
function InitComments(gridSelector) {
  var grid = $(gridSelector).data("kendoGrid");

  if (grid != null) {
    grid.destroy();
    $(gridSelector).empty();
  }

  var nextCommentId = commentData.length+1;
  var initialized = false;
  var definition = {
    dataSource: {
      transport: {
        read: function (options) {
          options.success(commentData);
        },
        create: function (options) {
          commentData.push(options.data);
          options.success(options.data);
          $.homecuValidator.setup({formValidate: "mainForm", formStatusField: "formValidateMainDiv"});
        },
        update: function (options) {
          for(var i=0; i!= commentData.length; i++) {
            if (commentData[i].commentId == options.data.commentId) {
              commentData[i] = options.data;
            }
          }
          options.success(options.data);
          $.homecuValidator.setup({formValidate: "mainForm", formStatusField: "formValidateMainDiv"});
        }
      },
      schema: {
        model: {
          id: "mockCommentId",
          fields: {
            commentId: {type: "number", editable: false},
            mockCommentId: {type: "number", editable: false},
            <?php // For kendo's isNew() function because comments are added without being saved immediately ?>
            author: {type: "string", editable: false},
            createdDate: {type: "date", editable: false},
            trackItemId: {type: "number", editable: false},
            trackItemName: {type: "string", editable: false},
            text: {type: "string"},
            thisRowDirty: {type: "boolean", editable: false},
            <?php // So that I can tell what is changed.  Using the dirty flag doesn't work with popup because a "save" will set these to false. ?>
            groupId: {type: "number", editable: false}
          }
        }
      },
      sort: [{field: "createdDate", dir: "desc"}]
    },
    columns: [
      {field: "author", title: "Author", hidden: true, width: "75px"},
      {field: "createdDate", title: "Created Date", width: "75px", format: "{0:MM/dd/yy}"},
      {field: "text", title: "Text"}
    ],
    toolbar: [{name: "create", text: ""}, {name: "showAll", text: showAllComments ? "Hide Task Comments" : "Show All"}],
     editable: {
         mode: "popup",
         template: kendo.template($("#commentPopupTemplate").html()),
         window: {
              draggable: false,
              resizable: false,
              title: "",
              actions: [],
              width: 400,
              autoFocus: false
         }
     },
    edit: function (e) {
      setupValidatorInGrid(e);
      if (e.model.isNew()) {
        e.model.author = "<?php echo $Hu; ?>";
        e.model.createdDate = new Date();
        $(".k-window-title:visible").text("Add Comment");

        <?php // Change the text of the update so user knows it doesn't actually update yet. ?>
        e.model.thisRowDirty = true;
        $(e.container).find(".k-grid-update").html("<span class=\"k-icon k-i-plus\"></span>Add");
      } else {
        $(".k-window-title:visible").text("Edit Comment");
        $(e.container).find(".k-grid-update").html("<span class=\"k-icon k-i-edit\"></span>Modify");
      }

      $("[name='text']").blur(function () {
        e.model.thisRowDirty = true;
      })

      ShowChanges("comments", "");

      $("[name='text']").focus();
      setTimeout(function() { $("[name='text']").focus();}, 400);
    },
   save: function (e) {
    useValidatorInGrid(e);

    if (e.model.isNew()) {
      e.model.mockCommentId = nextCommentId++;
    }
   },
   dataBound: function () {
    var grid = this;
    if (!initialized) {
        addMinifiedActionStyle(gridSelector, true);
        initialized = true;
    }

    $(gridSelector).find(".k-grouping-row").each(function () {
        $(this).prev().find("td").css({borderBottom: "1px solid black"});
        $(this).next().find("td").css({borderTop: "1px solid black"});
        $(this).find("td").text($(this).find("td").text());
    });

    InitCommentContextMenu(this);

    $(gridSelector).find(".k-grid-content tr:not(.k-grouping-row)").on("mouseenter", function() {
      $(this).addClass("k-state-hover");
    });

    $(gridSelector).find(".k-grid-content tr:not(.k-grouping-row)").on("click", function () {
      grid.editRow($(this));
    });

    $(gridSelector).find(".k-grid-content tr:not(.k-grouping-row)").on("mouseleave", function () {
      $(this).removeClass("k-state-hover");
    });

    var rows = $(gridSelector).find(".k-grid-content tr");
    $(rows).mouseenter(function (thisEvent) {
      $(this).data("timer", setTimeout($.proxy(function() { ShowCommentNotification($(this))}, $(this)), 2000));
    });
    $(rows).mouseleave(function () {
      clearTimeout($(this).data("timer"));
    });
    $(rows).click(function () {
      ShowCommentNotification($(this));
      return false;
    });
   },
   cancel: function () {
    $(gridSelector).find(".k-grid-content tr:not(.k-grouping-row)").on("mouseenter", function() {
      $(this).addClass("k-state-hover");
    });

    $(gridSelector).find(".k-grid-content tr:not(.k-grouping-row)").on("click", function () {
      grid.editRow($(this));
    });

    $(gridSelector).find(".k-grid-content tr:not(.k-grouping-row)").on("mouseleave", function () {
      $(this).removeClass("k-state-hover");
    });

      var rows= $(gridSelector).find(".k-grid-content tr");
      $(rows).off("mouseenter mouseleave click");
      $(rows).mouseenter(function () {
        $(this).data("timer", setTimeout($.proxy(function() { ShowCommentNotification($(this))}, $(this)), 2000));
      });
      $(rows).mouseleave(function () {
        clearTimeout($(this).data("timer"));
      });
      $(rows).click(function () {
        ShowCommentNotification($(this));
        return false;
      });
   }
  };

  if (showAllComments) {
    definition.columns[0].hidden = false;
    definition.dataSource.group = {field: "groupId"};
    definition.columns.push({field: "groupId", hidden: true, groupHeaderTemplate: "# if (value == 0) { # Job Comments # } else { # Task Comments # } #"});
  } else {
    definition.dataSource.filter = [{field: "trackItemId", operator: "eq", value: 0}, {field: "author", operator: "eq", value: "<?php echo strtolower($Hu); ?>"}];
  }

  var commentsGrid = $(gridSelector).kendoGrid(definition).data("kendoGrid");

  $(gridSelector).find(".k-grid-showAll").click(function () {
    showAllComments = !showAllComments;
    InitComments(gridSelector);
    return false;
  });


}

<?php // This function sets up the context menu for the comment grid. ?>
function InitCommentContextMenu(grid) {
    var contextMenu = $("#commentContextMenu").data("kendoContextMenu");
    var commentIdToDelete = null;
    var commentRowForMenu = null;
    var commentGridForMenu = null;

    if (contextMenu == null) {
      var contextMenu = $("<div id='commentContextMenu'></div>").kendoContextMenu({
        target: "body",
        filter: "#commentsGrid .k-grid-content tr:not(.k-grouping-row), .taskCommentGrid .k-grid-content tr",
        alignToAnchor: true,
        orientation: "vertical",
        popupCollision: false,
        open: function (e) {
            this.remove("li");

            var grid = $(e.event.target).closest(".k-grid").data("kendoGrid");
            var tr = $(e.event.target).parent();
            var dataItem = grid.dataItem($(tr));

            var options = dataItem.trackItemId != 0 ? [{text: "Show Task Info", cssClass: "showTaskInfoLi"}] : [];
            if (dataItem.author.toLowerCase() == "<?php echo strtolower($Hu); ?>") {
              options.push({text: "Edit", cssClass: "editLi"});
              options.push({text: "Delete", cssClass: "deleteLi"});
            }
            this.append(options);
        },
        select: function (e) {
          var item = $(e.item);
          var tr = $(e.target);
          var grid = $(e.target).closest(".k-grid").data("kendoGrid");
          var dataItem = grid.dataItem($(tr));

          if ($(item).hasClass("editLi")) {
              grid.editRow($(tr));
          } else if ($(item).hasClass("deleteLi")) {
            if (dataItem.commentId == 0) { // Comment has not been saved and then deleted.
              var data = grid.dataSource.data();
              data = $.grep(data, function (n,i) { return dataItem.uid != n.uid; });
              grid.dataSource.data(data);
              ShowChanges("comments", "");
            } else {
              commentIdToDelete = dataItem.commentId;
              commentRowForMenu = tr;
              commentGridForMenu = grid;
              deleteConfirm.open().center();
            }
          } else if ($(item).hasClass("showTaskInfoLi")) {
            ShowCommentNotification($(tr));
          }
        }
      }).data("kendoContextMenu");

      deleteConfirm = $("<div id='deleteCommentDialog'></div>").kendoWindow({
            content: {template: $("#deleteConfirmTemplate").html()},
            draggable: false,
            visible: false,
            actions: [],
            modal: true,
            title: "Confirm deletion",
            width: 400,
            height: 125,
            resizable: false
        }).data("kendoWindow");

        $("#deleteCommentDialog .deleteConfirmContinueBtn").click(function () {
            if ($(commentRowForMenu).closest(".taskCommentGrid").length > 0) {
              $.post("/hcuadm/<?php echo $dataFile; ?>?operation=deleteTaskComment", {commentId: commentIdToDelete}, function (data) {
                if (!errorsAreShown(data, "formValidateMainDiv")) {
                  var grid = commentGridForMenu;
                  var data = grid.dataSource.data();
                  data = $.grep(data, function(n,i) { return commentIdToDelete != n.commentId; });
                  grid.dataSource.data(data);

                  $("#lastActivityDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));
                }
              });
            } else {
              var grid = $("#commentsGrid").data("kendoGrid");
              var data = grid.dataSource.data();
              data = $.grep(data, function(n,i) { return commentIdToDelete != n.commentId; });
              grid.dataSource.data(data);
              ShowChanges("comments", "");
              deletedIds.push(commentIdToDelete);
            }

            commentData = $.grep(commentData, function(n,i) { return commentIdToDelete != n.commentId; });

            deleteConfirm.close();
            return false;
        });

        $("#deleteCommentDialog .deleteConfirmCancelBtn").click(function () {
            deleteConfirm.close();
            return false;
        });


    }
}

function ShowCommentNotification(tr) {
  clearTimeout($(tr).data("timer"));
  if ($(tr).data("hasNotification") == true) {
    return;
  }

  var top = mouse.y - $("body").scrollTop() - 5;
  var left = mouse.x - $("body").scrollLeft() - 5;

  var notification = $("<div></div>").kendoNotification({
    position: {
      pinned: false,
      top: top,
      left: left
    },
    autoHideAfter: 0,
    show: function () {
      $(tr).data("hasNotification", true);
      $(".k-notification:last .k-icon").remove();
      $(".k-notification:last").mouseleave(function () {
        notification.hide();
      });
    },
    hide: function () {
      $(tr).data("hasNotification", false);
    }
  }).data("kendoNotification");

  var dataItem = $("#commentsGrid").data("kendoGrid").dataItem($(tr));
  if (dataItem.trackItemId == 0) {
    notification.info("<b>Job Note</b>");
  } else {
    var foundTask = $.grep(taskData, function(n,i) { return n.taskId == dataItem.trackItemId; });
    if (foundTask.length == 0) {
      notification.warning("Task not found!");
    } else {
      var note = "<div class='container_12'><div class='grid_12'><div class='grid_4 alpha'><b><u>Task Note</b></u></div></div><div class='grid_12'>&nbsp;</div>";
      if (foundTask[0].parentTaskId == 0) {
        note += "<div class='grid_12'><div class='grid_4 alpha'><b>Task:</b></div><div class='grid_8 omega'>" + foundTask[0].title + "</div></div>";
      } else {
        var foundParent = $.grep(taskData, function(n,i) { return n.taskId == foundTask[0].parentTaskId; });
        var parentName = foundParent.length == 0 ? "No parent found!" : foundParent[0].title;
        note += "<div class='grid_12'><div class='grid_4 alpha'><b>Task:</b></div><div class='grid_8 omega'>" + parentName + "</div></div>";
        note += "<div class='grid_12'><div class='grid_4 alpha'><b>Sub Task:</b></div><div class='grid_8 omega'>" + foundTask[0].title + "</div></div>";
      }
      note += "<div class='grid_12'><div class='grid_4 alpha'><b>Status:</b></div><div class='grid_8 omega'>" + foundTask[0].statusName + "</div></div>";
      note += "<div class='grid_12'><div class='grid_4 alpha'><b>Owner:</b></div><div class='grid_8 omega'>" + foundTask[0].ownerId + "</div></div>";
      note += "</div>";
      notification.info(note);
    }
  }
}

<?php if ($trackId != 0) { ?>
function InitTaskCommentWindow() {
  var commentWindow = $("#commentWindow").data("kendoWindow");
  var taskCommentGrid = $("#taskCommentGrid").data("kendoGrid");
  if (commentWindow == null) {
    commentWindow = $("<div id='commentWindow'></div>").kendoWindow({
          content: {template: $("#commentWindowTemplate").html()},
          draggable: false,
          visible: false,
          actions: [],
          modal: true,
          title: "Task Comments for <span class='taskName'></span>",
          width: 600,
          resizable: false
      }).data("kendoWindow");

      taskCommentGrid = $("#taskCommentGrid").kendoGrid({
        dataSource: {
          transport: {
            read: function(options) {
              options.success(commentData);
            },
            create: function(options) {
              var parameters = {text: options.data.text, taskId: options.data.trackItemId, issueId: $("#issueNumber").text(), cu: $("#cu").text()};
              showWaitWindow();
              $.post("/hcuadm/<?php echo $dataFile; ?>?operation=addTaskComment", parameters, function (data) {
                hideWaitWindow();
                if (!errorsAreShown(data, "formValidatePopupDiv")) {
                  data.record[0].trackItemName = taskCommentGrid.currentTrackItemName;
                  data.record[0].createdDate = new Date();
                  data.record[0].groupId = 1;
                  data.record[0].mockCommentId = commentData.length + 1;
                  commentData.push(data.record[0]);
                  if ($("#commentsGrid .k-grid-showAll").text().trim() == "Hide Task Comments") {
                    $("#commentsGrid").data("kendoGrid").dataSource.read();
                  }
                  options.success(data.record[0]);
                  $(taskCommentGrid.popupCircle).removeClass("off").addClass("on");
                  $.homecuValidator.setup({formValidate: "mainForm", formErrorTitle: 'The following errors were detected:', formStatusField: "formValidateMainDiv"});

                  $("#lastActivityDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));
                } else {
                  options.error(data.record[0]);
                }
              });

            }
          },
          schema: {
            model: {
              id: "commentId",
              fields: {
                commentId: {type: "number", editable: false},
                author: {type: "string", editable: false},
                createdDate: {type: "date", editable: false},
                trackItemId: {type: "number", editable: false},
                trackItemName: {type: "string", editable: false},
                text: {type: "string"}
              }
            }
          }
        },
        columns: [
          {field: "author", title: "Author", width: "75px"},
          {field: "createdDate", title: "Created Date", width: "75px", format: "{0:MM/dd/yy}"},
          {field: "text", title: "Text"}
        ],
         editable: {
             mode: "popup",
             template: kendo.template($("#commentPopupTemplate").html()),
             window: {
                  draggable: false,
                  resizable: false,
                  title: "",
                  actions: [],
                  width: 400,
                  autoFocus: false
             }
        },
    edit: function (e) {
      setupValidatorInGrid(e);
      if (e.model.isNew()) {
        e.model.author = "<?php echo $Hu; ?>";
        e.model.createdDate = new Date();
        e.model.trackItemId = taskCommentGrid.currentTaskId;
        e.model.trackItemName = taskCommentGrid.currentTaskName;
        $(".k-window-title:visible").text("Add Comment for \"" + taskCommentGrid.currentTaskName +"\"");
      }

      $("[name='text']").focus();
      setTimeout(function() { $("[name='text']").focus();}, 400);
    },
    save: function (e) {
      useValidatorInGrid(e);

    }
    }).data("kendoGrid");

    $("#commentWindow .okayBtn").click(function () {
      commentWindow.close();
      return false;
    });
  }
}

function OpenComments(popupCircle, gridSelector) {
  clearTimeout($(popupCircle).data("timer"));
  var dataItem = $(gridSelector).data("kendoGrid").dataItem($(popupCircle).parent().parent());
  $("#taskCommentGrid").data("kendoGrid").dataSource.filter({field: "trackItemId", operator: "eq", value: dataItem.taskId});
  $("#commentWindow").parent().find(".taskName").text(dataItem.title);
  $("#commentWindow").data("kendoWindow").open().center();
}

function InitTaskCommentDatabound(gridSelector) {
  var isMaster = $(gridSelector).closest(".detailGrid").length == 0;

  var popupCircles = null;
  if (isMaster) {
    popupCircles = $(gridSelector).find(".k-master-row .taskCommentPopupCircle").filter(function () { return $(this).closest(".detailGrid").length == 0; });
  } else {
    popupCircles = $(gridSelector).find(".k-grid-content tr .taskCommentPopupCircle");
  }
  $(popupCircles).mouseenter(function () {
    $(this).data("timer", setTimeout($.proxy(function() { OpenComments($(this), gridSelector)}, $(this)), 2000));
  });
  $(popupCircles).mouseleave(function () {
    clearTimeout($(this).data("timer"));
  });
  $(popupCircles).click(function () {
    if ($(this).hasClass("on") && !$(this).hasClass("off")) {
      OpenComments($(this), gridSelector);
    }
    return false;
  });
}

var showAllTasks = false;
var detailGrids = {};
var taskData = [];
<?php // Sets up the task grid. ?>
function InitTasks(ownerDDL, taskStatusDDL) {
  var initialized = false;
  var nextPosition = -1;
  var currentPosition = -1;
  var openDetails = {};
  var masterTasks = [];

  $.post("/hcuadm/<?php echo $dataFile; ?>?operation=readTasks", {trackId: <?php echo $trackId; ?>}, function(data) {
    if (!errorsAreShown(data, "formValidateMainDiv")) {
      taskData = data.record;
      masterTasks = data.masterTasks;
      tasksGrid.dataSource.read();

      nextPosition = $.grep(taskData, function(n,i) { return n.parentTaskId == 0; }).length;
    }
  });

  var toolbar = [{name: "create", text: ""}, {name: "showAll", text: "Show N/A"}];
  if ($("#fromTemplate").text() == "Yes") {
    toolbar.push({name: "pullIn", text: "Get Unused from Master"});
  }
  var tasksGrid = $("#tasksGrid").kendoGrid({
    dataSource: {
        transport: {
           read: function (options) {
               options.success(taskData);
           },
           create: function (options) {
                var nextTaskItIs = IsNextTask(-1, 0) ? "Y" : "N";
                var isFirstTask = taskData.length == 0 ? "Y" : "N";
                var parameters = {issueId: <?php echo $trackId; ?>, title: options.data.title, description: options.data.description,
                                  ownerId: options.data.ownerId, parentTaskId: 0, position: nextPosition, issueOwnerId: $("#currentIssueOwner").text(),
                                  cu: $("#cu").text(), cuName: $("#cuName").text(), issue: $("#issue").val(), isNextTask: nextTaskItIs, isFirstTask: isFirstTask};
                nextPosition++;
                showWaitWindow();
                $.post("/hcuadm/<?php echo $dataFile; ?>?operation=createTask", parameters, function(data) {
                    hideWaitWindow();

                    if (!errorsAreShown(data, "formValidatePopupDiv")) {
                      $("#lastActivityDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));
                      options.success(data.record);
                      taskIdMap[data.record[0].taskId]= data.record[0].title;
                      <?php // make sure that map is defined for new task when showing all comments. ?>
                      taskData.push(data.record[0]);
                      $.homecuValidator.setup({formValidate: "mainForm", formStatusField: "formValidateMainDiv"});
                      <?php // Put validator focus back on main page. ?>
                    } else {
                      options.error(data.record);
                    }
                });
           },
           update: function (options) {
               var nextTaskItIs = IsNextTask(options.data.taskId, 0) ? "Y" : "N";
               var parameters = {issueId: <?php echo $trackId; ?>, taskId: options.data.taskId, title: options.data.title,
                                 description: options.data.description, ownerId: options.data.ownerId, issueOwnerId: $("#currentIssueOwner").text(),
                                 previousOwnerId: options.data.previousOwnerId, cu: $("#cu").text(), isNextTask: nextTaskItIs,
                                 cuName: $("#cuName").text(), issue: $("#issue").val()};

               showWaitWindow();
               $.post("/hcuadm/<?php echo $dataFile; ?>?operation=updateTask", parameters, function (data) {
                    hideWaitWindow();

                    if (!errorsAreShown(data, "formValidatePopupDiv")) {
                      $("#lastActivityDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));
                      data.record[0].position = currentPosition;
                      options.success(data.record);
                      for (var i = 0; i != taskData.length; i++) {
                        if (data.record[0].taskId == taskData[i].taskId) {
                          taskData[i] = data.record[0];
                        }
                      }
                      $.homecuValidator.setup({formValidate: "mainForm", formStatusField: "formValidateMainDiv"});
                      <?php // Put validator focus back on main page. ?>
                    } else {
                      options.error(data.record);
                    }
               });
            }
          },
      schema: {
        model: {
          id: "taskId",
          fields: {
            title: {type: "string"},
            taskId: {type: "number"},
            description: {type: "string"},
            ownerId: {type: "string"},
            completedOn: {type: "date"},
            statusId: {type: "number", defaultValue: 1},
            statusName: {type: "string"},
            statusChangedDate: {type: "date"},
            parentTaskId: {type: "number"},
            position: {type: "number"},
            taskTemplateId: {type: "number"},
            billingItemId: {type: "number"}
          }
        }
      },
      sort: [{field: "viewOrder", dir: "asc"}, {field: "position", dir: "asc"}],
      filter: [{field: "parentTaskId", operator: "eq", value: 0}, {field: "statusId", operator: "neq", value: 2}]
    },
    columns: [
      {field: "statusId", hidden: true, menu: false},
      {title: "", attributes: {"class" : "commentPopupTD"}, width: "17px", menu: false},
      {field: "title", title: "Title", width: "200px"},
      {field: "description", title: "Description", width: "400px"},
      {field: "ownerId", title: "Owner", width: "50px", template: "# if (ownerId == '') { # (Job Owner) # } else { # #: ownerId # # } #"},
      {field: "completedOn", title: "Completed", format: "{0:d}", width: "50px"},
      {field: "statusName", title: "Status", hidden: true, width: "50px"},
      {field: "statusChangedDate", title: "Status Change Date", format: "{0:d}", hidden: true, width: "50px"},
      {field: "taskId", hidden: true, attributes: {"class" : "taskId"}, menu: false}
    ],
    columnMenu: true,
    autoBind: false,
    resizable: true,
    toolbar: toolbar,
    detailTemplate: "<div class=\"detailGrid\" style=\"width:100%\"></div>",
    detailInit: function(eOuter) {
      InitSubTasks(eOuter, ownerDDL, taskStatusDDL);
    },
    editable: {
       mode: "popup",
       template: kendo.template($("#popupTemplateTasks").html()),
       createAt: "bottom",
       window: {
            draggable: false,
            resizable: false,
            title: "<span id='taskPopupTitle'></span>",
            actions: [],
            width: 700,
            autoFocus: false
       }
    },
    edit: function (eOuter) {
      TaskEdit(eOuter, ownerDDL, true);
    },
    save: function (eOuter) {
      useValidatorInGrid(eOuter);
      eOuter.model.title = $("[name='title']").val(); <?php // Fixes safari's autofill problem. ?>
      eOuter.model.description = $("[name='description']").val();

      currentPosition = eOuter.model.position;

    },
    // To readd the click, mouseover, and mouseleave events to the row.
    cancel: function (eOuter) {
      this.cancelRow();
      var grid = this;
      var masterRows = $(this.tbody).find("tr.k-master-row");

      $(masterRows).off("mouseenter mouseleave");
      $(masterRows).on("mouseenter", function() {
        $(this).addClass("k-state-hover");
       });

       $(masterRows).on("mouseleave", function() {
        $(this).removeClass("k-state-hover");
       });

       $(masterRows).find("[role='gridcell']:not(.commentPopupTD)").off();
       $(masterRows).find("[role='gridcell']:not(.commentPopupTD)").on("click", function () {
          if ($("#currentIssueStatus").text() == "Active") {
            grid.editRow($(this).parent());
          }
       });

      // Color completed and N/As
      $(masterRows).each(function() {
        var dataItem = tasksGrid.dataItem($(this));
        if (dataItem.completedOn != null) {
          $(this).addClass("k-success-colored");
        } else if (dataItem.statusId == 2) {
          $(this).addClass("k-state-disabled");
        }

        var hasCommentsClass = $.grep(commentData, function(n,i) { return n.trackItemId == dataItem.taskId; }).length > 0 ? "on" : "off";
        $(this).find(".commentPopupTD").html("<div class='taskCommentPopupCircle " + hasCommentsClass + "'></div>");
      });

      InitTaskCommentDatabound("#tasksGrid");

      eOuter.preventDefault();
      return false;
    },
    dataBound: function (eOuter) {
      var masterRows = $(this.tbody).find("tr.k-master-row");
      var grid = this;

      <?php // Color completed and N/As ?>
      $(masterRows).each(function() {
        var dataItem = tasksGrid.dataItem($(this));
        if (dataItem.completedOn != null) {
          $(this).addClass("k-success-colored");
        } else if (dataItem.statusId == 2) {
          $(this).addClass("k-state-disabled");
        }

        grid.expandRow($(this));

        var hasCommentsClass = $.grep(commentData, function(n,i) { return n.trackItemId == dataItem.taskId; }).length > 0 ? "on" : "off";
        $(this).find(".commentPopupTD").html("<div class='taskCommentPopupCircle " + hasCommentsClass + "'></div>");
      });

      if (!initialized) {
          addMinifiedActionStyle(this, true);
          initialized = true;

          InitPullIn(masterTasks);
          InitTaskCompleteDialog(ownerDDL);

          <?php if ($trackItemId != 0) { // Find if there is a trackItemId and if there is, open it.?>
            var foundTask = false;
            var parentTaskId = 0;
            var tr = $(".taskId").filter(function(index) { return $(this).text() == <?php echo $trackItemId; ?>; }).parent();
            if ($(tr).length > 0) {
              $(tr).closest(".k-grid").data("kendoGrid").editRow($(tr));
            }
          <?php } ?>
      }

      InitTaskContextMenu(this);

      $(masterRows).on("mouseenter", function() {
        $(this).addClass("k-state-hover");
      });

      $(masterRows).on("mouseleave", function() {
        $(this).removeClass("k-state-hover");
      });

      $(masterRows).find("[role='gridcell']:not(.commentPopupTD)").on("click", function () {
        if ($("#currentIssueStatus").text() == "Active")
          grid.editRow($(this).parent());
      });



      InitTaskCommentDatabound("#tasksGrid");
    }
  }).data("kendoGrid");

  $("#tasksGrid .k-grid-showAll").click(function () {
      showAllTasks = !showAllTasks;
      if (showAllTasks) {
        tasksGrid.dataSource.filter({field: "parentTaskId", operator: "eq", value: 0});
        // Correct visible details
        $("#tasksGrid .detailGrid:visible").each(function () {
          var thisGrid = $(this).data("kendoGrid");
          var filter = thisGrid.dataSource.filter();
          filter.filters.splice(1,1);
          thisGrid.dataSource.filter(filter);
        });
      } else {
        tasksGrid.dataSource.filter([{field: "parentTaskId", operator: "eq", value: 0}, {field: "statusId", operator: "neq", value: 2}]);
        // Correct visible details
        $("#tasksGrid .detailGrid:visible").each(function () {
          var thisGrid = $(this).data("kendoGrid");
          var filter = thisGrid.dataSource.filter();
          filter.filters.push({field: "statusId", operator: "neq", value: 2});
          thisGrid.dataSource.filter(filter);
        });
      }

      $("#tasksGrid .k-grid-showAll").text(showAllTasks ? "Hide N/A" : "Show N/A");
    return false;
  });

  InitTaskCommentWindow();
}

function InitPullIn(masterTasks) {
  var pullInWindow = $("#pullInWindow").data("kendoWindow");
  var pullInGrid = $("#pullInGrid").data("kendoGrid");
  if (pullInWindow == null) {
    pullInWindow = $("<div id='pullInWindow'></div>").kendoWindow({
      content: {
        template: kendo.template($("#pullInTemplate").html())
      },
      modal: true,
      title: "Pull In Task Templates",
      visible: false,
      actions: [],
      draggable: false,
      resizable: false,
      width: 600
    }).data("kendoWindow");

    var pullInNoWindow = $("<div id='pullInNoWindow'></div>").kendoWindow({
      content: {
        template: kendo.template($("#pullInNoTemplates").html())
      },
      modal: true,
      title: "No Templates",
      visible: false,
      actions: [],
      draggable: false,
      resizable: false,
      width: 400
    }).data("kendoWindow");

    pullInGrid = $("#pullInGrid").kendoGrid({
      dataSource: {
        data: [],
        schema: {
          model: {
            id: "taskTemplateId",
            fields: {
              taskTemplateId: {type: "number"},
              title: {type: "string"}
            }
          }
        }
      },
      columns: [
        {field: "taskTemplateId", hidden: true},
        {title: "<input type='checkbox' id='allCheckbox'>", template: "<input type='checkbox' class='rowCheckbox'>", width: "35px"},
        {field: "title", title: "Task"}
      ],
      dataBound: function (e) {
        $(".rowCheckbox").click(function() {
          if ($(this).prop("checked")) {
            <?php // If all rowCheckboxes are now checked, then reflect that. ?>
            if ($(".rowCheckbox:not(:checked)").length == 0) {
              $("#allCheckbox").prop("checked", true);
            }
          } else {
            $("#allCheckbox").prop("checked", false);
          }
        });
      }
    }).data("kendoGrid");

    $("#allCheckbox").click(function() {
      if ($(this).prop("checked")) {
        $(".rowCheckbox").prop("checked", true);
      } else {
        $(".rowCheckbox").prop("checked", false);
      }
    });

    $("#tasksGrid .k-grid-pullIn").click(function () {
      <?php // Will need to do this everytime.  Master tasks could have been deleted which means that they would be available in this list again. ?>
      var lookup = {};
      for (var i = 0; i != taskData.length; i++) {
        lookup[taskData[i].taskTemplateId] = true;
      }
      var unusedData = $.grep(masterTasks, function(n,i) { return typeof(lookup[n.taskTemplateId]) == "undefined"; });

      if (unusedData.length == 0) {
        pullInNoWindow.open().center();
      } else {
        pullInGrid.dataSource.data(unusedData);
        $("#allCheckbox").prop("checked", false);
        pullInWindow.open().center();
      }
      return false;
    });

    $("#pullInWindow .saveBtn").click(function () {
      var taskTemplateIds = [];
      $(".rowCheckbox:checked").each(function() {
        taskTemplateIds.push($(this).parent().prev().text());
      });
      $.post("/hcuadm/<?php echo $dataFile; ?>?operation=pullInTaskTemplates",
        {taskTemplateIds: kendo.stringify(taskTemplateIds), trackId: <?php echo $trackId; ?>, taskLength: taskData.length, issueId: $("#templateId").text()},
      function (data) {
        if (!errorsAreShown(data, "formValidatePullInDiv")) {
          $("#lastActivityDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));
          for(var i = 0; i != data.record.length; i++) {
            taskData.push(data.record[i]);
          }
          $("#tasksGrid").data("kendoGrid").dataSource.read();
          pullInWindow.close();
        }
      });

      return false;
    });

    $("#pullInWindow .cancelBtn").click(function () {
      pullInWindow.close();
      return false;
    });

    $("#pullInNoWindow .okayBtn").click(function () {
      pullInNoWindow.close();
      return false;
    });
  }
}

function InitTaskCompleteDialog(taskOwnerDDLData) {
    taskCompleteDialog = $("<div id='taskCompleteDialog'></div>").kendoWindow({
    content: {
      template: kendo.template($("#taskCompleteDialogTemplate").html())
    },
    modal: true,
    title: "Complete Task",
    visible: false,
    actions: [],
    draggable: false,
    resizable: false,
    width: 400
  }).data("kendoWindow");

  var nextTaskOwnerDDL = $("#nextTaskOwnerDDL").kendoDropDownList({
    dataSource: {
      data: taskOwnerDDLData,
      schema: {
        model: {
          id: "value",
          fields: {
            value: {type: "string"},
            text: {type: "string"},
            filterNumber: {type: "number"}
          }
        }
      }
    },
    dataTextField: "text",
    dataValueField: "value"
  }).data("kendoDropDownList");

  var completeDatePicker = $("#completeDatePicker").kendoDatePicker({
    dataBound: function() {
      this.value(new Date());
    },
    change: function () {
      if (this.value() == null) {
        this.value(null);
        $("#completeDatePicker").val(null);
      }
    }
  }).data("kendoDatePicker");

  $("#taskCompleteDialog .saveBtn").click(function () {

    var currentTaskRecord = $("#taskCompleteDialog").data("currentTaskRecord");
    var nextTaskRecord = $("#taskCompleteDialog").data("nextTaskRecord");

    ChangeStatus(currentTaskRecord, 0, function(parameters) {
      if (nextTaskRecord != null) {
        if (nextTaskOwnerDDL.value().toLowerCase() != nextTaskRecord.ownerId.toLowerCase()) {
          parameters.nextTaskOwnerChanged = "Y";
          parameters.nextTaskOwner = nextTaskOwnerDDL.value().toLowerCase();
          nextTaskRecord.ownerId = parameters.nextTaskOwner;
        }
        parameters.nextTaskId = nextTaskRecord.taskId;
      }

      if ($("#completeNotes").val() != "") {
        parameters.completeNotes = $("#completeNotes").val();
      }
      parameters.forceEmail = $("#forceEmail:checked").length == 0 ? "N" : "Y";
      parameters.completeDate = $("#completeDatePicker").data("kendoDatePicker").value() == null ? null
                                : kendo.toString($("#completeDatePicker").data("kendoDatePicker").value(), "yyyy-MM-dd");
    }, function(data) {
      // Update next task
      if (nextTaskRecord != null) {
        var nextTaskI = -1;
        for(var i = 0; i!= taskData.length; i++) {
          if (taskData[i].taskId == nextTaskRecord.taskId) {
            taskData[i].ownerId = nextTaskRecord.ownerId;
            break;
          }
        }
      }

      if (typeof(data.noteRecord) != "undefined") {
        data.noteRecord.createdDate = new Date();
        data.noteRecord.groupId = 1;
        commentData.push(data.noteRecord);
        $("#commentsGrid").data("kendoGrid").dataSource.read();
        $("#taskCommentGrid").data("kendoGrid").dataSource.read();
      }

    });
    taskCompleteDialog.close();
    return false;
  });

  $("#taskCompleteDialog .cancelBtn").click(function () {
    taskCompleteDialog.close();
    return false;
  });
}

function OpenTaskCompleteDialog(currentTaskRecord, nextTaskRecord, isNextTask) {
  var taskCompleteDialog = $("#taskCompleteDialog").data("kendoWindow");
  var nextTaskOwnerDDL = $("#nextTaskOwnerDDL").data("kendoDropDownList");

  $("#taskCompleteDialog").data("currentTaskRecord", currentTaskRecord);
  $("#taskCompleteDialog").data("nextTaskRecord", nextTaskRecord);

  $("#completingTaskTitle").text(currentTaskRecord.title);

  $("#completeDatePicker").data("kendoDatePicker").value(new Date());

  if (nextTaskRecord != null) {
    $(".nextTaskDiv").show();
    $("#jobSendMsgDiv").hide();
    $("#nextTaskTitle").text(nextTaskRecord.title);

    var filterNumber = nextTaskRecord.parentTaskId == 0 ? 1 : 2;
    var filter = {logic: "or", filters: [{field: "filterNumber", operator: "eq", value: 0}, {field: "filterNumber", operator: "eq", value: filterNumber}]};
    nextTaskOwnerDDL.dataSource.filter(filter);

    nextTaskOwnerDDL.value(nextTaskRecord.ownerId.toLowerCase());
  } else {
    $(".nextTaskDiv").hide();
    $("#jobSendMsgDiv").show();
  }

  $("#completeNotes").val(null);
  $("#forceEmail").prop("checked", false);
  taskCompleteDialog.open().center();
}

function IsNextTask(taskId, parentTaskId) {
  var nextTaskItIs = true;
  if (parentTaskId != 0) {
      var nextParentTask = $.grep(taskData, function(n,i) { return n.parentTaskId == 0 && n.completedOn == null && n.statusId != 2; });
      nextParentTask.sort(function(a,b) {
        var viewOrderSort = a.viewOrder - b.viewOrder;
        var positionSort = a.position - b.position;
        if (viewOrderSort != 0) {
          return viewOrderSort;
        } else {
          return positionSort;
        }
      });
      if (nextParentTask[0].taskId != parentTaskId) {
        nextTaskItIs = false;
      }
  }

  if (nextTaskItIs) {
    var nextTask = $.grep(taskData, function(n,i) { return n.parentTaskId == parentTaskId && n.completedOn == null && n.statusId != 2; });
    nextTask.sort(function(a,b) {
        var viewOrderSort = a.viewOrder - b.viewOrder;
        var positionSort = a.position - b.position;
        if (viewOrderSort != 0) {
          return viewOrderSort;
        } else {
          return positionSort;
        }
      });
      if ((taskId != -1 && nextTask[0].taskId != taskId) || (taskId == -1 && nextTask.length != 0)) {
        nextTaskItIs = false;
      }
  }
  return nextTaskItIs;
}

function GetNextTasks() {
    var sortFunction = function(a,b) {
      var viewOrderSort = a.viewOrder - b.viewOrder;
      var positionSort = a.position - b.position;
      if (viewOrderSort != 0) {
        return viewOrderSort;
      } else {
        return positionSort;
      }
    };

    var nextTasks = [];
    var parentTasks = $.grep(taskData, function(n) { return n.parentTaskId == 0 && n.completedOn == null && n.statusId != 2; });
    parentTasks.sort(function(a,b) { return sortFunction(a,b); });
    var getCount = 2;
    for(var i = 0; i != parentTasks.length; i++) {
      var subTasks = $.grep(taskData, function(n) { return n.parentTaskId == parentTasks[i].taskId && n.completedOn == null && n.statusId != 2; });
      subTasks.sort(function(a,b) { return sortFunction(a,b); });
      if (subTasks.length == 0) {
        nextTasks.push(parentTasks[i]);
        getCount--;
      } else {
        for(var j = 0; j != subTasks.length; j++) {
          nextTasks.push(subTasks[j]);
          getCount--;
          if (getCount == 0) {
            break;
          }
        }
      }

      if (getCount == 0) {
        break;
      }
    }
    return nextTasks;
}

<?php // Nearly the same as the top level.  However, trying to get one function for both proved to be a big messy. ?>
function InitSubTasks(eOuter, ownerDDL, taskStatusDDL) {
   var nextPosition = $.grep(taskData, function(n,i) { return n.parentTaskId == eOuter.data.taskId; }).length;
   var currentPosition = -1;
   var initialized = false;
   eOuter.detailRow.find(".detailGrid").data("parentTaskId", eOuter.data.taskId);

   var filter = [{field: "parentTaskId", operator: "eq", value: eOuter.data.taskId}];
   if ($("#tasksGrid .k-grid-showAll").text().trim() == "Show N/A")
    filter.push({field: "statusId", operator: "neq", value: 2});

   var detailGrid = eOuter.detailRow.find(".detailGrid").kendoGrid({
      dataSource: {
        transport: {
           read: function (options) {
               options.success(taskData);
           },
           create: function (options) {
                var parentRecord = $.grep(taskData, function(n,i) { return n.taskId == eOuter.data.taskId; });
                var parentOwner = parentRecord[0].ownerId;

                var nextTaskItIs = IsNextTask(-1, eOuter.data.taskId) ? "Y" : "N";
                var parameters = {issueId: <?php echo $trackId; ?>, title: options.data.title, description: options.data.description,
                                  ownerId: options.data.ownerId, parentTaskId: eOuter.data.taskId, position: nextPosition,
                                  issueOwnerId: $("#currentIssueOwner").text(), cu: $("#cu").text(), cuName: $("#cuName").text(),
                                  issue: $("#issue").val(), parentTaskOwnerId: parentOwner,
                   isNextTask: nextTaskItIs};
                nextPosition++;
                showWaitWindow();
                $.post("/hcuadm/<?php echo $dataFile; ?>?operation=createTask", parameters, function(data) {
                    hideWaitWindow();

                    if (!errorsAreShown(data, "formValidatePopupDiv")) {
                      $("#lastActivityDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));
                      taskIdMap[data.record[0].taskId]= data.record[0].title;
                      <?php // make sure that map is defined for new task when showing all comments. ?>
                      taskData.push(data.record[0]);
                      options.success(data.record);
                      $.homecuValidator.setup({formValidate: "mainForm", formStatusField: "formValidateMainDiv"});
                    } else {
                      options.error(data.record);
                    }
                });
           },
           update: function (options) {
               var nextTaskItIs = IsNextTask(options.data.taskId, eOuter.data.taskId) ? "Y" : "N";
               var parameters = {issueId: <?php echo $trackId; ?>, taskId: options.data.taskId, title: options.data.title,
                                 description: options.data.description, ownerId: options.data.ownerId, issueOwnerId: $("#currentIssueOwner").text(),
                                 previousOwnerId: options.data.previousOwnerId, isNextTask: nextTaskItIs, cu: $("#cu").text(), cuName: $("#cuName").text(),
                                 issue: $("#issue").val()};

               showWaitWindow();
               $.post("/hcuadm/<?php echo $dataFile; ?>?operation=updateTask", parameters, function (data) {
                    hideWaitWindow();

                    if (!errorsAreShown(data, "formValidatePopupDiv")) {
                      $("#lastActivityDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));
                      data.record[0].position = currentPosition;
                      for (var i = 0; i != taskData.length; i++) {
                        if (data.record[0].taskId == taskData[i].taskId) {
                          taskData[i] = data.record[0];
                        }
                      }
                      options.success(data.record);
                      $.homecuValidator.setup({formValidate: "mainForm", formStatusField: "formValidateMainDiv"});
                    } else {
                      options.error(data.record);
                    }
               });
            }
          },
          schema: {
            model: {
              id: "taskId",
              fields: {
                title: {type: "string"},
                taskId: {type: "number"},
                description: {type: "string"},
                ownerId: {type: "string"},
                completedOn: {type: "date"},
                statusId: {type: "number", defaultValue: 1},
                statusName: {type: "string"},
                statusChangedDate: {type: "date"},
                parentTaskId: {type: "number"},
                position: {type: "number"},
                taskTemplateId: {type: "number"}
              }
            },
          },
          sort: [{field: "viewOrder", dir: "asc"}, {field: "position", dir: "asc"}],
          filter: filter
    },
    columns: [
      {field: "statusId", hidden: true, menu: false},
      {title: "", attributes: {"class" : "commentPopupTD"}, width: "17px", menu: false},
      {field: "title", title: "Title", width: "200px"},
      {field: "description", title: "Description", width: "400px"},
      {field: "ownerId", title: "Owner", width: "50px", template: "# if (ownerId == '') { # (Parent Owner) # } else { # #: ownerId # # } #"},
      {field: "completedOn", title: "Completed", format: "{0:MM/dd/yy}", width: "50px"},
      {field: "statusName", title: "Status", hidden: true, width: "50px"},
      {field: "statusChangedDate", title: "Status Change Date", format: "{0:MM/dd/yy}", hidden: true, width: "50px"},
      {field: "taskId", hidden: true, attributes: {"class" : "taskId"}, menu: false}
    ],
    columnMenu: true,
    resizable: true,
    editable: {
       mode: "popup",
       template: kendo.template($("#popupTemplateTasks").html()),
       createAt: "bottom",
       window: {
            draggable: false,
            resizable: false,
            title: "<span id='taskPopupTitle'></span>",
            actions: [],
            width: 400,
            autoFocus: false
       }
    },
    edit: function (eInner) {
      TaskEdit(eInner, ownerDDL, false);
    },
    save: function (eInner) {
      useValidatorInGrid(eInner);
      currentPosition = eInner.model.position;
      eInner.model.title = $("[name='title']").val();
      eInner.model.description = $("[name='description']").val();
    },
    cancel: function (eInner) {
      this.cancelChanges();
      var grid = this;
      var detailRows = $(this.tbody).find("tr");

      $(detailRows).off("mouseenter mouseleave");
      $(detailRows).on("mouseenter", function() {
        $(this).addClass("k-state-hover");
       });

       $(detailRows).on("mouseleave", function() {
        $(this).removeClass("k-state-hover");
       });

       $(detailRows).find("[role='gridcell']:not(.commentPopupTD)").off();
       $(detailRows).find("[role='gridcell']:not(.commentPopupTD)").on("click", function () {
        if ($("#currentIssueStatus").text() == "Active") {
          grid.editRow($(this).parent());
        }
       });

      // Color completed and N/As
      $(detailRows).each(function() {
        var dataItem = grid.dataItem($(this));
        if (dataItem.completedOn != null) {
          $(this).addClass("k-success-colored");
        } else if (dataItem.statusId == 2) {
          $(this).addClass("k-state-disabled");
        }

        var taskId = Number($(this).find(".taskId").text());
        var hasCommentsClass = $.grep(commentData, function(n,i) { return n.trackItemId == taskId; }).length > 0 ? "on" : "off";
        $(this).find(".commentPopupTD").html("<div class='taskCommentPopupCircle " + hasCommentsClass + "'></div>");
      });

      InitTaskCommentDatabound(eOuter.detailRow.find(".detailGrid"));

      eInner.preventDefault();
      return false;
    },
    dataBound: function (eInner) {
      var detailRows = $(this.tbody).find("tr");
      var grid = this;
      if (!initialized) {
        addMinifiedActionStyle(this, true);
        initialized = true;
      }

      $(detailRows).on("mouseenter", function() {
        $(this).addClass("k-state-hover");
      });

      $(detailRows).on("mouseleave", function() {
        $(this).removeClass("k-state-hover");
      });

      $(detailRows).find("[role='gridcell']:not(.commentPopupTD)").on("click", function () {
        if ($("#currentIssueStatus").text() == "Active") {
          grid.editRow($(this).parent());
        }
      });

      // Color completed and N/As
      $(detailRows).each(function() {
        var dataItem = grid.dataItem($(this));
        if (dataItem.completedOn != null) {
          $(this).addClass("k-success-colored");
        } else if (dataItem.statusId == 2) {
          $(this).addClass("k-state-disabled");
        }

        var taskId = Number($(this).find(".taskId").text());
        var hasCommentsClass = $.grep(commentData, function(n,i) { return n.trackItemId == taskId; }).length > 0 ? "on" : "off";
        $(this).find(".commentPopupTD").html("<div class='taskCommentPopupCircle " + hasCommentsClass + "'></div>");
      });

      InitTaskCommentDatabound(eOuter.detailRow.find(".detailGrid"));
    }
   }).data("kendoGrid");

  detailGrids[eOuter.data.taskId+ ""] = detailGrid;
}

<?php // This is the edit function for both the top- and bottom- level tasks. ?>
function TaskEdit(e, ownerDDL, isOuter) {
  setupValidatorInGrid(e);

  $("#popupForm").submit(function(e) {
    $(this).next().find(".k-grid-update").click();
    e.preventDefault();
    return false;
  });

  var filterNumber = isOuter ? 1 : 2;
  var filter = {logic: "or", filters: [{field: "filterNumber", operator: "eq", value: 0}, {field: "filterNumber", operator: "eq", value: filterNumber}]};
  var taskOwnerDDL = $("#taskOwnerDDL").kendoDropDownList({
    dataSource: {
      data: ownerDDL,
      schema: {
        model: {
          id: "value",
          fields: {
            value: {type: "string"},
            text: {type: "string"},
            filterNumber: {type: "number"}
          }
        }
      },
      filter: filter
    },
    dataTextField: "text",
    dataValueField: "value",
    change: function () {
      e.model.ownerId = this.value();
      e.model.dirty = true;
    }
  }).data("kendoDropDownList");

  if (e.model.isNew()) {
    e.container.parent().find('.k-window-title').text("Add Task");
    taskOwnerDDL.value("<?php echo $Hu; ?>");
    e.model.ownerId = "<?php echo $Hu; ?>";
  } else {
    e.container.parent().find('.k-window-title').text("Edit Task");
    e.model.previousOwnerId = e.model.ownerId;
    taskOwnerDDL.value(e.model.ownerId);
  }

  $("[name='title']").focus();
  setTimeout(function() { $("[name='title']").focus();}, 400);
}

function ChangeStatus(dataItem, newStatus, completeParameterFunction, completeUpdateFrontendFunction) {
  showWaitWindow();

  // Will now need the owner of the parent task in the case of user selecting "(Parent Task Owner)"
  var parentOwner = "";
  if (dataItem.parentTaskId != 0) {
    var parentRecord = $.grep(taskData, function(n,i) { return n.taskId == dataItem.parentTaskId; });
    parentOwner = parentRecord[0].ownerId;
  }
  var parameters = {taskId: dataItem.taskId, prevStatus: dataItem.statusId, newStatus: newStatus, issueId: <?php echo $trackId; ?>,
                    issueOwnerId: $("#currentIssueOwner").text(), parentTaskId: dataItem.parentTaskId, parentTaskOwnerId: parentOwner,
                    cu: $("#cu").text(), cuName: $("#cuName").text(), billingItemId: dataItem.billingItemId};
  if (typeof(completeParameterFunction) == "function") {
    (completeParameterFunction)(parameters);
  }


  $.post("/hcuadm/<?php echo $dataFile; ?>?operation=changeTaskStatus", parameters,
  function (data){
      hideWaitWindow();

      <?php // If no errors, then remove record from the grid ?>
      if (!errorsAreShown(data, "formValidateMainDiv")) {
          $("#lastActivityDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));
          var isParent = dataItem.parentTaskId == 0;
          var isReactivated = data.statusName == "TODO";
          var updateParent = true;
          var foundSibling = false;
          var parentI = -1;
          for (var i = 0; i != taskData.length; i++) {
            <?php // Children to N/A or Done ?>
            if (isParent && !isReactivated && taskData[i].parentTaskId == dataItem.taskId) {
              taskData[i].statusId = data.statusId;
              taskData[i].statusName = data.statusName;
              if (data.statusName == "Done") {
                taskData[i].completedOn = data.completeDate == "" ? new Date() : new Date(data.completeDate);
              }
            }

            <?php // The task ?>
            if (taskData[i].taskId == dataItem.taskId) {
              taskData[i].statusId = data.statusId;
              taskData[i].statusName = data.statusName;
              if (data.statusName == "Done") {
                taskData[i].completedOn = data.completeDate == "" ? new Date() : new Date(data.completeDate);
              } else {
                taskData[i].completedOn = null;
              }
            } else if (taskData[i].parentTaskId == dataItem.parentTaskId && taskData[i].statusId != 2 && taskData[i].completedOn == null) {
              updateParent = false;
            }

            // Parent of task
            if (!isParent && taskData[i].taskId == dataItem.parentTaskId) {
              parentI = i;
            }
          }

          // Parent update
          if (!isParent && parentI != -1) {
            if (isReactivated) {
              taskData[parentI].statusId = 1;
              taskData[parentI].statusName = "TODO";
              taskData[parentI].completedOn = null;
            } else if (updateParent) {
              taskData[parentI].statusId = 0;
              taskData[parentI].statusName = "Done";
              taskData[parentI].completedOn = data.completeDate == "" ? new Date() : new Date(data.completeDate);
            }
          }

        if (typeof(completeUpdateFrontendFunction) == "function") {
          (completeUpdateFrontendFunction)(data);
        }

          $("#tasksGrid").data("kendoGrid").dataSource.read();
          $("#tasksGrid .detailGrid:visible").each(function () {
            $(this).data("kendoGrid").dataSource.read();
          });
      }
  });
}

var taskDataItemForMenu = null;
<?php // This will initialize a context menu for the task grid. Most options that you can do for tasks are in this menu. ?>
function InitTaskContextMenu(grid) {
    var contextMenu = $("#taskContextMenu").data("kendoContextMenu");
    var taskGridForMenu = null;
    if (contextMenu == null) {
        var deleteConfirm= $("<div id='deleteTaskDialog'></div>").kendoWindow({
            content: {template: $("#deleteConfirmTemplate").html()},
            draggable: false,
            visible: false,
            actions: [],
            modal: true,
            title: "Confirm deletion",
            width: 400,
            height: 125,
            resizable: false
        }).data("kendoWindow");

        $("#deleteTaskDialog .deleteConfirmContinueBtn").click(function () {
            var deleteSubTasks = taskDataItemForMenu.parentTaskId != 0 || $.grep(taskData, function(n,i) {
              return n.parentTaskId == taskDataItemForMenu.taskId;
            }).length == 0 ? "N" : "Y";
            showWaitWindow();
            $.post("/hcuadm/<?php echo $dataFile; ?>?operation=deleteTask", {taskId: taskDataItemForMenu.taskId, deleteSubTasks: deleteSubTasks,
              trackId: <?php echo $trackId; ?>, cu: $("#cu").text(), cuName: $("#cuName").text(), isNew: $("#currentIssueStatus").text() == "New" ? "Y" : "N"},
            function (data){
                hideWaitWindow();

                // If no errors, then remove record from the grid
                if (!errorsAreShown(data, "formValidateMainDiv")) {
                    $("#lastActivityDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));
                    taskData = $.grep(taskData, function(n,i) { return n.taskId != taskDataItemForMenu.taskId && n.parentTaskId != taskDataItemForMenu.taskId; });
                    grid.dataSource.read();
                }
            });
            deleteConfirm.close();
            return false;
        });

        $("#deleteTaskDialog .deleteConfirmCancelBtn").click(function () {
            deleteConfirm.close();
            return false;
        });

      var contextMenu = $("<div id='taskContextMenu'></div>").kendoContextMenu({
        target: "#tasksGrid",
        filter: ".k-master-row > [role='gridcell']:not(.commentPopupTD), .detailGrid tr td:not(.commentPopupTD)",
        alignToAnchor: true,
        orientation: "vertical",
        popupCollision: false,
        open: function (e) {
            <?php // Prevent this logic from occurring when a submenu is opened.  is("[role='menubar']") refers to the main context menu. ?>
            if ($(e.item).is("[role='menuitem']")) {
              return;
            }

            this.remove("li");

            var options = [];
            var grid = $(e.event.target).closest(".k-grid").data("kendoGrid");
            var tr = $(e.event.target).parent();
            var dataItem = grid.dataItem($(tr));

            var issueOwner = $("#currentIssueOwner").text();
            <?php // This isn't the issueOwnerDDL value because the current owner could have changed that and haven't saved yet. ?>
            var issueStatus = $("#currentIssueStatus").text();

            if ($(grid.tbody).closest(".detailGrid").length > 0) {
               options.push({text: "Promote", cssClass: "promoteLi"});
            }

            var data= $("#tasksGrid .k-grid-showAll").text() == "Show All" ?
              $.grep(taskData, function(n,i) { return n.parentTaskId == dataItem.parentTaskId && n.statusId != 2; })
                        : $.grep(taskData, function(n,i) { return n.parentTaskId == dataItem.parentTaskId; }); // Only go through the parent tasks.
            data.sort(function(a, b) {
              return a.position - b.position;
            });
            if (data.length >= 2) { // Will need at least two tasks for move before and move after to make sense.
              var moveBeforeChoices = [];
              var moveAfterChoices = [];
              this.taskIndex = -1;
              for (var i = 0; i != data.length; i++) {
                moveBeforeChoices.push({text: data[i].title, cssClass: "moveBeforeChoiceLi task_" + i});
                moveAfterChoices.push({text: data[i].title, cssClass: "moveAfterChoiceLi task_" + i});
                if (data[i].taskId == dataItem.taskId) {
                  this.taskIndex = i;
                }
              }

              if (data.length == 2) {
                this.taskIndex == 0 ? moveBeforeChoices= [] : moveBeforeChoices.splice(this.taskIndex, 1);
                this.taskIndex == 1 ? moveAfterChoices= [] : moveAfterChoices.splice(this.taskIndex, 1);
              } else {
                moveBeforeChoices.splice(this.taskIndex, 2);
                this.taskIndex == 0 ? moveAfterChoices.splice(0, 1) : moveAfterChoices.splice(this.taskIndex - 1, 2);
              }

              if (moveBeforeChoices.length > 0) {
                options.push({text: "Move before...", items: moveBeforeChoices, cssClass: "moveBeforeLi"});
              }
              if (moveAfterChoices.length > 0) {
                options.push({text: "Move after...", items: moveAfterChoices, cssClass: "moveAfterLi"});
              }
            }

            if (issueStatus == "Active") {
              options.push({text: "Edit", cssClass: "editLi"});

              var canDelete = false;
              var canComplete = false;

              if ($(grid.tbody).closest(".detailGrid").length > 0) {
                $("#deleteTaskDialog #subTaskDeleteMsg").hide();
                canDelete = true;
                canComplete = true;
              } else { // Need more information
                if (dataItem.statusId != 2 && dataItem.completedOn == null) {
                  options.push({text: "Add Subtask", cssClass: "subtaskLi"});
                }
                var details = $("#tasksGrid .k-grid-showAll").text() == "Show All"
                  ? $.grep(taskData, function(n,i) { return n.parentTaskId == dataItem.taskId && n.statusId != 2 && n.completedOn == null; })
                  : $.grep(taskData, function(n,i) { return n.parentTaskId == dataItem.taskId; });
                if (details.length == 0) {
                   $("#deleteTaskDialog #subTaskDeleteMsg").hide();
                   canDelete = true;
                   canComplete = true;
                } else {
                  $("#deleteTaskDialog #subTaskDeleteMsg").show();
                  $("#deleteTaskDialog #subTaskDeleteMsg span").text(details.length);

                  if (issueOwner.toLowerCase() == "<?php echo strtolower($Hu); ?>") {
                    canDelete = true;
                    canComplete = true;
                  } else {
                    canDelete = true;
                    canComplete = true;
                    for(var i = 0; i != details.length; i++) {
                      if (details[i].ownerId != dataItem.ownerId) {
                        canDelete = false;
                      }

                      if (details[i].statusId != 0) { // Subtask isn't completed.  Therefore task cannot be completed.
                        canComplete = false;
                      }

                      if (!canDelete && !canComplete) { // No further need for loop.
                        break;
                      }
                    }
                  }
                }
              }

              if (dataItem.statusId != 2 && dataItem.completedOn == null && canComplete) {
                options.push({text: "Mark Complete", cssClass: "statusLi completeLi"});
              } else if (dataItem.statusId == 0) {
                options.push({text: "Mark Active", cssClass: "statusLi todoLi"});
              }
            }

            {
              if (dataItem.statusId != 2 && dataItem.completedOn == null) {
                options.push({text: "Mark N/A", cssClass: "statusLi naLi"});
              } else if (dataItem.statusId == 2) {
                options.push({text: "Mark Active", cssClass: "statusLi todoLi"});
              }
            }

            options.push({text: "Add Note", cssClass: "noteLi"});
            options.push({text: "Show Notes", cssClass: "showNotesLi"});

            if (canDelete) {
                options.push({text: "Delete", cssClass: "deleteLi"});
            }

            this.append(options);
        },
        select: function (e) {
          var item = $(e.item);
          var tr = $(e.target).parent();
          var grid = $(e.target).closest(".k-grid").data("kendoGrid");
          var dataItem = grid.dataItem($(tr));

          if ($(item).hasClass("editLi")) {
              grid.editRow($(tr));
          } else if ($(item).hasClass("deleteLi")) {
            taskDataItemForMenu = dataItem;
            taskGridForMenu = grid;
            deleteConfirm.open().center();
          } else if ($(item).hasClass("completeLi")) {
            var newStatus = 0;
            var nextTasks = GetNextTasks();
            var isNextTask = false;
            var nextTaskRecord = null;
            if (nextTasks[0].taskId == dataItem.taskId) {
              isNextTask = true;

              if (nextTasks.length >= 2) {
                nextTaskRecord = nextTasks[1];
              }
            } else {
              nextTaskRecord = nextTasks[0];
            }
            OpenTaskCompleteDialog(dataItem, nextTaskRecord, isNextTask);
          } else if ($(item).hasClass("statusLi")) {
            var newStatus = null;
            if ($(item).hasClass("todoLi")) {
              newStatus = 1;
            } else if ($(item).hasClass("naLi")) {
              newStatus = 2;
            } else if ($(item).hasClass("completeLi")) {
              newStatus = 0;
            }
            ChangeStatus(dataItem, newStatus);
        } else if ($(item).hasClass("noteLi")) {
          taskDataItemForMenu = dataItem;
          var commentGrid = $("#taskCommentGrid").data("kendoGrid");
          commentGrid.currentTaskId = dataItem.taskId;
          commentGrid.currentTaskName = dataItem.title;
          commentGrid.popupCircle = $(tr).find(".taskCommentPopupCircle");
          commentGrid.addRow();
        } else if ($(item).hasClass("showNotesLi")) {
          $("#taskCommentGrid").data("kendoGrid").dataSource.filter({field: "trackItemId", operator: "eq", value: dataItem.taskId});
          $("#commentWindow .taskName").text(dataItem.title);
          $("#commentWindow").data("kendoWindow").open().center();
        } else if ($(item).hasClass("subtaskLi")) {
          var detailGrid = detailGrids[dataItem.taskId];
          if (detailGrid == null) {
            grid.expandRow($(tr));
            grid.collapseRow($(tr));
          }
          detailGrids[dataItem.taskId].addRow();
        } else if ($(item).hasClass("promoteLi")) {
          showWaitWindow();
          $.post("/hcuadm/<?php echo $dataFile; ?>?operation=promoteTask",
                 {parentTaskId: dataItem.parentTaskId, taskId: dataItem.taskId, trackId: <?php echo $trackId; ?>,
                  cu: $("#cu").text(), cuName: $("#cuName").text()}, function (data) {
            hideWaitWindow();

            if (!errorsAreShown(data, "formValidateMainDiv")) {
              $("#lastActivityDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));
              taskI = -1, parentTaskI = -1, parentPosition = -1;
              for(var i = 0; i != taskData.length; i++) {
                if (taskData[i].taskId == dataItem.taskId) {
                  taskI = i;
                } else if (taskData[i].taskId == dataItem.parentTaskId) {
                  parentTaskI = i;
                  parentPosition = taskData[i].position;
                }
                if (taskI != -1 && parentTaskI != -1) {
                  break;
                }
              }
              taskData[taskI].position = parentPosition + 0.5; <?php // Not real values but it will probably refresh soon. ?>
              taskData[taskI].parentTaskId = 0;
              $("#tasksGrid").data("kendoGrid").dataSource.read();
            }
          });
        } else if ($(item).hasClass("moveAfterChoiceLi") || $(item).hasClass("moveBeforeChoiceLi")) {
          var classes = $(item).attr("class").split(/\s+/);
          var moveTaskId = 0;
          for(var i = 0; i != classes.length; i++) {
            var parts = classes[i].split(/_/);
            if (parts[0].trim() == "task") {
              moveTaskId = Number(parts[1]);
              break;
            }
          }

          var data = $("#tasksGrid .k-grid-showAll").text() == "Show All" ?
              $.grep(taskData, function(n,i) { return n.parentTaskId == dataItem.parentTaskId && n.statusId != 2; })
                  : $.grep(taskData, function(n,i) { return n.parentTaskId == dataItem.parentTaskId; });
          var theActualMoveTaskId = data[moveTaskId].taskId;
          var newLocation = $(item).hasClass("moveAfterChoiceLi") ? moveTaskId + 1 : moveTaskId;

          <?php // Do higher index first in order not to mess up the lower index. ?>
          if (newLocation >= this.taskIndex) {
            data.splice(newLocation, 0, dataItem);
            data.splice(this.taskIndex, 1);
          } else {
            data.splice(this.taskIndex, 1);
            data.splice(newLocation, 0, dataItem);
          }

          // Will need to remove the parent tasks and then readd them.
          taskData= $("#tasksGrid .k-grid-showAll").text() == "Show All" ?
              $.grep(taskData, function(n,i) { return n.parentTaskId != dataItem.parentTaskId || !(n.statusId != 2); })
                  : $.grep(taskData, function(n,i) { return n.parentTaskId != dataItem.parentTaskId; });

          var taskIds = [];
          for (var i = 0; i != data.length; i++) {
            taskIds.push(data[i].taskId);
            data[i].position = i;
            taskData.push(data[i]);
          }

          <?php // Finally send the results to the database. ?>
          var isNew = $("#currentIssueStatus").text() == "New";
          showWaitWindow();
          $.post("/hcuadm/<?php echo $dataFile; ?>?operation=reorderTasks",
          {taskIds: kendo.stringify(taskIds), issueId: <?php echo $trackId; ?>, isNew: isNew ? "Y" : "N",
              parentTaskId: dataItem.parentTaskId, cu: $("#cu").text(), cuName: $("#cuName").text(),
              taskId: dataItem.taskId, moveTaskId: theActualMoveTaskId, moveAfter: $(item).hasClass("moveAfterChoiceLi") ? "Y" : "N"},
           function (data) {
            $("#lastActivityDate").text(kendo.toString(new Date(), "MM/dd/yyyy"));
              hideWaitWindow();
              if (!errorsAreShown(data, "formValidateMainDiv")) {
                grid.dataSource.read();
              }
          });

        }
      }
      }).data("kendoContextMenu");
    }
}

<?php /* Started from http://jsfiddle.net/rusev/nmB69/ This will allow the reordering option.  Subtasks can be moved to the parent level.
There is logic to prevent user from moving record
into its own detail list (because then the parent will be itself which is impossible in this context. */?>
function InitTaskDropAndDrop() {
  var grid = $("#tasksGrid").data("kendoGrid");
  dataSource = grid.dataSource;
  grid.table.kendoDraggable({
    filter: "tr:not(.k-success-colored)",
    group: "taskGroup",
    hint: function(e) {
      var title = $(e).find("td:eq(2)").text();
      return $('<div class="k-grid k-widget draggableWidget"><b>Title: </b>' + title + '</div>');
    },
    dragstart: function(e) { // Prevent any task comments from being dragged.
      if ($(e.currentTarget).closest(".taskCommentGrid").length > 0) {
        e.preventDefault();
        return false;
      }
    }
  });

  grid.table.kendoDropTarget({
      group: "taskGroup",

      drop: function(e) {
          var targetTr = $(e.draggable.currentTarget);
          var destinationTr = $(e.target);

          if (destinationTr.hasClass("draggableWidget")) {
            $(".draggableWidget").hide();
            destinationTr = $(document.elementFromPoint(e.clientX, e.clientY)).parent();
            $(".draggableWidget").show();
          } else {
            destinationTr = $(destinationTr).parent();
          }

          var targetParent = Number($(targetTr).closest(".detailGrid").data("parentTaskId"));
          var destinationParent = Number($(destinationTr).closest(".detailGrid").data("parentTaskId"));
          var targetGrid = targetParent == 0 ? grid : detailGrids[targetParent + ""];
          var destinationGrid= destinationParent == 0 ? grid : detailGrids[destinationParent + ""];
          var target = targetGrid.dataItem($(targetTr));
          var destination = destinationGrid.dataItem($(destinationTr));

          if (typeof(destination) != "undefined"
            && target.taskId != destination.taskId && target.parentTaskId != destination.taskId && target.taskId != destination.parentTaskId
            && destination.statusId != 0) {

            var targetI = -1, destinationI = -1;
            target.parentTaskId = destination.parentTaskId;
            <?php // Get the indices for splicing the data. ?>
            for (var i = 0; i != taskData.length; i++) {
              if (taskData[i].taskId == target.taskId) {
                targetI = i;
              } else if (taskData[i].taskId == destination.taskId) {
                destinationI = i;
              }
              if (targetI != -1 && destinationI != -1) {
                break;
              }
            }
            <?php // Higher index done first to not mess up the index of the lower number. ?>
            if (destinationI > targetI) {
              taskData.splice(destinationI, 0, target);
              taskData.splice(targetI, 1);
            } else {
              taskData.splice(targetI, 1);
              taskData.splice(destinationI, 0, target);
            }
            <?php // Once the order is established, reset the position. ?>
            var taskIds = [];
            for (var i = 0; i != taskData.length; i++) {
              taskData[i].position = i;
              if (taskData[i].parentTaskId == destination.parentTaskId) {
                taskIds.push(taskData[i].taskId);
              }
            }

            $("#tasksGrid").data("kendoGrid").dataSource.read();

            var isNew = $("#currentIssueStatus").text() == "New";
            showWaitWindow();
            $.post("/hcuadm/<?php echo $dataFile; ?>?operation=reorderTasks",
            {taskIds: kendo.stringify(taskIds), issueId: <?php echo $trackId; ?>, isNew: isNew ? "Y" : "N",
             parentTaskId: destinationParent, cu: $("#cu").text(), cuName: $("#cuName").text()},
             function (data) {
                hideWaitWindow();
                errorsAreShown(data, "formValidateMainDiv");
            });
          }
      }
  });
}
<?php } ?>

var mouse = {x: 0, y: 0};
$(document).ready(function () {
    InitPage();
  $(this).mousemove(function (e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
  });
});

</script>
<script id="contactPopupTemplate" type="text/x-kendo-template">
<div class="k-edit-form-container">
    <div id="formValidateContactDiv" class="homecu-formStatus k-block k-error-colored" style="display:none;"></div>
    <form id="contactForm" class="popupForm" data-role="validator" novalidate>
      <div class="container_12">
          <div class="grid_12">
              <div class="grid_4 alpha" id="contactFirstNameRow">
                  <label data-for="contactFirstName">First Name:</label>
              </div>
              <div class="grid_7">
                  <input type="text" class="k-input" name="contactFirstName" required data-required-msg="First Name is required" style="width:100%" maxlength="40">
              </div>
              <div class="grid_1 omega">
                  <span data-for='contactFirstName' class='k-invalid-msg'></span>
              </div>
          </div>
          <div class="grid_12" id="contactLastNameRow">
              <div class="grid_4 alpha">
                  <label data-for="contactLastName">Last Name:</label>
              </div>
              <div class="grid_7">
                  <input type="text" class="k-input" name="contactLastName" required data-required-msg="Last Name is required" style="width:100%" maxlength="25">
              </div>
              <div class="grid_1 omega">
                  <span data-for='contactLastName' class='k-invalid-msg'></span>
              </div>
          </div>
          <div class="grid_12" id="contactRoleRow">
              <div class="grid_4 alpha">
                  <label data-for="role">Role:</label>
              </div>
              <div class="grid_7">
                  <div id="roleDDL"></div>
              </div>
              <div class="grid_1 omega">
                  &nbsp;
              </div>
          </div>
          <div class="grid_12">
              <div class="grid_4 alpha">
                  <label data-for="contactPhone">Phone:</label>
              </div>
              <div class="grid_7">
                  <input type="text" class="k-input" name="contactPhone" style="width:100%" homecu-match="phone"
                  data-homecuCustomMatch-msg="Phone is not in a valid format">
              </div>
              <div class="grid_1 omega">
                  <span data-for='contactPhone' class='k-invalid-msg'></span>
              </div>
          </div>
          <div class="grid_12">
              <div class="grid_4 alpha">
                  <label data-for="contactEmail">Email:</label>
              </div>
              <div class="grid_7">
                  <input type="text" class="k-input" name="contactEmail" style="width:100%" maxlength="50" homecu-match='email'
                  data-homecuCustomMatch-msg='Email is not in a valid format'>
              </div>
              <div class="grid_1 omega">
                  <span data-for='contactEmail' class='k-invalid-msg'></span>
              </div>
          </div>
          <div class="grid_12" id="contactCommentRow">
              <div class="grid_4 alpha">
                  <label data-for="contactComment">Comment:</label>
              </div>
              <div class="grid_7">
                  <textarea name="contactComment" row=15 col=40 style="width:100%" type="text" class="k-input"></textarea>
              </div>
              <div class="grid_1 omega">
                  <span data-for='contactComment' class='k-invalid-msg'></span>
              </div>
          </div>
          <div class="grid_12" id="commentDeciderRow">
              <div class="grid_4 alpha">
                  <label for="decider">Decider</label>
              </div>
              <div class="grid_6 prefix_1">
                  <input type="checkbox" name="decider">
              </div>
              <div class="grid_1 omega">
                  &nbsp;
              </div>
          </div>
        </div>
    </form>
  <div class="k-edit-buttons k-state-default">
    <a class="k-button k-button-icontext k-primary updateBtn" href="\#">
      <span class="k-icon k-i-check"></span>Update
    </a>
    <a class="k-button k-button-icontext cancelBtn" href="\#">
      <span class="k-icon k-i-cancel"></span>Cancel
    </a>
  </div>
</div>
</script>
<script id="deleteConfirmTemplate" type="text/x-kendo-template">
  <div class="k-edit-form-container">
    <div class="container_12">
        <div class="grid_12 message">Are you sure that you want to delete?
          <span id="subTaskDeleteMsg" style="display:none;">This will also delete <span>1</span> subtask(s) as well.</div>
    </div>
    <div class="k-edit-buttons k-state-default">
        <a class="k-button k-button-icontext deleteConfirmContinueBtn" href="\#">
            <span class="k-icon k-i-check"></span>
            Continue
        </a>
        <a class="k-button k-button-icontext deleteConfirmCancelBtn" href="\#">
            <span class="k-icon k-i-cancel"></span>
            Cancel
        </a>
    </div>
  </div>
</script>
<script id="commentPopupTemplate" type="text/x-kendo-template">
  <div id="formValidatePopupDiv" class="homecu-formStatus k-block k-error-colored" style="display:none;"></div>
  <form id="popupForm" class="popupForm" data-role="validator" novalidate>
    <div class="container_12">
      <div class="grid_12">
        <div class="grid_4 alpha">
            <label data-for="text">Text:</label>
        </div>
        <div class="grid_7">
            <textarea name="text" row=15 col=40 style="width:100%; height: 100px;" type="text" class="k-input"
            required data-required-msg="Text is required."></textarea>
        </div>
        <div class="grid_1 omega">
            <span data-for='text' class='k-invalid-msg'></span>
        </div>
      </div>
    </div>
  </form>
</script>
<script id="popupTemplateTasks" type="text/x-kendo-template">
  <div id="formValidatePopupDiv" class="homecu-formStatus k-block k-error-colored" style="display:none;"></div>
  <form id="popupForm" class="popupForm" data-role="validator" novalidate>
    <div class="container_12">
      <div class="grid_12">
          <div class="grid_2 alpha">
              <label data-for="title">Title:</label>
          </div>
          <div class="grid_9">
              <input type="text" class="k-input" name="title" style="width:100%" required data-required-msg="Title is required.">
          </div>
          <div class="grid_1 omega">
              <span data-for='title' class='k-invalid-msg'></span>
          </div>
      </div>
      <div class="grid_12">
          <div class="grid_2 alpha">
              <label data-for="description">Description:</label>
          </div>
          <div class="grid_9">
              <textarea name="description" row=15 col=40 style="width:100%; height: 100px;" type="text" class="k-input"></textarea>
          </div>
          <div class="grid_1 omega">
              <span data-for='description' class='k-invalid-msg'></span>
          </div>
      </div>
      <div class="grid_12">
          <div class="grid_2 alpha">
              <label data-for="owner">Owner:</label>
          </div>
          <div class="grid_9">
              <div id="taskOwnerDDL"></div>
          </div>
          <div class="grid_1 omega">
              &nbsp;
          </div>
      </div>
    </div>
  </form>
</script>
<script id="confirmCompleteTemplate" type="text/x-kendo-template">
  <div class="k-edit-form-container">
    <div class="container_12">
        <div class="grid_12 message">Are you sure that you want to complete the job?  There are some uncompleted tasks assigned to it.</div>
    </div>
    <div class="k-edit-buttons k-state-default">
        <a class="k-button k-button-icontext okayBtn" href="\#">
            <span class="k-icon k-i-check"></span>
            Okay
        </a>
        <a class="k-button k-button-icontext cancelBtn" href="\#">
            <span class="k-icon k-i-cancel"></span>
            Cancel
        </a>
    </div>
  </div>
</script>
<script id="commentWindowTemplate" type="text/x-kendo-template">
  <div>
    <div class="container_12">
        <div id="taskCommentGrid" style="width:100%"></div>
    </div>
    <hr>
    <a class="k-button k-button-icontext okayBtn" style="clear:both; float: right;" href="\#">
        <span class="k-icon k-i-check"></span>
        Okay
    </a>
  </div>
</script>
<script id="pullInTemplate" type="text/x-kendo-template">
    <div id="formValidatePullInDiv" class="homecu-formStatus k-block k-error-colored" style="display:none;"></div>
    <div class="container_12">
        <div id="pullInGrid" style="width:100%"></div>
    </div>
    <div class="k-edit-buttons k-state-default" style="float:right; margin-top:5px;">
        <a class="k-button k-button-icontext saveBtn" href="\#">
            <span class="k-icon k-i-check"></span>
            Save
        </a>
        <a class="k-button k-button-icontext cancelBtn" href="\#">
            <span class="k-icon k-i-cancel"></span>
            Cancel
        </a>
    </div>
</script>
<script id="taskCompleteDialogTemplate" type="text/x-kendo-template">
    <div id="formValidateCompleteDiv" class="homecu-formStatus k-block k-error-colored" style="display:none;"></div>
    <form id="completeForm" class="popupForm" data-role="validator" novalidate>
      <div class="container_12">
          <div class="grid_12">
              <div class="grid_4 alpha">
                  <label data-for="completingTask">Completing:</label>
              </div>
              <div class="grid_7">
                  <div id="completingTaskTitle"></div>
              </div>
              <div class="grid_1 omega">
                  <span data-for='completingTask' class='k-invalid-msg'></span>
              </div>
          </div>
          <div class="grid_12">
              <div class="grid_4 alpha">
                  <label data-for="completeDatePicker">On:</label>
              </div>
              <div class="grid_7">
                  <input id="completeDatePicker">
              </div>
              <div class="grid_1 omega">
                  <span data-for='completeDatePicker' class='k-invalid-msg'></span>
              </div>
          </div>
          <div class="grid_12 nextTaskDiv">
              <div class="grid_4 alpha">
                  <label data-for="nextTaskTitle">Next Task:</label>
              </div>
              <div class="grid_7">
                  <div id="nextTaskTitle"></div>
              </div>
              <div class="grid_1 omega">
                  <span data-for='nextTaskTitle' class='k-invalid-msg'></span>
              </div>
          </div>
          <div class="grid_12 nextTaskDiv">
              <div class="grid_4 alpha">
                  <label data-for="nextTaskOwner">Next Task Owner:</label>
              </div>
              <div class="grid_7">
                  <div id="nextTaskOwnerDDL"></div>
              </div>
              <div class="grid_1 omega">
                  <span data-for='nextTaskOwner' class='k-invalid-msg'></span>
              </div>
          </div>
          <div class="grid_12" id="jobSendMsgDiv">
            <b>This is the last active task.  Any comments will be appended to the job almost complete email.</b>
          </div>
          <div class="grid_12">
              <div class="grid_4 alpha">
                  <label data-for="completeNotes">Notes:</label>
              </div>
              <div class="grid_7">
                  <textarea id="completeNotes" row=15 col=40 style="width:100%; height: 100px;" type="text" class="k-input"></textarea>
              </div>
              <div class="grid_1 omega">
                  <span data-for='completeNotes' class='k-invalid-msg'></span>
              </div>
          </div>
          <div class="grid_12">
              <div class="grid_4 alpha">
                  <label data-for="forceEmail">Force Email:</label>
              </div>
              <div class="grid_7">
                  <input type="checkbox" id="forceEmail">
              </div>
              <div class="grid_1 omega">
                  <span data-for='forceEmail' class='k-invalid-msg'></span>
              </div>
          </div>
        </div>
      </form>
    <div class="k-edit-buttons k-state-default" style="float:right; margin-top:5px;">
        <a class="k-button k-button-icontext saveBtn" href="\#">
            <span class="k-icon k-i-check"></span>
            Complete
        </a>
        <a class="k-button k-button-icontext cancelBtn" href="\#">
            <span class="k-icon k-i-cancel"></span>
            Cancel
        </a>
    </div>
</script>
<script id="pullInNoTemplates" type="text/x-kendo-template">
  <div class="k-edit-form-container">
    <div class="container_12">
        <div class="grid_12 message">There are no tasks to add.</div>
    </div>
    <div class="k-edit-buttons k-state-default">
        <a class="k-button k-button-icontext okayBtn" href="\#">
            <span class="k-icon k-i-check"></span>
            Okay
        </a>
    </div>
  </div>
</script>

<?php printMonitorPageMiddle("CU Job Tracking", array("Save: " => array("id" => "saveMenuItem", "disabled" => $trackId != 0,
                                                                        "list" => array("Save" => array("id" => "pageUpdateBtn"),
  "Save and Return" => array("id" => "pageContinueBtn"))), "No Changes" => array("id" => "changesMenuItem", "noA" => true),
  "REDIRECT" => array("list" => array("Current Jobs" => array("url" => $backURL))))); ?>
        <div id='hideSubmitWait' style='position:relative; left:-2000px;top:-2000px;'>
          <div id='homecuSubmitWait' class='k-block' >
            <div class='k-loading-image'></div>
          </div>
        </div>

        <input type="hidden" id="invalidRequestClientSide">
        <input type="hidden" id="invalidRequestServerSide">
        <div class="container_12">
        <div class="grid_12">
              <div id="sqlOutput"></div>
        </div>
        <div class="grid_12">
              <div id="formValidateMainDiv" class="k-block k-error-colored" style="display:none;"></div>
        </div>
      <div class="grid_12">
      <form id="mainForm" data-role="validator" novalidate>
        <fieldset>
              <fieldset id="issueDiv" class="otherFieldsets">
                  <div class="grid_12">
                    <div class="grid_3 alpha">Job Number:</div>
                    <div class="grid_9 omega"><div id="issueNumber" style="width:100%"></div></div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_3 alpha">Job:</div>
                    <div class="grid_8">
                      <textarea class="k-input" type="text" id="issue" name="issue" row=15 col=40 style="width:100%"
                      maxlength="90" required data-required-msg="Job is required"></textarea>
                    </div>
                    <div class="grid_1 omega">
                      <span data-for='issue' class='k-invalid-msg'></span>
                    </div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_3 alpha">Status:</div>
                    <div class="grid_5 omega">
                      <div id="currentIssueStatus" style="display:none;"></div>
                      <div id="statusDDL" style="width:100%"></div></div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_3 alpha">Job Owner:</div>
                    <div class="grid_5 omega">
                      <div id="currentIssueOwner" style="display:none;"></div>
                      <div id="issueOwnerDiv"><div id="issueOwnerDDL" style="width:100%"></div></div>
                    </div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_3 alpha">From Template:</div>
                    <div class="grid_5 omega">
                      <div id="fromTemplate"></div>
                      <div id="templateId" style="display:none;"></div>
                    </div>
                  </div>
                  <div id="billingExists" style="display:none;"></div>
                  <div class="grid_12">
                    <div class="grid_3 alpha">From Billing:</div>
                    <div class="grid_5 omega">
                      <div id="fromBilling"></div>
                    </div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_3 alpha">Billed:</div>
                    <div class="grid_5 omega">
                      <div id="billed"></div>
                    </div>
                  </div>
              </fieldset>
              <fieldset id="cuDiv" class="otherFieldsets">
                  <div class="grid_12">
                    <div class="grid_4 alpha">CU Name:</div>
                    <div class="grid_8 omega">
                      <div id="cuDDL" style="width:100%"></div>
                      <div id="cuName" style="display:none;"></div>
                    </div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_4 alpha">CU:</div>
                    <div class="grid_8 omega">
                      <a id="cu" href="#"></a>
                    </div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_4 alpha">Entered on:</div>
                    <div class="grid_8 omega"><div id="enteredDate"></div></div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_4 alpha">Target Date:</div>
                    <div class="grid_7">
                      <input type="radio" name="targetDateType" value="" checked>
                      <input id="targetDatePicker" name="targetDate" homecu-match='date' style="width:85%"
                      data-required-msg="Target Date is required" disabled="disabled"><br>
                      <input type="radio" name="targetDateType" value="TBD" checked>&nbsp;TBD<br>
                      <input type="radio" name="targetDateType" value="FLEX">&nbsp;FLEX
                    </div>
                    <div class="grid_1 omega">
                      <span data-for='targetDate' class='k-invalid-msg'></span>
                    </div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_4 alpha">Drop Dead Date:</div>
                    <div class="grid_7">
                      <input id="dropDeadDatePicker" name="dropDeadDate" homecu-match='date' style="width: 85%; left: 20px;">
                    </div>
                    <div class="grid_1 omega">
                      <span data-for='dropDeadDate' class='k-invalid-msg'></span>
                    </div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_4 alpha">Last Activity:</div>
                    <div class="grid_8 omega"><div id="lastActivityDate"></div></div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_4 alpha">Completed on:</div>
                    <div class="grid_8"><div id="completedDate"></div></div>
                  </div>
              </fieldset>
              <fieldset id="contactDiv" class="otherFieldsets">
                <legend>CU Contact</legend>
                  <div class="grid_12">
                    <div class="grid_3 alpha">Contact:</div>
                    <div class="grid_9 omega"><div id="contactDDL" style="width:100%"></div></div>
                  </div>
                  <div class="grid_12" id="contactNameRow" style="display:none;">
                    <div class="grid_3 alpha">Name:</div>
                    <div class="grid_9 omega"><div id="contactName" style="width:100%"></div></div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_3 alpha">Email:</div>
                    <div class="grid_9 omega"><div id="contactEmail" style="width:100%"></div></div>
                  </div>
                  <div class="grid_12">
                    <div class="grid_3 alpha">Phone:</div>
                    <div class="grid_9 omega"><div id="contactPhone" style="width:100%"></div></div>
                  </div>
              </fieldset>
              <fieldset id="oldCommentDiv" class="otherFieldsets">
                <legend>Old Comment</legend>
                  <div style="display:none">No old comments found.</div>
                  <textarea id="oldComments" row=15 col=40  type="text" class="k-input" readonly="readonly"></textarea>
              </fieldset>
              <fieldset id="commentDiv">
                <legend>Comments</legend>
                <div class="grid_12">
                  <div id="commentNote"><b>Note:</b> Comments are not saved immediately.  They are saved when the page saves.</div>
                </div>
                <div class="grid_12">
                  <div id="commentsGrid"></div>
                </div>
              </fieldset>
          </fieldset>
      </form>
    </div>

        <?php if ($trackId != 0) { ?>
        <div class="grid_12"><hr></div>
        <div class="grid_12"><h3>Tasks</h3></div>
        <div class="grid_12"><div id="tasksGrid"></div></div>
        <?php } ?>
        </div>

<?php printMonitorPageBottom(); ?>