salesOrderDetail.prg

<?php
/* File: salesOrderDetail.html
 * Purpose: To initialize grid and CRUD calls on the salesOrderDetail page
 */
$isInEditList = GetIsInEditList($dbh, $Hu);
?>

<script type="text/javascript">

<?php
// Get common JS functions here.
getShowWaitFunctions();
?>

<?php // ===================
      // JAVASCRIPT GLOBALS
      // =================== ?>

var salesOrderId = <?php echo intval($SYSENV["BILL"]["salesOrderId"]); ?>;

<?php // ===================
      // VALIDATION FUNCTIONS
      // =================== ?>

<?php
/**
 * function SetupMainForm()
 * Sets up the homecuValidator for the main form.
 * This is needed when loading the screen
 * and when closing dialogs/windows with their validation.
 */
?>
function SetupMainForm() {
  $.homecuValidator.setup({formValidate:'formMain', formStatusField: 'formValidateMainDiv'});
}

<?php
/**
 * function SetupProductValidation(form, statusField)
 * Sets up the validation when adding a product (sales order detail.)
 *
 * @param form -- String to be used in "formValidate."
 * @param statusField -- String to be used in "formStatusField."
 */
?>
function SetupProductValidation(form, statusField) {

  $.homecuValidator.setup({formValidate: form, formStatusField: statusField, homecuCustomRules: {
    bhip: function(input) {
      if (!$(input).is("[name='halfBillDate']")) {
        return true;
      }
      if (productObservable.get("bindOptions.billHalfDateRowVisible") !== true) {
        return true;
      }
      if (productObservable.get("bindOptions.billHalfRowVisible") !== true) {
        return true;
      }
      var billHalfDate = productObservable.get("source.partiallyBilledDate");

      <?php // First of the month ?>
      var now = new Date();
      now.setDate(1);
      now.setHours(0,0,0,0);

      if(billHalfDate != null && now.getTime() >= billHalfDate.getTime()) {
        $(input).attr("data-bhip-msg", "Cannot bill this month or before.");
        return false;
      }

      return true;
    },
    crif: function(input) {
      if (!$(input).is("[name='checkReceived']")) {
        return true;
      }
      if (productObservable.get("bindOptions.billHalfCheckReceivedRowVisible") !== true) {
        return true;
      }
      if (productObservable.get("bindOptions.billHalfRowVisible") !== true) {
        return true;
      }
      var checkReceivedDate = productObservable.get("source.partiallyBilledDate");

      var now = new Date();
      now.setHours(0,0,0,0);

      if (checkReceivedDate != null) {
        checkReceivedDate.setHours(0,0,0,0);
      }

      if(checkReceivedDate != null && now.getTime() < checkReceivedDate.getTime()) {
        $(input).attr("data-crif-msg", "Cannot receive a check in the future.");
        return false;
      }

      return true;
    },
    bojip: function(input) {
      if (!$(input).is("[name='immediateBillDate']")) {
        return true;
      }
      if (productObservable.get("bindOptions.immediateBillRowVisible") !== true) {
        return true;
      }
      if (productObservable.get("bindOptions.billHalfRowVisible") !== true) {
        return true;
      }
      if (productObservable.get("bindOptions.workflowRowVisible") !== true) {
        return true;
      }
      var immediateBillDate = productObservable.get("source.partiallyBilledDate");

      <?php // First of the month ?>
      var now = new Date();
      now.setDate(1);
      now.setHours(0,0,0,0);

      if(immediateBillDate != null && now.getTime() >= immediateBillDate.getTime()) {
        $(input).attr("data-bojip-msg", "Cannot bill this month or before.");
        return false;
      }

      return true;
    }
  }});
}

<?php
/**
 * function SetupLineItemValidation(form, statusField)
 * Sets up the validation when adding/editing a line item.
 *
 * @param form -- String to be used in "formValidate."
 * @param statusField -- String to be used in "formStatusField."
 */
?>
function SetupLineItemValidation(form, statusField) {
  $.homecuValidator.setup({formValidate: form, formStatusField: statusField, homecuCustomRules: {
    bhip: function(input) {
      if (!$(input).is("[name='billHalfDate']")) {
        return true;
      }
      if (lineItemObservable.get("bindOptions.billHalfDateRowVisible") !== true) {
        return true;
      }
      var billHalfDate = lineItemObservable.get("source.partiallyBilledDate");

      <?php // First of the month ?>
      var now = new Date();
      now.setDate(1);
      now.setHours(0,0,0,0);

      if(billHalfDate != null && now.getTime() >= billHalfDate.getTime()) {
        $(input).attr("data-bhip-msg", "Cannot bill this month or before.");
        return false;
      }

      return true;
    },
    crif: function(input) {
      if (!$(input).is("[name='checkReceived']")) {
        return true;
      }
      if (lineItemObservable.get("bindOptions.billHalfCheckReceivedRowVisible") !== true) {
        return true;
      }
      var checkReceivedDate = lineItemObservable.get("source.partiallyBilledDate");

      var now = new Date();
      now.setHours(0,0,0,0);

      if (checkReceivedDate != null) {
        checkReceivedDate.setHours(0,0,0,0);
      }

      if(checkReceivedDate != null && now.getTime() < checkReceivedDate.getTime()) {
        $(input).attr("data-crif-msg", "Cannot receive a check in the future.");
        return false;
      }

      return true;
    },
    bojip: function(input) {
      if (!$(input).is("[name='immediateBillDate']")) {
        return true;
      }
      if (lineItemObservable.get("bindOptions.immediateBillRowVisible") !== true) {
        return true;
      }
      var immediateBillDate = lineItemObservable.get("source.partiallyBilledDate");

      <?php // First of the month ?>
      var now = new Date();
      now.setDate(1);
      now.setHours(0,0,0,0);

      if(immediateBillDate != null && now.getTime() >= immediateBillDate.getTime()) {
        $(input).attr("data-bojip-msg", "Cannot bill this month or before.");
        return false;
      }

      return true;
    },
    crreq: function(input) {
      if (!$(input).is("[name='checkReceivedAmount']")) {
        return true;
      }
      if (lineItemObservable.get("bindOptions.billHalfAmountRowVisible") !== true) {
        return true;
      }

      if ($(input).val().trim() == "") {
        $(input).attr("data-crreq-msg", "Check amount is required.");
        return false;
      }

      return true;
    },
    vres: function(input) {
      if (!$(input).is("[name='qty2Range']")) {
        return true;
      }

      var qty1 = lineItemObservable.get("source.qty1");
      var qty2 = lineItemObservable.get("source.qty2");

      <?php // qty2 is not required because nothing is -1. ?>
      if (qty1 != null && qty2 != null && qty2 < qty1) {
        $(input).attr("data-vres-msg", "Range is not valid.");
        return false;
      }

      return true;
    }
  }});
}

<?php // ===================
      // SETUP ACTIVE GRID DIALOGS
      // =================== ?>

<?php
/**
 * function SetupActiveGridDialogs()
 * Sets up all the dialogs on the active grid.
 */
?>
function SetupActiveGridDialogs() {
  <?php
  /**
   * @var deleteActiveDialog
   * The dialog to confirm deletion of a billing line item.
   */
  ?>
  $("#activeGrid").on("click", ".k-grid-customDelete", function() {
    var activeGrid = $("#activeGrid").data("kendoGrid");
    var activeTr = $(this).closest("tr");
    var activeDataItem = activeGrid.dataItem(activeTr);
    var bottomId = activeDataItem.featureDetailId;

    var deleteActiveDialog = $("#deleteActiveDialog").data("kendoDialog");
    if (deleteActiveDialog == null) {
      deleteActiveDialog = $("<div id='deleteActiveDialog'></div>").appendTo("body").kendoDialog({
        title: "Confirm Deletion",
        actions: [
          {text: "Cancel"},
          {text: "Delete", primary: true, action: function() {

            var bottomId = $("#deleteActiveDialog").data("bottomId");

            var parameters = {operation: "removeBillingFeature", featureDetailId: bottomId};

            activeGridHelperDs.read(parameters);
          }}
        ],
        visible: false,
        open: function() {
          if (window.activeWindows != null) {
              window.activeWindows.push(this);
          }
        },
        close: function() {
          if (window.activeWindows != null) {
              window.activeWindows.pop();
          }
        },
        modal: true,
        content: "Are you sure that you want to delete this line item?"
      }).data("kendoDialog");
    }

    $("#deleteActiveDialog").data({bottomId: bottomId});
    deleteActiveDialog.open().center();
  });

  $("#activeGrid").on("click", ".k-grid-advanceWorkflow", function() {
    var grid = $("#activeGrid").data("kendoGrid");
    var tr = $(this).closest("tr");
    var dataItem = grid.dataItem($(tr));
    ShowActiveEndMonthWindow(dataItem.completeButtonText, dataItem.featureDetailId, dataItem.endDate);
    return false;
  });

  $("#activeGrid").on("click", ".k-grid-changePrice", function() {
    var grid = $("#activeGrid").data("kendoGrid");
    var tr = $(this).closest("tr");
    var dataItem = grid.dataItem($(tr));
    var parameters = {operation: "readSalesOrderActiveLineItem", featureDetailId: dataItem.featureDetailId};

    activeGridHelperDs.read(parameters);
    return false;
  });

}

<?php
/**
 * function ShowActiveChangePriceWindow(lineItemData, configuration, bindOptions, ddls)
 * This displays the active change price window.
 *
 * @param lineItemData -- the full values of the line item from the line item read.
 * @param configuration -- the configuration (labels and which controls are shown.)
 * @param bindOptions -- the values of the dropdownlists and which controls are shown.
 * @param ddls -- the data for additional dropdownlists.
 */
?>
function ShowActiveChangePriceWindow(lineItemData, configuration, bindOptions, ddls) {
    var activeChangePriceWindow = $("#activeChangePriceWindow").data("kendoWindow");
    if (activeChangePriceWindow == null) {
      <?php
      /**
       * @var activeChangePriceWindow
       * The KendoWindow with the line item observable.
       * Since the line item is already active,
       *    workflow, bill half, and frequency options are not allowed.
       */
      ?>
      activeChangePriceWindow = $("<div id='activeChangePriceWindow'></div>").appendTo("body").kendoWindow({
        modal: true,
        title: "Change Price",
        visible: false,
        width: 400,
        close: function(e) {
          if (window.activeWindows != null) {
            window.activeWindows.pop();
          }

          SetupMainForm();
        },
        open: function() {
          if (window.activeWindows != null) {
            window.activeWindows.push(this);
          }

          SetupLineItemValidation("activeChangePriceForm", "formValidateChangePrice");
        }
      }).data("kendoWindow");
    } else {
      kendo.destroy($("#activeChangePriceWindow #activeChangePriceForm"));
    }

    lineItemObservable.setupValues(lineItemData, bindOptions);

    <?php // the configuration part will be used in a couple of windows.  Extending it this way. ?>
    var fullBindText = $("#activeChangePriceTemplate").html();

    var template = kendo.template($("#detailConfigTemplate").html());

    configuration.addOrUpdate = "update";
    fullBindText = fullBindText.replace("<!-- configDiv -->", template(configuration));

    activeChangePriceWindow.content(fullBindText);
    kendo.bind(activeChangePriceWindow.element, lineItemObservable);
    activeChangePriceWindow.open().center();

    <?php // This is here because the whole window is bound.  Therefore, the click events are removed. ?>
    $("#activeChangePriceWindow .continueBtn").on("click", function() {
      if ($.homecuValidator.validate()) {
        $("#activeChangePriceWindow").data("kendoWindow").close();

        var parameters = lineItemObservable.getSaveParameters();
        <?php // Won't do it if you don't give it the operation. ?>
        parameters.operation = "updateActiveBillingFeature";

        activeGridHelperDs.read(parameters);
      }

      return false;
    });

    $("#activeChangePriceWindow .cancelBtn").on("click", function() {
      $("#activeChangePriceWindow").data("kendoWindow").close();
      return false;
    });
}

<?php
/**
 * function ShowActiveEndMonthWindow(buttonText, featureId, endDate)
 * This displays the window to set the end month.
 *
 * @param buttonText -- This is the text of the button clicked.
 *    It will check to see if it is an "undo" and if so, then revert.
 * @param featureId -- the feature detail id of the line item.
 * @param endDate -- the end date of the line item.
 */
?>
function ShowActiveEndMonthWindow(buttonText, featureId, endDate) {
  var activeEndMonthWindow = $("#activeEndMonthWindow").data("kendoWindow");
  var activeEndMonthDDL = $("#activeEndMonthDDL").data("kendoDropDownList");

  if (activeEndMonthWindow == null) {

    <?php
    /**
     * @var activeEndMonthWindow
     * The KendoWindow with the endMonthDDL.
     */
    ?>
    activeEndMonthWindow = $("<div id='activeEndMonthWindow'></div>").appendTo("body").kendoWindow({
      modal: true,
      title: "Set End Month",
      content: {
        template: $("#changeEndMonthTemplate").html()
      },
      visible: false,
      width: 300,
      close: function(e) {
        if (window.activeWindows != null) {
          window.activeWindows.pop();
        }
      },
      open: function() {
        if (window.activeWindows != null) {
          window.activeWindows.push(this);
        }
      }
    }).data("kendoWindow");

    <?php
    /**
     * @var activeEndMonthDDL
     * The KendoDropDownList that contains a list of month dates.
     */
    ?>
    var activeEndMonthDDL = $("#activeEndMonthDDL").kendoDropDownList({
      dataSource: {
        data: lineItemObservable.get("ddls.startMonthOptions"),
        schema: {
          model: {
            id: "value",
            fields: {
              text: {type: "string"},
              value: {type: "string"}
            }
          }
        }
      },
      dataTextField: "text",
      dataValueField: "value"
    }).data("kendoDropDownList");

    $("#activeEndMonthWindow .continueBtn").click(function() {
      $("#activeEndMonthWindow").data("kendoWindow").close();

      var parameters = {};
      parameters.childType = $("#activeEndMonthWindow").data("childType");
      parameters.featureDetailId = $("#activeEndMonthWindow").data("featureDetailId");
      parameters.operation = "modifyStatus";
      parameters.endDate = $("#activeEndMonthDDL").data("kendoDropDownList").value();
      parameters.orderDetailId = $("#activeEndMonthWindow").data("orderDetailId");

      activeGridHelperDs.read(parameters);
    });

    $("#activeEndMonthWindow .cancelBtn").click(function() {
      $("#activeEndMonthWindow").data("kendoWindow").close();
    });
  }

  var openDialog = true;
  switch(buttonText) {
    case "Complete":
      $("#activeEndMonthWindow").data("childType", "completeActive");
      $("#activeEndMonthWindow").data("featureDetailId", featureId);

      if (endDate == null) {
        activeEndMonthDDL.select(0);
      } else {
        activeEndMonthDDL.value(endDate);
      }
      break;
    case "Undo":
      var parameters = {};
      parameters.childType = "undoActive";
      parameters.featureDetailId = featureId;
      parameters.operation = "modifyStatus";

      activeGridHelperDs.read(parameters);
      openDialog = false;
      break;
  }

  if (openDialog) {
    activeEndMonthWindow.open().center();
  }

}

<?php // ===================
      // SETUP COMPLETED GRID DIALOGS
      // =================== ?>

<?php
/**
 * function SetupCompletedGridDialogs()
 * Sets up all the dialogs for the completed grid.
 */
?>
function SetupCompletedGridDialogs() {
  $("#completedGrid").on("click", ".k-grid-advanceWorkflow", function() {
    var text = $(this).text().trim();
    var tr = $(this).closest("tr");
    var grid = $("#completedGrid").data("kendoGrid");
    var dataItem = grid.dataItem($(tr));
    var parameters = {};
    parameters.operation = "modifyStatus";
    parameters.featureDetailId = dataItem.featureDetailId;

    switch(text) {
      case "Reactivate":
        parameters.childType = "reactivateCompleted";
        break;
      case "Undo":
        parameters.childType = "undoCompleted";
        break;
    }

    completedGridHelperDs.read(parameters);
  });
}

<?php // ===================
      // SETUP PENDING GRID DIALOGS (TOP)
      // =================== ?>

<?php
/**
 * function SetupPendingTopGridDialogs()
 * Sets up all the dialogs for the top pending grid.
 */
?>
function SetupPendingTopGridDialogs() {
  <?php
  /**
   * @var deletePendingTopDialog
   * The dialog to confirm deletion of a billing product.
   */
  ?>
  $("#pendingGrid").on("click", ".k-master-row .k-grid-customDelete", function() {
    var topGrid = $("#pendingGrid").data("kendoGrid");
    var topTr = $(this).closest("tr");
    var topDataItem = topGrid.dataItem(topTr);
    var topId = topDataItem.orderDetailId;

    var deletePendingTopDialog = $("#deletePendingTopDialog").data("kendoDialog");
    if (deletePendingTopDialog == null) {

      <?php
      /**
       * @var deletePendingTopDialog
       * This is the window for confirming a delete at the top level.
       */
      ?>
      deletePendingTopDialog = $("<div id='deletePendingTopDialog'></div>").appendTo("body").kendoDialog({
        title: "Confirm Deletion",
        actions: [
          {text: "Cancel"},
          {text: "Delete", primary: true, action: function() {

            var topId = $("#deletePendingTopDialog").data("topId");

            var parameters = {operation: "removeSalesOrderDetail", orderDetailId: topId};

            pendingTopGridHelperDs.read(parameters);
          }}
        ],
        visible: false,
        open: function() {
          if (window.activeWindows != null) {
              window.activeWindows.push(this);
          }
        },
        close: function() {
          if (window.activeWindows != null) {
              window.activeWindows.pop();
          }
        },
        modal: true,
        content: "Are you sure that you want to delete this product?"
      }).data("kendoDialog");
    }

    $("#deletePendingTopDialog").data({topId: topId});
    deletePendingTopDialog.open().center();
  });

  $("#pendingGrid").on("click", ".k-grid-addSingle", function() {
    ShowProductAddWindow();
  });

  $("#pendingGrid").on("click", ".k-grid-createBulk", function() {
      OpenShuttleApplet();
  });
}

 <?php
 /**
  * function OpenShuttleApplet()
  * This opens the shuttle applet.
  * If the grids and buttons have not already been initialized, then they will be.
  */
 ?>
function OpenShuttleApplet() {
    var shuttleApplet = $("#shuttleApplet").data("kendoWindow");

    var productList = productObservable.get("ddls.productItems");

    // This means that we need to initialize everything.
    if (shuttleApplet == null) {

      <?php
      /**
       * @var shuttleApplet
       * This is the window for selecting multiple products.
       */
      ?>
      shuttleApplet = $("<div id='shuttleApplet'></div>").appendTo("body").kendoWindow({
        content: {
          template: $("#shuttleAppletTemplate").html()
        },
        modal: true,
        title: "Add Multiple Products",
        visible: false,
        width: 800,
        height: 300,
        autoFocus: false,
        close: function(e) {
          if (window.activeWindows != null) {
            window.activeWindows.pop();
          }
        },
        open: function() {
          if (window.activeWindows != null) {
            window.activeWindows.push(this);
          }
        }
      }).data("kendoWindow");

      <?php
      /**
       * @var gridDefinition
       * This is the grid definition for the shuttle grids.
       */
      ?>
      var gridDefinition = {
        dataSource: {
          data: [],
          schema: {
            model: {
              id: "value",
              fields: {
                value: {type: "string", editable: false},
                text: {type: "string", editable: false},
                hasSetup: {type: "boolean"},
                hasUnattachedJobs: {type: "boolean", editable: false},
                productExists: {type: "boolean", editable: false},
                selectedText: {type: "string"},
                productOption: {type: "string"},
                shownWorkflowDivValue: {type: "string"},
                shownWorkflowDivText: {type: "string"}
              }
            }
          }
        },
        columns: [
          {field: "text", title: "Product"},
          {field: "productOption", title: "Type", template: "# if (selectedText == '') { # (default) # } else { # #: selectedText # # } #",
            editor: function (container, options) {
              if (options.model.selectedText != "(default)") {
                var productConfigData = productObservable.get("ddls.productOptions");
                var productConfigData = $.grep(productConfigData, function(n,i) { return n.product == options.model.value; });
                var input = $("<input name='" + options.field + "'>").appendTo(container).kendoDropDownList({
                  dataSource: {
                    data: productConfigData
                  },
                  dataTextField: "text",
                  dataValueField: "value",
                  filter: "startswith",
                  change: function () {
                    options.model.selectedText = this.text();
                    options.model.productOption = this.value();
                    options.model.hasSetup = this.dataItem().hasSetup;
                  }
                }).data("kendoDropDownList");
              } else {
                $(container).text("(default)");
              }
            }
          },
          {field: "shownWorkflowDivValue", title: "Job",
          template: "# if (!hasSetup) { # (None) # } else { # #: shownWorkflowDivText # # } #",
            editor: function(container, options) {
              if (!options.model.hasSetup) {
                $(container).text("(None)");
              } else {
                var workflowData = productObservable.get("ddls.unattachedJobs");
                workflowData = $.grep(workflowData, function(n,i) { return n.product == options.model.value; });
                workflowData.unshift({text: "(New)", value: -1});
                workflowData.push({text: "(None)", value: -2});

                var input = $("<input name='" + options.field + "'>").appendTo(container).kendoDropDownList({
                  dataSource: {
                    data: workflowData
                  },
                  dataTextField: "text",
                  dataValueField: "value",
                  filter: "startswith",
                  change: function () {
                    options.model.shownWorkflowDivText = this.text();
                    options.model.shownWorkflowDivValue = this.value();
                  }
                }).data("kendoDropDownList");
              }
            }
          }
        ],
        editable: true,
        height: 200,
        dataBound: function () {
          this.tbody.find("tr").click(function () {
            if ($(this).hasClass("k-state-selected")) {
                $(this).removeClass("k-state-selected");
            } else {
                $(this).addClass("k-state-selected");
            }
          });
        }
      };

      var selectedGrid = $("#selectedGrid").kendoGrid(gridDefinition).data("kendoGrid");

      // Add the product filter for the available grid.
      gridDefinition.toolbar = [{template: "Product Filter: <input id='prodFilter' text='text' class='k-input k-textbox' maxlength='50' style='width: 100px;'>"}];
      var availableGrid = $("#availableGrid").kendoGrid(gridDefinition).data("kendoGrid");

      $("#prodFilter").keyup(function (e) {
          var text = $(this).val().trim();
          if (text == "") {
              availableGrid.dataSource.filter({});
          } else {
              availableGrid.dataSource.filter({ field: "text", operator: "contains", value: text});
          }
      });

      var okayBtn = $("#shuttleOkayBtn").kendoButton({
        click: function () {

          $("#shuttleApplet").data("kendoWindow").close();

          var rawProductData = $("#selectedGrid").data("kendoGrid").dataSource.data();
          var productData = [];
          for (var i = 0, length = rawProductData.length; i != length; i++) {
            var rawRecord = rawProductData[i];
            var record = {};
            record.productId = rawRecord.value;
            record.productOption = rawRecord.productOption;

            <?php // These values don't change for the multiple product option. ?>
            record.aDNID = "";
            record.partiallyBilledDate = null;

            if (rawRecord.hasSetup) {
              record.billHalfValue = "full";

              switch (rawRecord.shownWorkflowDivValue) {
                case -1: <?php // (New) ?>
                  record.workflowValue = "create";
                  record.unattachedJobValue = -1;
                  break;
                case -2: <?php // (None) ?>
                  record.workflowValue = "without";
                  record.unattachedJobValue = -1;
                  break;
                default:
                  record.workflowValue = "associate";
                  record.unattachedJobValue = rawRecord.shownWorkflowDivValue;
                  break;
              }
            } else {
              record.billHalfValue = "nosetup";
              record.workflowValue = "none";
              record.unattachedJobValue = -1;
            }

            productData.push(record);
          }

          var parameters = {salesOrderId: salesOrderId, operation: "createSalesOrderDetails", productsSelected: kendo.stringify(productData)};
          pendingTopGridHelperDs.read(parameters);

          return false;
        },
        enable: false
      }).data("kendoButton");

      var cancelBtn = $("#shuttleCancelBtn").kendoButton({
        click: function () {
          $("#shuttleApplet").data("kendoWindow").close();
          return false;
        }
      }).data("kendoButton");

      var moveToAvailableBtn = $("#shuttleMoveToAvailableBtn").kendoButton({
        click: function () {
          MoveData(availableGrid, selectedGrid, false);
          if (selectedGrid.dataSource.data().length > 0)
          {
            okayBtn.enable(true);
            moveToAvailableBtn.enable(true);
          } else {
            okayBtn.enable(false);
            moveToAvailableBtn.enable(false);
          }
          if (availableGrid.dataSource.data().length > 0) {
            moveToSelectedBtn.enable(true);
          } else {
            moveToSelectedBtn.enable(false);
          }
          return false;
        },
        enable: false
      }).data("kendoButton");

      var moveToSelectedBtn = $("#shuttleMoveToSelectedBtn").kendoButton({
        click: function () {
          MoveData(availableGrid, selectedGrid, true);
          if (selectedGrid.dataSource.data().length > 0)
          {
            okayBtn.enable(true);
            moveToAvailableBtn.enable(true);
          } else {
            okayBtn.enable(false);
            moveToAvailableBtn.enable(false);
          }
          if (availableGrid.dataSource.data().length > 0) {
            moveToSelectedBtn.enable(true);
          } else {
            moveToSelectedBtn.enable(false);
          }
          return false;
        }
      }).data("kendoButton");

    } // End initializing

    var fullProductConfigData = productObservable.get("ddls.productOptions");
    for (var i = 0; i != productList.length; i++) {
        var record = productList[i];
        if (!record.hasOptions) {
            productList[i].productOption = "";
            productList[i].selectedText = "(default)";
        } else {

            var productConfigData = $.grep(fullProductConfigData, function(n,i) { return n.product == record.value; });
            productList[i].productOption = productConfigData[0].value;
            productList[i].selectedText = productConfigData[0].text;
            productList[i].hasSetup = productConfigData[0].hasSetup;
        }

        if (record.hasSetup) {
          productList[i].shownWorkflowDivText = "(New)";
          productList[i].shownWorkflowDivValue = -1;
        } else {
          productList[i].shownWorkflowDivText = "(None)";
          productList[i].shownWorkflowDivValue = -2;
        }
    }

    $("#availableGrid").data("kendoGrid").dataSource.data(productList);
    $("#selectedGrid").data("kendoGrid").dataSource.data([]);
    // Clear out selected products so that products cannot be added twice if you open the applet twice.
    $("#shuttleOkayBtn").data("kendoButton").enable(false);
    $("#shuttleMoveToAvailableBtn").data("kendoButton").enable(false);
    $("#shuttleMoveToSelectedBtn").data("kendoButton").enable(true);

    // Finally open the applet
    shuttleApplet.open();
    shuttleApplet.center();

    // Clear what was previously filtered
    $("#prodFilter").val(null);
    $("#availableGrid").data("kendoGrid").dataSource.filter({});
    setTimeout(function() {$('#prodFilter').focus();}, 0);
}

<?php
/**
 * function MoveData(availableGrid, selectedGrid, toSelectedGrid)
 * This function moves data from the available grid to the selected grid (or vice versa.)
 *
 * @param availableGrid -- the kendoGrid object of the availableGrid.
 * @param selectedGrid -- the kendoGrid object of the selectedGrid.
 * @param toSelectedGrid -- Boolean to know which way data is going.
 */
?>
function MoveData(availableGrid, selectedGrid, toSelectedGrid) {
    var selectedData = selectedGrid.dataSource.data().slice(0);
    var availableData = availableGrid.dataSource.data().slice(0);

    var addedData = [];
    var preRemovedData = [];
    var removedData = [];
    var addedGrid;
    var removedGrid;

    if (toSelectedGrid) {
      addedData = selectedData;
      preRemovedData = availableData;
      addedGrid = selectedGrid;
      removedGrid = availableGrid;
    } else {
      addedData = availableData;
      preRemovedData = selectedData;
      addedGrid = availableGrid;
      removedGrid = selectedGrid;
    }

    var selectedRows = removedGrid.tbody.find("tr.k-state-selected");
    var uidsToRemove = {};

    for (var i = 0; i != selectedRows.length; i++) {
      var dataItem = removedGrid.dataItem($(selectedRows[i]));
      uidsToRemove[dataItem.value] = true;
      addedData.push(dataItem);

      if (dataItem.productExists) {
        if (!toSelectedGrid) {
          $("#formInfoShuttleDiv ." + dataItem.value).remove();
          if ($("#formInfoShuttleDiv li:visible").length == 0) {
            $("#formInfoShuttleDiv").hide();
          }
        } else {
          $("#formInfoShuttleDiv ul").append("<li class='" + dataItem.value + "'>" + dataItem.text + "</li>");
          $("#formInfoShuttleDiv").show();
        }
      }
    }
    for (var i = 0; i != preRemovedData.length; i++) {
      var dataItem = preRemovedData[i];
      if (typeof(uidsToRemove[dataItem.value]) == "undefined") {
        removedData.push(dataItem);
      }
    }
    addedGrid.dataSource.data(addedData);
    removedGrid.dataSource.data(removedData);
}

<?php
/**
 * function ShowProductAddWindow()
 * This shows the window for updating a line item after it became active.
 */
?>
function ShowProductAddWindow() {
    var productAddWindow = $("#productAddWindow").data("kendoWindow");
    if (productAddWindow == null) {

      <?php
      /**
       * @var productAddWindow
       * The KendoWindow that gets created for viewing line items.
       */
      ?>
      productAddWindow = $("<div id='productAddWindow'></div>").appendTo("body").kendoWindow({
        modal: true,
        title: "Add Product",
        visible: false,
        width: 400,
        close: function(e) {
          if (window.activeWindows != null) {
            window.activeWindows.pop();
          }

          SetupMainForm();
        },
        open: function() {
          if (window.activeWindows != null) {
            window.activeWindows.push(this);
          }

          SetupProductValidation("productEditForm", "formValidateAddProduct");
        }
      }).data("kendoWindow");

      <?php // the configuration part will be used in a couple of windows.  Extending it this way. ?>
      var fullBindText = $("#addProductWindowTemplate").html();

      var template = kendo.template($("#productConfigTemplate").html());
      var configuration = {};

      <?php // Each time that it is opened, do not destroy and rebuild.
            // Instead, set the defaultOptions once again. ?>
      var defaultOptions = productObservable.get("defaultProductOptions").toJSON();

      productObservable.set("bindOptions", defaultOptions.bindOptions);
      productObservable.set("source", defaultOptions.source);

      fullBindText = fullBindText.replace("<!-- configDiv -->", template(configuration));

      productAddWindow.content(fullBindText);
      kendo.bind(productAddWindow.element, productObservable);

      <?php // This is here because the whole window is bound.  Therefore, the click events are removed. ?>
      $("#productAddWindow .continueBtn").on("click", function() {
        if ($.homecuValidator.validate()) {
          $("#productAddWindow").data("kendoWindow").close();

          var productItem = productObservable.get("source").toJSON();
          productItem.billHalfValue = productObservable.get("bindOptions.billHalfValue");
          productItem.productId = productObservable.get("bindOptions.productId");
          productItem.productOption = productObservable.get("bindOptions.productOption");
          productItem.unattachedJobValue = productObservable.get("bindOptions.unattachedJobValue");
          productItem.workflowValue = productObservable.get("bindOptions.workflowValue");
          productItem.workflowValue = productItem.workflowValue == "" ? "none" : productItem.workflowValue;

          var parameters = {};
          parameters.productsSelected = kendo.stringify([productItem]);
          parameters.salesOrderId = salesOrderId;
          parameters.operation = "createSalesOrderDetails";

          pendingTopGridHelperDs.read(parameters);
        }

        return false;
      });

      $("#productAddWindow .cancelBtn").on("click", function() {
        $("#productAddWindow").data("kendoWindow").close();
        return false;
      });

    }

    <?php // Each time that it is opened, do not destroy and rebuild.
          // Instead, set the defaultOptions once again. ?>
    var defaultOptions = productObservable.get("defaultProductOptions").toJSON();

    productObservable.set("bindOptions", defaultOptions.bindOptions);
    productObservable.set("source", defaultOptions.source);

    productAddWindow.open().center();
}

<?php // ===================
      // SETUP DETAIL GRID DIALOGS
      // =================== ?>

<?php
/**
 * function SetupPendingBottomGridDialogs()
 * Sets up all the dialogs for the pending bottom grid.
 */
?>
function SetupPendingBottomGridDialogs() {
  <?php
  /**
   * @var deletePendingBottomDialog
   * The dialog to confirm deletion of a billing line item.
   */
  ?>
  $("#pendingGrid").on("click", ".pendingBottomGrid .k-grid-customDelete", function() {
    var topGrid = $("#pendingGrid").data("kendoGrid");
    var bottomTr = $(this).closest("tr");
    var topTr = $(bottomTr).closest(".k-detail-row").prev();
    var bottomGrid = $(bottomTr).closest(".pendingBottomGrid").data("kendoGrid");

    var bottomDataItem = bottomGrid.dataItem(bottomTr);
    var topDataItem = topGrid.dataItem(topTr);

    var topId = topDataItem.orderDetailId;
    var feature = topDataItem.feature;
    var detailDescription = topDataItem.detailDescription;
    var bottomId = bottomDataItem.featureDetailId;

    var deletePendingBottomDialog = $("#deletePendingBottomDialog").data("kendoDialog");
    if (deletePendingBottomDialog == null) {
      deletePendingBottomDialog = $("<div id='deletePendingBottomDialog'></div>").appendTo("body").kendoDialog({
        title: "Confirm Deletion",
        actions: [
          {text: "Cancel"},
          {text: "Delete", primary: true, action: function() {

            var bottomId = $("#deletePendingBottomDialog").data("bottomId");

            var parameters = {operation: "removeBillingFeature", featureDetailId: bottomId};

            pendingBottomGridHelperDs.read(parameters);

          }}
        ],
        visible: false,
        open: function() {
          if (window.activeWindows != null) {
              window.activeWindows.push(this);
          }
        },
        close: function() {
          if (window.activeWindows != null) {
              window.activeWindows.pop();
          }
        },
        modal: true,
        content: "Are you sure that you want to delete this line item?"
      }).data("kendoDialog");
    }

    $("#deletePendingBottomDialog").data({topId: topId, bottomId: bottomId, bottomGrid: bottomGrid, feature: feature, detailDescription: detailDescription});
    deletePendingBottomDialog.open().center();
  });

  $("#pendingGrid").on("click", ".pendingBottomGrid .k-grid-edit", function() {
    var tr = $(this).closest("tr");
    var grid = $(tr).closest(".pendingBottomGrid").data("kendoGrid");
    var dataItem = grid.dataItem(tr);
    var parameters = {operation: "readSalesOrderDetailLineItem", featureDetailId: dataItem.featureDetailId};

    pendingBottomGridHelperDs.read(parameters);
    return false;
  });

  $("#pendingGrid").on("click", ".pendingBottomGrid .k-grid-add", function() {
    var productId = $(this).closest(".pendingBottomGrid").attr("data-productId");
    var orderDetailId = $(this).closest(".pendingBottomGrid").attr("data-orderDetailId");
    ShowDetailAddWindow(productId, orderDetailId);
    return false;
  });

  $("#pendingGrid").on("click", ".pendingBottomGrid .k-grid-advanceWorkflow", function() {
    var tr = $(this).closest("tr");
    var grid = $(tr).closest(".pendingBottomGrid").data("kendoGrid");
    var dataItem = grid.dataItem(tr);
    ShowPendingStartMonthWindow(dataItem.advanceWorkflowText, dataItem.featureDetailId, dataItem.startDate);
    return false;
  });

  $("#pendingGrid").on("click", ".pendingBottomGrid .k-grid-startMonthlies", function() {
    var orderDetailId = $(this).closest(".pendingBottomGrid").attr("data-orderDetailId");
    ShowPendingStartMonthWindow($(this).text().trim(), null, null, orderDetailId);
    return false;
  });
}

<?php
/**
 * function ShowPendingStartMonthWindow(buttonText, featureId, startDate, orderDetailId)
 * This shows the start month on the pending grid.
 * This updates the status to active (2) and sets the start date on "Okay."
 *
 * @param buttonText -- the text of the button.
 *    This sees if the button is an undo or if it comes from the "Start Recurring" button.
 * @param featureId -- the line item id to update.
 * @param startDate -- the start date to start.
 * @param orderDetailId -- the order detail id.
 */
?>
function ShowPendingStartMonthWindow(buttonText, featureId, startDate, orderDetailId) {
  var pendingStartMonthWindow = $("#pendingStartMonthWindow").data("kendoWindow");
  var pendingStartMonthDDL = $("#pendingStartMonthDDL").data("kendoDropDownList");

  if (pendingStartMonthWindow == null) {

    <?php
    /**
     * @var pendingStartMonthWindow
     * The KendoWindow of the window to start month.
     */
    ?>
    pendingStartMonthWindow = $("<div id='pendingStartMonthWindow'></div>").appendTo("body").kendoWindow({
      modal: true,
      title: "Set Start Month",
      content: {
        template: $("#changeStartMonthTemplate").html()
      },
      visible: false,
      width: 300,
      close: function(e) {
        if (window.activeWindows != null) {
          window.activeWindows.pop();
        }
      },
      open: function() {
        if (window.activeWindows != null) {
          window.activeWindows.push(this);
        }
      }
    }).data("kendoWindow");

    <?php
    /**
     * @var pendingStartMonthDDL
     * The KendoDropDownList that stores the month selection.
     */
    ?>
    var pendingStartMonthDDL = $("#pendingStartMonthDDL").kendoDropDownList({
      dataSource: {
        data: lineItemObservable.get("ddls.startMonthOptions"),
        schema: {
          model: {
            id: "value",
            fields: {
              text: {type: "string"},
              value: {type: "string"}
            }
          }
        }
      },
      dataTextField: "text",
      dataValueField: "value"
    }).data("kendoDropDownList");

    $("#pendingStartMonthWindow .continueBtn").click(function() {
      $("#pendingStartMonthWindow").data("kendoWindow").close();

      var parameters = {};
      parameters.childType = $("#pendingStartMonthWindow").data("childType");
      parameters.featureDetailId = $("#pendingStartMonthWindow").data("featureDetailId");
      parameters.operation = "modifyStatus";
      parameters.startDate = $("#pendingStartMonthDDL").data("kendoDropDownList").value();
      parameters.orderDetailId = $("#pendingStartMonthWindow").data("orderDetailId");

      pendingBottomGridHelperDs.read(parameters);
    });

    $("#pendingStartMonthWindow .cancelBtn").click(function() {
      $("#pendingStartMonthWindow").data("kendoWindow").close();
    });
  }

  var openDialog = true;
  switch(buttonText) {
    case "Start":
    case "Trigger":
      $("#pendingStartMonthWindow").data("childType", "startPending");
      $("#pendingStartMonthWindow").data("featureDetailId", featureId);

      if (startDate == null) {
        pendingStartMonthDDL.select(0);
      } else {
        pendingStartMonthDDL.value(startDate);
      }
      break;
    case "Undo":
    case "Undo Trigger":
      var parameters = {};
      parameters.childType = "undoPending";
      parameters.featureDetailId = featureId;
      parameters.operation = "modifyStatus";

      pendingBottomGridHelperDs.read(parameters);
      openDialog = false;
      break;
    case "Start Recurring":
      $("#pendingStartMonthWindow").data("childType", "startRecurring");
      $("#pendingStartMonthWindow").data("orderDetailId", orderDetailId);
      pendingStartMonthDDL.select(0);
      break;
    case "Undo Recurring":
      var parameters = {};
      parameters.childType = "undoRecurring";

      <?php // Need to specify here or this might move some already active items to pending.
            // This should only affect the line items that were in the pending grid at the beginning of the session. ?>
      parameters.includeIds = kendo.stringify(includeExcludeMap["detail#" + orderDetailId].include);
      parameters.orderDetailId = orderDetailId;
      parameters.operation = "modifyStatus";

      pendingBottomGridHelperDs.read(parameters);
      openDialog = false;
      break;
    case "Change Start":
      $("#pendingStartMonthWindow").data("childType", "changeStart");
      $("#pendingStartMonthWindow").data("featureDetailId", featureId);

      if (startDate == null) {
        pendingStartMonthDDL.select(0);
      } else {
        pendingStartMonthDDL.value(startDate);
      }
      break;
  }

  if (openDialog) {
    pendingStartMonthWindow.open().center();
  }

}

<?php
/**
 * function ShowDetailAddWindow(productId, orderDetailId)
 * Shows the add window for the line item (Bottom level of pending grid.)
 *
 * @param productId -- the product key of the order detail. e.g. ESP.
 * @param orderDetailId -- the sales order detail id of the order detail.
 * Both are needed because dropdownlist data is compiled before so orderDetailId is not known.
 * Order detail id is needed to save the new line item.
 */
?>
function ShowDetailAddWindow(productId, orderDetailId) {
  var detailAddWindow = $("#detailAddWindow").data("kendoWindow");
  var featureDetailDDL = $("#featureDetailDDL").data("kendoDropDownList");
  if (detailAddWindow == null) {

      <?php
      /**
       * @var detailAddWindow
       * The KendoWindow showing a product ddl + all the data to configure each.
       */
      ?>
      detailAddWindow = $("<div id='detailAddWindow'></div>").appendTo("body").kendoWindow({
        modal: true,
        content: {
          template: $("#detailAddWindowTemplate").html()
        },
        title: "Add Product Feature",
        visible: false,
        width: 400,
        close: function(e) {
          if (window.activeWindows != null) {
            window.activeWindows.pop();
          }

          SetupMainForm();
        },
        open: function() {
          if (window.activeWindows != null) {
            window.activeWindows.push(this);
          }
        }
      }).data("kendoWindow");

      <?php
      /**
       * @var featureDetailDDL
       * This is a dropdownlist with logic for configuring that line item.
       * Each time that a value is selected, the rest is destroy and config according to logic.
       */
      ?>
      featureDetailDDL = $("#featureDetailDDL").kendoDropDownList({
        dataSource: {
          data: [],
          schema: {
            model: {
              id: "salesItemValue",
              fields: {
                salesItemText: {type: "string"},
                salesItemValue: {type: "number"},
                configuration: {type: "odata"},
                lineItemData: {type: "odata"},
                bindOptions: {type: "odata"},
                ddls: {type: "odata"},
                orderDetailId: {type: "number"},
              }
            }
          }
        },
        dataTextField: "salesItemText",
        dataValueField: "salesItemValue",
        change: function(e) {
          var fullLineItemContent = this.dataItem();
          fullLineItemContent.configuration.addOrUpdate = "add";

          lineItemObservable.set("source", fullLineItemContent.lineItemData);
          lineItemObservable.set("bindOptions", fullLineItemContent.bindOptions);
          lineItemObservable.set("ddls.workflowDDL", fullLineItemContent.ddls.workflows);
          lineItemObservable.set("ddls.unattachedJobDDL", fullLineItemContent.ddls.workflowUnattachedJobs);

          var bindDiv = $("#detailAddWindow .configDiv");
          kendo.destroy($(bindDiv));
          $(bindDiv).empty();

          var template = kendo.template($("#detailConfigTemplate").html());
          $(bindDiv).html(template(fullLineItemContent.configuration));
          kendo.bind($(bindDiv), lineItemObservable);
          SetupLineItemValidation("detailAddForm", "formValidateAddDetail");
        }
      }).data("kendoDropDownList");

      $("#detailAddWindow").on("click", ".continueBtn", function() {
        if ($.homecuValidator.validate()) {
          $("#detailAddWindow").data("kendoWindow").close();

          var parameters = lineItemObservable.getSaveParameters();
          <?php // Won't do it if you don't give it the operation. ?>
          parameters.operation = "createBillingFeature";

          <?php // Now need additional parameters to create the record. ?>
          var dataItem = $("#featureDetailDDL").data("kendoDropDownList").dataItem();

          <?php // These has to be done using this method because a brand new product could be created. ?>
          parameters.orderDetailId = $("#detailAddWindow").data("orderDetailId");
          parameters.salesItemId = dataItem.salesItemValue;

          pendingBottomGridHelperDs.read(parameters);
        }

        return false;
      });

      $("#detailAddWindow").on("click", ".cancelBtn", function() {
        $("#detailAddWindow").data("kendoWindow").close();
        return false;
      });
  }

  var fullLineItems = lineItemObservable.get("ddls.billingTemplateItems");
  var lineItems = $.grep(fullLineItems, function(n,i) { return n.productId == productId });

  featureDetailDDL.dataSource.data(lineItems);
  featureDetailDDL.select(0);

  var fullLineItemContent = featureDetailDDL.dataItem();
  fullLineItemContent.configuration.addOrUpdate = "add";

  lineItemObservable.setupValues(fullLineItemContent.lineItemData, fullLineItemContent.bindOptions);

  lineItemObservable.set("ddls.workflowDDL", fullLineItemContent.ddls.workflows);
  lineItemObservable.set("ddls.unattachedJobDDL", fullLineItemContent.ddls.workflowUnattachedJobs);

  var bindDiv = $("#detailAddWindow .configDiv");
  kendo.destroy($(bindDiv));
  $(bindDiv).empty();

  var template = kendo.template($("#detailConfigTemplate").html());
  $(bindDiv).html(template(fullLineItemContent.configuration));
  kendo.bind($(bindDiv), lineItemObservable);

  detailAddWindow.open().center();
  SetupLineItemValidation("detailAddForm", "formValidateAddDetail");

  $("#detailAddWindow").data("orderDetailId", orderDetailId);
}

<?php
/**
 * function ShowDetailEditWindow(lineItemData, configuration, bindOptions, ddls)
 * This shows the edit window for changing a line item.
 *
 * @param lineItemData -- the data from the database for the line item.
 * @param configuration -- determines which DIVs are removed and which remain.
 * @param bindOptions -- determines which ddl values are shown and which DIVs are shown.
 * @param ddls -- additional dropdownlist data for the line item.
 */
?>
function ShowDetailEditWindow(lineItemData, configuration, bindOptions, ddls) {
    var detailEditWindow = $("#detailEditWindow").data("kendoWindow");
    if (detailEditWindow == null) {

      <?php
      /**
       * @var detailEditWindow
       * The KendoWindow to display for editing a line item.
       */
      ?>
      detailEditWindow = $("<div id='detailEditWindow'></div>").appendTo("body").kendoWindow({
        modal: true,
        title: "Edit Product Feature",
        visible: false,
        width: 400,
        close: function(e) {
          if (window.activeWindows != null) {
            window.activeWindows.pop();
          }

          SetupMainForm();
        },
        open: function() {
          if (window.activeWindows != null) {
            window.activeWindows.push(this);
          }

          SetupLineItemValidation("detailEditForm", "formValidateEditDetail");
        }
      }).data("kendoWindow");
    } else {
      kendo.destroy($("#detailEditWindow #detailEditForm"));
    }

    lineItemObservable.setupValues(lineItemData, bindOptions);

    lineItemObservable.set("ddls.workflowDDL", ddls.workflows);
    lineItemObservable.set("ddls.unattachedJobDDL", ddls.workflowUnattachedJobs);

    <?php // the configuration part will be used in a couple of windows.  Extending it this way. ?>
    var fullBindText = $("#detailEditWindowTemplate").html();

    var template = kendo.template($("#detailConfigTemplate").html());

    configuration.addOrUpdate = "update";
    fullBindText = fullBindText.replace("<!-- configDiv -->", template(configuration));

    detailEditWindow.content(fullBindText);
    kendo.bind(detailEditWindow.element, lineItemObservable);
    detailEditWindow.open().center();

    <?php // This is here because the whole window is bound.  Therefore, the click events are removed. ?>
    $("#detailEditWindow .continueBtn").on("click", function() {
      if ($.homecuValidator.validate()) {
        $("#detailEditWindow").data("kendoWindow").close();

        var parameters = lineItemObservable.getSaveParameters();
        <?php // Won't do it if you don't give it the operation. ?>
        parameters.operation = "updatePendingBillingFeature";

        pendingBottomGridHelperDs.read(parameters);
      }

      return false;
    });

    $("#detailEditWindow .cancelBtn").on("click", function() {
      $("#detailEditWindow").data("kendoWindow").close();
      return false;
    });
}

<?php
/**
 * function ShowWorkflowStatusWindow(workflowStatuses)
 * This shows when workflows should have been created.
 * Each one shows as "successful" or not so successful.
 *
 * @param workflowStatuses -- a list of product names and if a workflow was created.
 */
?>
function ShowWorkflowStatusWindow(workflowStatuses) {
  if (workflowStatuses.length > 0) {
    var template = "<ul>";
    for (var i = 0; i != workflowStatuses.length; i++) {
      var item = workflowStatuses[i];
      if (item.created) {
        template += "<li class='k-success-colored'>Workflow created for " + item.text + "</li>";
      }
      else {
        template += "<li class='k-error-colored'>No workflow created for " + item.text + "</li>";
      }
    }
    template += "</ul>";
    var workflowCreatedNotification = $("#workflowCreatedNotification").data("kendoWindow");
    if (workflowCreatedNotification == null) {

      <?php
      /**
       * @var workflowCreatedNotification
       * The KendoWindow that shows a list of workflows and if they were successful or not.
       */
      ?>
      workflowCreatedNotification = $("<div id='workflowCreatedNotification'></div>").appendTo("body").kendoWindow({
          title: false,
          modal: true,
          visible: false,
          close: function(e) {
            if (window.activeWindows != null) {
              window.activeWindows.pop();
            }
          },
          open: function() {
            if (window.activeWindows != null) {
              window.activeWindows.push(this);
            }
          }
        }).data("kendoWindow");

        $("#workflowCreatedNotification").closest(".k-window").click(function() {
          workflowCreatedNotification.close();
        });
    }

    workflowCreatedNotification.content(template).open().center();
  }
}

<?php // ===================
      // SETUP GRIDS
      // =================== ?>

<?php
/**
 * @var includeExcludeMap
 * Stores the featureDetailIds that are temporarily in the wrong grid.
 * Before, there was logic to update the button only to "undo."
 * Now, since all operations refresh the corresponding grid(s), pass the ids down.
 */
?>
var includeExcludeMap = {
  active: {
    include: [],
    exclude: []
  },
  completed: {
    include: [],
    exclude: []
  }
};

<?php
/**
 * function SetupGrids()
 * Sets up all the grids with datasources.
 * There are no click events or dialogs created here.
 */
?>
function SetupGrids() {

  <?php
  /**
   * @var activeGrid
   * This is the initialization of the activeGrid.
   * RowTemplate and title are defined here.
   * No click events or dialogs are defined here.
   */
  ?>
  var activeGrid = $("#activeGrid").kendoGrid({
    dataSource: {
      transport: {
        read: {
          url: "index.prg",
          dataType: "json",
          type: "POST",
          data: {
            operation: "readActiveDetails",
            salesOrderId: salesOrderId
          }
        },
        parameterMap: function (data, type) {

          data.includeIds = kendo.stringify(includeExcludeMap.active.include);
          data.excludeIds = kendo.stringify(includeExcludeMap.active.exclude);
          return data;
        }
      },
      schema: {
        model: {
          id: "featureDetailId",
          fields: {
            featureDetailId: {type: "number"},
            productName: {type: "string"},
            featureName: {type: "string"},
            featureDescription: {type: "string"},
            partialBillingStatus: {type: "string"},
            frequencyDescr: {type: "string"},
            showCompleteButton: {type: "boolean"},
            completeButtonText: {type: "string"},
            endDate: {type: "string"}
          }
        },
        parse: function (data) {
          if (data.status !== "000") {
             $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
          }

          var indexOf = toHideWindow.indexOf("active");
          if (indexOf != -1) {
            toHideWindow.splice(indexOf, 1);
            if (toHideWindow.length == 0) {
              hideWaitWindow();
            }
          }

          return data.record;
        }
      }
    },
    columns: [
      <?php if ($isInEditList) { ?>
        {width: 220},
      <?php } ?>
      {title: "Product", width: "15%"},
      {title: "Feature", width: "15%"},
      {title: "Bill Half Date", width: "15%"},
      {title: "Status", width: "15%"},
      {title: "Description"},
      {title: "Frequency"}
    ],
    toolbar: "Active:",
    rowTemplate: $("#activeRowTemplate").html()
  }).data("kendoGrid");

  <?php
  /**
   * @var pendingGrid
   * This is the initialization of the pendingGrid.
   * RowTemplate and title are defined here.
   * No click events or dialogs are defined here.
   */
  ?>
  var pendingGrid = $("#pendingGrid").kendoGrid({
    dataSource: {
      transport: {
        read: {
          url: "index.prg",
          dataType: "json",
          type: "POST",
          data: {
            operation: "readPendingDetailsTop",
            salesOrderId: salesOrderId
          }
        },
        parameterMap: function (data, type) {
          return data;
        }
      },
      schema: {
        model: {
          id: "orderDetailId",
          fields: {
            orderDetailId: {type: "number"},
            lastModifiedBy: {type: "string"},
            lastModifiedDate: {type: "date"},
            numDetails: {type: "number"},
            opened: {type: "boolean"}
          }
        },
        parse: function (data) {
           if (data.status !== "000") {
             $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
           }

          var indexOf = toHideWindow.indexOf("pending");
          if (indexOf != -1) {
            toHideWindow.splice(indexOf, 1);
            if (toHideWindow.length == 0) {
              hideWaitWindow();
            }
          }

           return data.record;
        }
      }
    },
    columns: [
      <?php if ($isInEditList) { ?> {width: "5%"}, <?php } ?>
      {title: "Feature"},
      {title: "Last Modified"},
      {title: "Last Modified By"}
    ],
    <?php if ($isInEditList) { ?>
    toolbar: $("#pendingToolbarTemplate").html(),
    <?php } ?>
    detailTemplate: $("#detailTemplate").html(),
    detailInit: SetupDetailGrid,
    detailExpand: function(e) {
      e.detailRow.find(".pendingBottomGrid").data("kendoGrid").dataSource.read();
    },
    rowTemplate: $("#topRowTemplate").html(),
    dataBound: function(e) {
      $("#pendingGrid .k-master-row.opened").each(function() {
        $("#pendingGrid").data("kendoGrid").expandRow($(this));
      })
    }
  }).data("kendoGrid");

  <?php
  /**
   * @var completedGrid
   * This is the initialization of the completedGrid.
   * RowTemplate and title are defined here.
   * No click events or dialogs are defined here.
   */
  ?>
  var completedGrid = $("#completedGrid").kendoGrid({
    dataSource: {
      transport: {
        read: {
          url: "index.prg",
          dataType: "json",
          type: "POST",
          data: {
            operation: "readCompletedDetails",
            salesOrderId: salesOrderId
          }
        },
        parameterMap: function (data, type) {

          data.includeIds = kendo.stringify(includeExcludeMap.completed.include);
          data.excludeIds = kendo.stringify(includeExcludeMap.completed.exclude);
          return data;
        }
      },
      schema: {
        model: {
          id: "featureDetailId",
          fields: {
            featureDetailId: {type: "number"},
            productName: {type: "string"},
            featureName: {type: "string"},
            featureDescription: {type: "string"},
            partialBillingStatus: {type: "string"},
            frequencyDescr: {type: "string"},
            showAdvanceWorkflow: {type: "boolean"},
            advanceWorkflowText: {type: "string"}
          }
        },
        parse: function (data) {
          if (data.status !== "000") {
             $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
          }

          var indexOf = toHideWindow.indexOf("completed");
          if (indexOf != -1) {
            toHideWindow.splice(indexOf, 1);
            if (toHideWindow.length == 0) {
              hideWaitWindow();
            }
          }

          return data.record;
        }
      }
    },
    columns: [
      <?php if ($isInEditList) { ?>
        {width: 100},
      <?php } ?>
      {title: "Product", width: "15%"},
      {title: "Feature", width: "15%"},
      {title: "Bill Half Date", width: "15%"},
      {title: "Status", width: "15%"},
      {title: "Description"},
      {title: "Frequency"}
    ],
    toolbar: "Completed:",
    rowTemplate: $("#completedRowTemplate").html()
  }).data("kendoGrid");
}

<?php
/**
 * function SetupDetailGrid(e)
 * This is a helper function to setup the detail grid.
 *
 * @param e -- this is a parameter setup by kendo.
 * @see kendo grid api > detailInit.
 */
?>
function SetupDetailGrid(e) {

  var key = "detail#" + e.data.orderDetailId;
  includeExcludeMap[key] = {};
  includeExcludeMap[key].include = [];
  includeExcludeMap[key].exclude = [];

  <?php
  /**
   * @var detailGrid
   * This is the initialization of the detailGrid (bottom level of pending products).
   * RowTemplate and title are defined here.
   * No click events or dialogs are defined here.
   */
  ?>
  var detailGrid = e.detailRow.find(".pendingBottomGrid").kendoGrid({
    dataSource: {
      transport: {
        read: {
          url: "index.prg",
          dataType: "json",
          type: "POST",
          data: {
            operation: "readPendingDetailsBottom",
            orderDetailId: e.data.orderDetailId
          }
        },
        parameterMap: function(data, type) {

          data.includeIds = kendo.stringify(includeExcludeMap[key].include);
          data.excludeIds = kendo.stringify(includeExcludeMap[key].exclude);
          return data;
        }
      },
      schema: {
        model: {
          id: "featureDetailId",
          fields: {
              featureDetailId: {type: "number"},
              actualDescription: {type: "string"},
              textDescription: {type: "string"},
              billingStatusLabel: {type: "string"},
              partialBillingStatus: {type: "string"},
              frequencyDescr: {type: "string"},
              deletable: {type: "boolean"},
              showAdvanceWorkflow: {type: "boolean"},
              advanceWorkflowText: {type: "string"},
              startDate: {type: "string"}
          }
        },
        parse: function (data) {
          if (data.status !== "000") {
            $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
          }

          var indexOf = toHideWindow.indexOf(key);
          if (indexOf != -1) {
            toHideWindow.splice(indexOf, 1);
            if (toHideWindow.length == 0) {
              hideWaitWindow();
            }
          }

          return data.record;
        }
      }
    },
    autoBind: false,
    columns: [
      <?php if ($isInEditList) { ?>
      {width: "10%"},
      {width: "15%"},
      <?php } ?>
      {title: "Bill Half Date", width: "15%"},
      {title: "Status", width: "15%"},
      {title: "Title", width: "20%"},
      {title: "Description"},
      {title: "Frequency"}
    ],
    <?php if ($isInEditList) { ?>
    toolbar: $("#detailToolbarTemplate").html(),
    <?php } ?>
    rowTemplate: $("#detailRowTemplate").html()
  }).data("kendoGrid");
}

<?php // ===================
      // SETUP DATASOURCES
      // =================== ?>

var activeGridHelperDs = null;
var completedGridHelperDs = null;
var pendingTopGridHelperDs = null;
var pendingBottomGridHelperDs = null;
var warningDs = null;

<?php
/**
 * function SetupDataSources()
 * This sets up all the helper dataSource.
 * The purpose of these is to delete, add, or another action.
 * Then the helper dataSource calls the read on the corresponding grid(s).
 */
?>
function SetupDataSources() {
  <?php
  /**
   * @var setupDs
   * This is a datasource that only exists to populate information used for dropdownlists and the top text on the page.
   */
  ?>
  var setupDs = new kendo.data.DataSource({
      transport: {
        read: {
          url: "index.prg",
          dataType: "json",
          type: "POST",
          data: {
            operation: "readSalesOrderDetailInit",
            salesOrderId: salesOrderId
          }
        },
        parameterMap: function (data, type) {
          return data;
        }
      },
      schema: {
        parse: function (data) {
          if (data.status !== "000") {
            $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
          }

          var indexOf = toHideWindow.indexOf("setup");
          if (indexOf != -1) {
            toHideWindow.splice(indexOf, 1);
            if (toHideWindow.length == 0) {
              hideWaitWindow();
            }
          }

          $("#cuLabel").text(data.cuName + " (" + data.cu + ")");
          $("#cu").text(data.cu);
          $("#cuName").text(data.cuName);

          var pendingBottomDDLData = {};
          pendingBottomDDLData.setupBillingDDL = $.grep(data.ddls.setupBillingOptions, function (n,i) { return n.value != "nosetup"; });
          pendingBottomDDLData.monthDDL = data.ddls.monthDDL;
          pendingBottomDDLData.frequencyDDL = data.ddls.frequencyDDL;
          pendingBottomDDLData.billingTemplateItems = data.ddls.billingTemplateItems;
          pendingBottomDDLData.startMonthOptions = data.ddls.startMonthOptions;

          lineItemObservable.set("ddls", pendingBottomDDLData);

          <?php // This has two parts for ddls: these are the static ones.
                // When opened and when the product changes, same of the other ddls will change. ?>
          var pendingTopDDLData = {};
          pendingTopDDLData.setupBillingDDL = data.ddls.setupBillingOptions;
          pendingTopDDLData.productItems = data.ddls.productItems;
          pendingTopDDLData.productWorkflowOptions = data.ddls.productWorkflowOptions;
          pendingTopDDLData.unattachedJobs = data.ddls.unattachedJobs;
          pendingTopDDLData.productOptions = data.ddls.productOptions;

          productObservable.set("ddls", pendingTopDDLData);
          productObservable.set("defaultProductOptions", data.defaultProductOptions);

          return []; <?php // No data is returned to the dataSource. ?>
        }
      }
  });

  setupDs.read();

  <?php
  /**
   * @var warningDs
   * This is a dataSource for calling the warnings.
   * No warnings are created on frontend side (old style.)
   */
  ?>
  warningDs = new kendo.data.DataSource({
    transport: {
      read: {
        url: "index.prg",
        dataType: "json",
        type: "POST",
        data: {
          operation: "readSalesOrderDetailWarnings",
          salesOrderId: salesOrderId
        }
      },
      parameterMap: function (data, type) {
        return data;
      }
    },
    schema: {
      parse: function (data) {
        if (data.status !== "000") {
          $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
          hideWaitWindow();
        } else {
          var indexOf = toHideWindow.indexOf("warnings");
          if (indexOf != -1) {
            toHideWindow.splice(indexOf, 1);
            if (toHideWindow.length == 0) {
              hideWaitWindow();
            }
          }

          if (data.warnings.length > 0) {
            $("#warningDiv").show();
            $("#warningDiv").html(data.warnings.join("<br>") + "</div>");
          } else {
            $("#warningDiv").hide();
          }
        }

        return []; <?php // No data is returned to the dataSource. ?>
      }
    }
  });

  warningDs.read();

  <?php
  /**
   * @var activeGridHelperDs
   * This is a helper dataSource to run add/modify/delete operations on the active grid.
   */
  ?>
  activeGridHelperDs = new kendo.data.DataSource({
    transport: {
      read: {
        url: "index.prg",
        dataType: "json",
        type: "POST",
        data: {
          operation: "none"
        }
      },
      parameterMap: function (data, type) {
        showWaitWindow();
        return data;
      }
    },
    schema: {
      parse: function (data) {
          if (data.status !== "000") {
            hideWaitWindow();
            $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
          } else {
            switch(data.type) {
              case "delete":
                toHideWindow = ["active", "warnings"];
                $("#activeGrid").data("kendoGrid").dataSource.read();
                warningDs.read();
                break;
              case "advanceStatus":
                toHideWindow = ["active"];

                includeExcludeMap.active.include = includeExcludeMap.active.include.concat(data.ids);
                includeExcludeMap.completed.exclude = includeExcludeMap.completed.exclude.concat(data.ids);
                $("#activeGrid").data("kendoGrid").dataSource.read();
                break;
              case "revertStatus":
                toHideWindow = ["active"];

                var activeInclude = $.grep(includeExcludeMap.active.include, function(n,i) { return data.ids.indexOf(n) === -1; });
                var completedExclude = $.grep(includeExcludeMap.completed.exclude, function(n,i) { return data.ids.indexOf(n) === -1; });

                includeExcludeMap.active.include = activeInclude;
                includeExcludeMap.completed.exclude = completedExclude;
                $("#activeGrid").data("kendoGrid").dataSource.read();
                break;
              <?php // Also need to read configuration and values for line item.
                    // This is pulled off of the previous read function that got everything for the page.
                    // Now, each grid only has the data needed to display the grid. ?>
              case "read":
                hideWaitWindow();
                ShowActiveChangePriceWindow(data.lineItemData, data.configuration, data.bindOptions, data.ddls);
                break;

              case "modify":
                toHideWindow = ["active", "warnings"];
                $("#activeGrid").data("kendoGrid").dataSource.read();
                warningDs.read();
                break;
            }
          }

          return []; <?php // No data is returned to the dataSource. ?>
      }
    }
  });

  <?php
  /**
   * @var pendingBottomGridHelperDs
   * This is a helper dataSource to run add/modify/delete operations on the bottom level of the pending grid.
   */
  ?>
  pendingBottomGridHelperDs = new kendo.data.DataSource({
    transport: {
      read: {
        url: "index.prg",
        dataType: "json",
        type: "POST",
        data: {
          operation: "none"
        }
      },
      parameterMap: function (data, type) {
        showWaitWindow();
        return data;
      }
    },
    schema: {
      parse: function (data) {

          if (data.status !== "000") {
            hideWaitWindow();
            $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
          } else {

            var key = "detail#" + data.orderDetailId;
            switch(data.type) {
              case "delete":
                <?php // The whole product is removed so refresh the whole pending grid. ?>
                if (data.removeContractDetail) {
                  toHideWindow = ["pending"];
                  $("#pendingGrid").data("kendoGrid").dataSource.read();
                } else {
                  toHideWindow = [key];
                  $("#pendingGrid .pendingBottomGrid[data-orderDetailId='" + data.orderDetailId + "']:visible").data("kendoGrid").dataSource.read();
                }
                break;

              <?php // Also need to read configuration and values for line item.
                    // This is pulled off of the previous read function that got everything for the page.
                    // Now, each grid only has the data needed to display the grid. ?>
              case "read":
                hideWaitWindow();
                ShowDetailEditWindow(data.lineItemData, data.configuration, data.bindOptions, data.ddls);
                break;

              case "modify":
                toHideWindow = [key, "warnings"];
                $("#pendingGrid .pendingBottomGrid[data-orderDetailId='" + data.orderDetailId + "']:visible").data("kendoGrid").dataSource.read();
                warningDs.read();

                <?php // Update last modified by, last modified.  It is silly to refresh the grid for this. ?>
                var masterRow = $("#pendingGrid .k-master-row[data-orderDetailId='" + data.orderDetailId + "']:visible");
                $(masterRow).find("td:eq(3)").text(kendo.toString(new Date(), "d"));
                $(masterRow).find("td:eq(4)").text("<?php echo $Hu; ?>");

                ShowWorkflowStatusWindow(data.workflowStatuses);
                break;
              case "advanceStatus":
                toHideWindow = [key];

                includeExcludeMap[key].include = includeExcludeMap[key].include.concat(data.ids);
                includeExcludeMap.active.exclude = includeExcludeMap.active.exclude.concat(data.ids);
                $("#pendingGrid .pendingBottomGrid[data-orderDetailId='" + data.orderDetailId + "']:visible").data("kendoGrid").dataSource.read();

                if (data.isRecurringBtn) {
                  $("#pendingGrid .pendingBottomGrid[data-orderDetailId='" + data.orderDetailId + "']:visible .k-grid-startMonthlies").text("Undo Recurring");
                }
                break;
              case "revertStatus":
                toHideWindow = [key];

                var keyInclude = $.grep(includeExcludeMap[key].include, function(n,i) { return data.ids.indexOf(n) === -1; });
                var activeExclude = $.grep(includeExcludeMap.active.exclude, function(n,i) { return data.ids.indexOf(n) === -1; });

                includeExcludeMap[key].include = keyInclude;
                includeExcludeMap.active.exclude = activeExclude;
                $("#pendingGrid .pendingBottomGrid[data-orderDetailId='" + data.orderDetailId + "']:visible").data("kendoGrid").dataSource.read();

                if (data.isRecurringBtn) {
                  $("#pendingGrid .pendingBottomGrid[data-orderDetailId='" + data.orderDetailId + "']:visible .k-grid-startMonthlies").text("Start Recurring");
                }
                break;
              case "changeStart":
                toHideWindow = [key];

                includeExcludeMap[key].include = includeExcludeMap[key].include.concat(data.ids);
                includeExcludeMap.active.exclude = includeExcludeMap.active.exclude.concat(data.ids);
                $("#pendingGrid .pendingBottomGrid[data-orderDetailId='" + data.orderDetailId + "']:visible").data("kendoGrid").dataSource.read();
                break;
            }
          }

          return []; <?php // No data is returned to the dataSource. ?>
      }
    }
  });

  <?php
  /**
   * @var pendingTopGridHelperDs
   * This is a helper dataSource to run add/modify/delete operations on the top level of the pending grid.
   */
  ?>
  pendingTopGridHelperDs = new kendo.data.DataSource({
    transport: {
      read: {
        url: "index.prg",
        dataType: "json",
        type: "POST",
        data: {
          operation: "none"
        }
      },
      parameterMap: function (data, type) {
        showWaitWindow();
        return data;
      }
    },
    schema: {
      parse: function (data) {
          if (data.status !== "000") {
            hideWaitWindow();
            $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
          } else {
            switch(data.type) {
              case "delete":
                toHideWindow = ["pending", "warnings"];
                $("#pendingGrid").data("kendoGrid").dataSource.read();
                warningDs.read();
                break;
              case "modify":
                toHideWindow = ["pending", "warnings"];
                $("#pendingGrid").data("kendoGrid").dataSource.read({orderDetailIds: kendo.stringify(data.orderDetailIds)});
                warningDs.read();
                ShowWorkflowStatusWindow(data.workflowStatuses);

                break;

            }
          }

          return []; <?php // No data is returned to the dataSource. ?>
      }
    }
  });

  <?php
  /**
   * @var completedGridHelperDs
   * This is a helper dataSource to run add/modify/delete operations on the completed grid.
   */
  ?>
  completedGridHelperDs = new kendo.data.DataSource({
    transport: {
      read: {
        url: "index.prg",
        dataType: "json",
        type: "POST",
        data: {
          operation: "none"
        }
      },
      parameterMap: function (data, type) {
        showWaitWindow();
        return data;
      }
    },
    schema: {
      parse: function (data) {
          if (data.status !== "000") {
            hideWaitWindow();
            $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
          } else {
            switch(data.type) {
              case "advanceStatus":
                toHideWindow = ["completed"];

                includeExcludeMap.completed.include = includeExcludeMap.completed.include.concat(data.ids);
                includeExcludeMap.active.exclude = includeExcludeMap.active.exclude.concat(data.ids);
                $("#completedGrid").data("kendoGrid").dataSource.read();
                break;
              case "revertStatus":
                toHideWindow = ["completed"];

                var completedInclude = $.grep(includeExcludeMap.completed.include, function(n,i) { return data.ids.indexOf(n) === -1; });
                var activeExclude = $.grep(includeExcludeMap.active.exclude, function(n,i) { return data.ids.indexOf(n) === -1; });

                includeExcludeMap.completed.include = completedInclude;
                includeExcludeMap.active.exclude = activeExclude;
                $("#completedGrid").data("kendoGrid").dataSource.read();
                break;
            }

          }

          return []; <?php // No data is returned to the dataSource. ?>
      }
    }
  });
}

<?php // ===================
      // SETUP OBSERVABLES
      // =================== ?>

var toHideWindow = ["setup", "completed", "active", "pending", "warnings"];
var lineItemObservable = null;
var productObservable = null;

<?php
/**
 * function SetupObservables()
 * This sets up all the observables.
 */
?>
function SetupObservables() {

  <?php
  /**
   * @var lineItemObservable
   * This is the observable for line items.
   * The values are broken up into "source", "ddls", and "bindOptions."
   * "source" -- the actual values of the line item. e.g. fixed and variable.
   * "ddls" -- the dropdownlist data needed for the observable.
   * "bindOptions" -- the values of the selected ddls
   *      and visibility of DIVs that are visible depending on ddl setting.
   * Values from "configuration" ARE NOT in the observable.  Those DIVs are removed.
   */
  ?>
  lineItemObservable = new kendo.observable({
    dirty: false,
    source: null,
    ddls: null,
    bindOptions: null,
    setupValues: function(lineItemData, bindOptions) {

      <?php // Set dates to date objects. ?>
      lineItemData.partiallyBilledDate = kendo.parseDate(lineItemData.partiallyBilledDate);

      <?php // -1 is used to indicate infinity. ?>
      lineItemData.qty2 = lineItemData.qty2 == -1 ? null : lineItemData.qty2;

      this.set("source", lineItemData);
      this.set("bindOptions", bindOptions);
    },
    getSaveParameters: function() {
        var json = lineItemObservable.toJSON();
        var parameters = {};
        for (var key in json.source) {
          parameters[key] = json.source[key];
        }
        <?php // Add other parameters from bindOptions. ?>

        var showWorkflowDiv = $("#detailAddWindow .workflowDiv").length > 0;
        parameters.workflowValue  = !showWorkflowDiv ? "none" : json.bindOptions.workflowValue;
        parameters.frequencyValue = json.bindOptions.frequencyValue;
        parameters.billsOn1Value  = json.bindOptions.billsOn1Value;
        parameters.billsOn2Value  = json.bindOptions.billsOn2Value;
        parameters.billHalfValue  = json.bindOptions.billHalfValue;

        <?php // Format dates in acceptable format. ?>
        parameters.partiallyBilledDate = kendo.toString(parameters.partiallyBilledDate, "yyyy-MM-dd");

        <?php // Set infinity from null in the observable to "-1" in the database. ?>
        parameters.qty2 = json.bindOptions.qtyRangeVisible && json.source.qty2 == null ? -1 : json.source.qty2;

        return parameters;
    },
    showOverride: function(e) {
      this.set("bindOptions.isOverrideCheckboxShown", false);
      this.set("bindOptions.isOverrideDescrShown", true);
    },
    billHalfChange: function(e) {
      switch(this.bindOptions.billHalfValue) {
        case "partial":
          this.set("bindOptions.billHalfCheckReceivedRowVisible", true);
          this.set("bindOptions.billHalfDateRowVisible", false);
          this.set("bindOptions.billHalfAmountRowVisible", true);
          this.set("bindOptions.billHalfDateLabel", "Check Received:");
          this.set("source.partiallyBilledDate", new Date());
          this.set("source.partiallyBilledAmount", this.source.fixed / 2.0);
          break;
        case "future":
          this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
          this.set("bindOptions.billHalfDateRowVisible", true);
          this.set("bindOptions.billHalfAmountRowVisible", false);
          this.set("bindOptions.billHalfDateLabel", "Date to Bill Half:");

          <?php // Default boolean to true, billed date to next month. ?>
          var nextMonth = new Date();
          nextMonth.setDate(1);
          nextMonth.setMonth(nextMonth.getMonth() + 1);

          this.set("source.partiallyBilledDate", nextMonth);

          break;
        case "upfront":
          this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
          this.set("bindOptions.billHalfDateRowVisible", true);
          this.set("bindOptions.billHalfAmountRowVisible", false);
          this.set("bindOptions.billHalfDateLabel", "Date to Bill:");

          <?php // Default boolean to true, billed date to next month. ?>
          var nextMonth = new Date();
          nextMonth.setDate(1);
          nextMonth.setMonth(nextMonth.getMonth() + 1);

          this.set("source.partiallyBilledDate", nextMonth);
          break;
        case "full":
        default:
          this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
          this.set("bindOptions.billHalfDateRowVisible", false);
          this.set("bindOptions.billHalfAmountRowVisible", false);
          break;
      }
    },
    workflowChange: function(e) {
      switch(this.bindOptions.workflowValue) {
        case "associate":
          this.set("bindOptions.associateToJobRowVisible", true);
          this.set("bindOptions.immediateBillRowVisible", false);
          this.set("bindOptions.billHalfDDLEnabled", true);
          break;
        case "without":
          this.set("bindOptions.associateToJobRowVisible", false);
          this.set("bindOptions.immediateBillRowVisible", true);

          <?php // Set value to next month. ?>
          var date = new Date();
          date.setMonth(date.getMonth() + 1);
          date.setDate(1);

          this.set("source.partiallyBilledDate", date);

          this.set("bindOptions.billHalfDDLEnabled", false);
          this.set("bindOptions.billHalfValue", "full");
          this.set("bindOptions.billHalfDateRowVisible", false);
          this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
          this.set("bindOptions.billHalfAmountRowVisible", false);
          break;
        case "create":
        default:
          this.set("bindOptions.associateToJobRowVisible", false);
          this.set("bindOptions.immediateBillRowVisible", false);
          this.set("bindOptions.billHalfDDLEnabled", true);
          break;
      }
    },
    frequencyChange: function(e) {
      var id = $(e.sender.element).attr("id").trim();
      id = id.split("_")[0];

      switch(id) {
        case "frequencies":
          switch(this.bindOptions.frequencyValue) {
            case 2:
              this.set("bindOptions.billsOn1Value", 0);
              this.set("bindOptions.billsOn1RowVisible", true);
              this.set("bindOptions.billsOn2RowVisible", false);
              break;
            case 1:
              this.set("bindOptions.billsOn1Value", 0);
              this.set("bindOptions.billsOn2Value", 6);
              this.set("bindOptions.billsOn1RowVisible", true);
              this.set("bindOptions.billsOn2RowVisible", true);
              break;
            case 0:
            default:
              this.set("bindOptions.billsOn1RowVisible", false);
              this.set("bindOptions.billsOn2RowVisible", false);
              break;
          }
          break;
        case "billsOn1s":
          var val1 = e.sender.value();
          var val2 = (val1 + 6) % 12;
          this.set("bindOptions.billsOn2Value", val2);
          break;
        case "billsOn2s":
          var val2 = e.sender.value();
          var val1 = (24 + val2 - 6) % 12;
          this.set("bindOptions.billsOn1Value", val1);
          break;
      }

    }
  });

  <?php
  /**
   * @var productObservable
   * This is the observable for adding a single product.
   * Adding multiple products is largely unchanged from before.
   * The values are broken up into "source", "ddls", and "bindOptions."
   * "source" -- the actual values of the line item. e.g. fixed and variable.
   * "ddls" -- the dropdownlist data needed for the observable.
   * "bindOptions" -- the values of the selected ddls
   *      and visibility of DIVs that are visible depending on ddl setting.
   */
  ?>
  productObservable = new kendo.observable({
    dirty: false,
    source: null,
    ddls: null,
    bindOptions: null,
    billHalfChange: function(e) {
      switch(this.bindOptions.billHalfValue) {
        case "partial":
          this.set("bindOptions.billHalfCheckReceivedRowVisible", true);
          this.set("bindOptions.billHalfDateRowVisible", false);
          this.set("bindOptions.billHalfDateLabel", "Check Received:");
          this.set("source.partiallyBilledDate", new Date());
          this.toggleWorkflowDivs(true, false);
          break;
        case "future":
          this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
          this.set("bindOptions.billHalfDateRowVisible", true);
          this.set("bindOptions.billHalfDateLabel", "Date to Bill Half:");

          <?php // Default boolean to true, billed date to next month. ?>
          var nextMonth = new Date();
          nextMonth.setDate(1);
          nextMonth.setMonth(nextMonth.getMonth() + 1);

          this.set("source.partiallyBilledDate", nextMonth);
          this.toggleWorkflowDivs(true, false);
          break;
        case "upfront":
          this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
          this.set("bindOptions.billHalfDateRowVisible", true);
          this.set("bindOptions.billHalfDateLabel", "Date to Bill:");

          <?php // Default boolean to true, billed date to next month. ?>
          var nextMonth = new Date();
          nextMonth.setDate(1);
          nextMonth.setMonth(nextMonth.getMonth() + 1);

          this.set("source.partiallyBilledDate", nextMonth);
          this.toggleWorkflowDivs(true, false);
          break;
        case "nosetup":
          this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
          this.set("bindOptions.billHalfDateRowVisible", false);
          this.toggleWorkflowDivs(false, false);
          break;
        case "full":
        default:
          this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
          this.set("bindOptions.billHalfDateRowVisible", false);
          this.toggleWorkflowDivs(true, false);
          break;
      }
    },
    toggleWorkflowDivs(showThem, init) {
      var toggle = null;

      if (init) {
        toggle = showThem;
      } else {
        if (this.get("bindOptions.hasSetup") !== true) {
          toggle = null;
        } else if (showThem && this.get("bindOptions.workflowRowVisible") !== true) {
          toggle = true;
        } else if (!showThem && this.get("bindOptions.workflowRowVisible") === true) {
          toggle = false;
        }
      }

      if (toggle === true) {
        this.set("bindOptions.workflowValue", "create");
        this.set("bindOptions.workflowRowVisible", true);
        this.set("bindOptions.associateToJobRowVisible", false);
        this.set("bindOptions.immediateBillRowVisible", false);
      } else if (toggle === false) {
        this.set("bindOptions.workflowValue", "none");
        this.set("bindOptions.workflowRowVisible", false);
        this.set("bindOptions.associateToJobRowVisible", false);
        this.set("bindOptions.immediateBillRowVisible", false);
      }
    },
    toggleBillHalfDivs(showThem, init) {
      var toggle = null;

      if (init) {
        toggle = showThem;
      } else {
        if (this.get("bindOptions.hasSetup") !== true) {
          toggle = null;
        } else if (showThem && this.get("bindOptions.billHalfRowVisible") !== true) {
          toggle = true;
        } else if (!showThem && this.get("bindOptions.billHalfRowVisible") === true) {
          toggle = false;
        }
      }

      if (toggle === true) {
        this.set("bindOptions.billHalfRowVisible", true);
        this.set("bindOptions.billHalfValue", "full");
        this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
        this.set("bindOptions.billHalfDateRowVisible", false);
        this.set("bindOptions.billHalfDDLEnabled", true);
      } else if (toggle === false) {
        this.set("bindOptions.billHalfRowVisible", false);
        this.set("bindOptions.billHalfValue", "full");
        this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
        this.set("bindOptions.billHalfDateRowVisible", false);
      }
    },
    toggleProductExistsDiv(showIt) {
      if (showIt) {
        if (this.get("bindOptions.productWarningVisible") !== true) {
          this.set("bindOptions.productWarningVisible", true);
          this.toggleWorkflowDivs(false, true);

          if (this.get("bindOptions.billHalfRowVisible") === true) {
            this.set("bindOptions.billHalfValue", "nosetup");
            this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
            this.set("bindOptions.billHalfDateRowVisible", false);
            this.set("bindOptions.billHalfDDLEnabled", true);
          }

        }
      } else {
        if (this.get("bindOptions.productWarningVisible") === true) {
          this.set("bindOptions.productWarningVisible", false);

          this.toggleWorkflowDivs(true, true);
          this.toggleBillHalfDivs(true, true);
          this.set("bindOptions.billHalfValue", "full");
          this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
          this.set("bindOptions.billHalfDateRowVisible", false);
        }
      }
    },
    workflowChange: function(e) {
      switch(this.bindOptions.workflowValue) {
        case "associate":
          this.set("bindOptions.associateToJobRowVisible", true);
          this.set("bindOptions.immediateBillRowVisible", false);
          this.set("bindOptions.billHalfDDLEnabled", true);
          break;
        case "without":
          this.set("bindOptions.associateToJobRowVisible", false);
          this.set("bindOptions.immediateBillRowVisible", true);

          <?php // Set value to next month. ?>
          var date = new Date();
          date.setMonth(date.getMonth() + 1);
          date.setDate(1);

          this.set("source.partiallyBilledDate", date);

          this.set("bindOptions.billHalfDDLEnabled", false);
          this.set("bindOptions.billHalfValue", "full");
          this.set("bindOptions.billHalfDateRowVisible", false);
          this.set("bindOptions.billHalfCheckReceivedRowVisible", false);
          this.set("bindOptions.billHalfAmountRowVisible", false);
          break;
        case "create":
        default:
          this.set("bindOptions.associateToJobRowVisible", false);
          this.set("bindOptions.immediateBillRowVisible", false);
          this.set("bindOptions.billHalfDDLEnabled", true);
          break;
      }
    },
    productChange: function(e) {
      var dataItem = e.sender.dataItem();

      if (dataItem.hasOptions !== true) {
        if (dataItem.hasSetup === true) {
          this.set("bindOptions.hasSetup", true);
          this.toggleBillHalfDivs(true, true);
          this.toggleWorkflowDivs(true, true);
        } else {
          this.set("bindOptions.hasSetup", false);
          this.toggleBillHalfDivs(false, true);
          this.toggleWorkflowDivs(false, true);
        }
      }

      if (dataItem.useDNID === true) {
        this.set("bindOptions.dnidRowVisible", true);
      } else {
        this.set("bindOptions.dnidRowVisible", false);
      }

      if (dataItem.hasOptions === true) {
        this.set("bindOptions.configRowVisible", true);
      } else {
        this.set("bindOptions.configRowVisible", false);
      }

      this.toggleProductExistsDiv(dataItem.productExists);
    },
    configChange: function(e) {
      var dataItem = e.sender.dataItem();
      if (dataItem != null) {
        if (dataItem.hasSetup === true) {
          this.set("bindOptions.hasSetup", true);
          this.toggleBillHalfDivs(true);
          this.toggleWorkflowDivs(true);
        } else {
          this.set("bindOptions.hasSetup", false);
          this.toggleBillHalfDivs(false);
          this.toggleWorkflowDivs(false);
        }
      }
    }
  });
}

<?php // ===================
      // DOCUMENT READY
      // =================== ?>

var activeWindows = [];
$(document).ready(function () {

  <?php // Needed from https://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/cascading ?>
  kendo.data.binders.widget.cascade = kendo.data.Binder.extend({
    init: function (widget, bindings, options) {
        kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);

        this.widget = widget;

        this._cascade = $.proxy(this.cascade, this);
        this.widget.bind("cascade", this._cascade);
    },
    cascade: function () {
        if (this.widget.options.cascadeFrom) {
            this.widget.trigger("change");
        }
    },
    refresh: function () { },
    destroy: function () {
        this.widget.unbind("cascade", this._cascade);
    }
  });

  SetupMainForm();
  showWaitWindow();
  SetupObservables();
  SetupGrids();
  SetupDataSources();
  SetupActiveGridDialogs();
  SetupCompletedGridDialogs();
  SetupPendingTopGridDialogs();
  SetupPendingBottomGridDialogs();

  $("body").on("click", ".k-overlay", function() { if (activeWindows.length > 0) activeWindows[activeWindows.length - 1].close(); return false; });

});
</script>

<?php // ======================================
      // PENDING TOP GRID TEMPLATES
      // ====================================== ?>

<?php
/**
 * @var topRowTemplate
 * This is the row template for the top level of the pending grid.
 */
?>
<script type="k-kendo-template" id="topRowTemplate">
  <tr class="k-master-row # if (opened) { # opened # } #" data-uid="#= uid #" data-orderDetailId="#: orderDetailId #">
    <td class="k-hierarchy-cell" aria-expanded="false">
      # if (numDetails > 0) { #
      <a class="k-icon k-i-expand" href="\\#" aria-label="Expand"></a>
      # } #
    </td>
    <?php if ($isInEditList) { ?>
    <td>
      # if (numDetails == 0) { #
      <a class="k-button k-grid-customDelete" href="\\#">
        <span class="fa fa-2x fa-trash"></span>
      </a>
      # } #
    </td>
  <?php } ?>
    <td>#: detailDescription #</td>
    <td># if (lastModifiedDate == null) { # &nbsp; # } else { # #: kendo.toString(lastModifiedDate, 'd') # # } #</td>
    <td>#: lastModifiedBy #</td>
  </tr>
</script>

<?php
/**
 * @var detailTemplate
 * This is the template of the row for the detail grid.
 */
?>
<script type="k-kendo-template" id="detailTemplate">
  <div class="detailGrid pendingBottomGrid" data-orderDetailId="#: orderDetailId #" data-productId="#: productId #"></div>
</script>

<?php
/**
 * @var addProductWindowTemplate
 * This is the template for the add product window.
 */
?>
<script type="k-kendo-template" id="addProductWindowTemplate">
  <div class="k-edit-form-container">
    <div id="formValidateAddProduct"></div>
    <form id="productEditForm">
      <div class="container_12">

        <!-- configDiv -->
      </div>
    </form>
    <div class="k-edit-buttons k-state-default">
      <a class="k-button k-button-icontext k-primary continueBtn" href="#">
        <span class="k-icon k-update"></span>Okay
      </a>
      <a class="k-button k-button-icontext cancelBtn" href="#">
        <span class="k-icon k-cancel"></span>Cancel
      </a>
    </div>
  </div>
</script>

<?php
/**
 * @var productConfigTemplate
 * This is the template for the config of the product.
 * This is bound to the productObservable.
 */
?>
<script type="k-kendo-template" id="productConfigTemplate">
  <div class="grid_12" data-bind="visible: bindOptions.productWarningVisible">
    <div id="formInfoPopupDiv" class="homecu-formStatus k-block k-info-colored">
      <b>Product already exists.</b>
      <br> A save here will append configured line items to the current product.
    </div>
  </div>

  <div class="grid_12">
    <div class="grid_4 alpha">
        <label>New Item:</label>
    </div>
    <div class="grid_7">
        <div id="products_top" data-role="dropdownlist" data-text-field="text" data-value-field="value"
          data-bind="source: ddls.productItems, value: bindOptions.productId, events: { change: productChange }"></div>
    </div>
    <div class="grid_1 omega">
        <span class='k-invalid-msg'></span>
    </div>
  </div>
  <div class="grid_12" data-bind="visible: bindOptions.configRowVisible">
    <div class="grid_4 alpha">
      <label>Configuration:</label>
    </div>
    <div class="grid_7">
      <div id="productOptions_top" data-role="dropdownlist" data-text-field="text" data-value-field="value"
        data-cascade-from="products_top" data-cascade-from-field="product"
        data-bind="source: ddls.productOptions, value: bindOptions.productOption, cascade: bindOptions.productOption,
          events: { change: configChange }"></div>
    </div>
  </div>
  <div class="grid_12" data-bind="visible: bindOptions.billHalfRowVisible">
    <div class="grid_4 alpha">Setup Options:</div>
    <div class="grid_7">
      <div id="billHalfs_top" data-role="dropdownlist" data-text-field="text" data-value-field="value"
        data-bind="source: ddls.setupBillingDDL, value: bindOptions.billHalfValue,
                   events: { change: billHalfChange },
                   enabled: bindOptions.billHalfDDLEnabled"></div>
    </div>
    <div class="grid_1 omega">
      &nbsp;
    </div>
  </div>
  <div class="grid_12" data-bind="visible: bindOptions.billHalfCheckReceivedRowVisible">
    <div class="grid_4 alpha">
      <span data-bind="text: bindOptions.billHalfDateLabel"></span>
    </div>
    <div class="grid_7">
      <input type="text" name="checkReceived" style="width: 100%"
        data-role="datepicker" data-bind="value: source.partiallyBilledDate">
    </div>
    <div class="grid_1 omega">
      <span data-for='checkReceived' class='k-invalid-msg'></span>
    </div>
  </div>
  <div class="grid_12" data-bind="visible: bindOptions.billHalfDateRowVisible">
    <div class="grid_4 alpha">
      <span data-bind="text: bindOptions.billHalfDateLabel"></span>
    </div>
    <div class="grid_7">
      <input type="text" name="halfBillDate" style="width: 100%"
        data-role="datepicker" data-bind="value: source.partiallyBilledDate" data-depth="year" data-start="year" data-format="MMM yyyy">
    </div>
    <div class="grid_1 omega">
      <span data-for='halfBillDate' class='k-invalid-msg'></span>
    </div>
  </div>
  <div class="grid_12" data-bind="visible: bindOptions.workflowRowVisible">
    <div class="grid_4 alpha">
      <label>Workflow:</label>
    </div>
    <div class="grid_7">
      <select id="workflows_top" data-role="dropdownlist" data-text-field="text" data-value-field="value"
        data-cascade-from="products_top" data-cascade-from-field="product"
        data-bind="source: ddls.productWorkflowOptions,
        value: bindOptions.workflowValue, events: { change: workflowChange }, cascade: bindOptions.workflowValue"></select>
    </div>
    <div class="grid_1 omega">
      &nbsp;
    </div>
  </div>
  <div class="grid_12" data-bind="visible: bindOptions.associateToJobRowVisible">
    <div class="grid_4 alpha">
      <label>Associate to Job:</label>
    </div>
    <div class="grid_7">
      <div id="unattacheds_top" data-role="dropdownlist" data-text-field="text" data-value-field="value"
        data-cascade-from="products_top" data-cascade-from-field="product"
        data-bind="source: ddls.unattachedJobs, value: bindOptions.unattachedJobValue", cascade: bindOptions.unattachedJobValue"></div>
    </div>
    <div class="grid_1 omega">
      &nbsp;
    </div>
  </div>
  <div class="grid_12" data-bind="visible: bindOptions.immediateBillRowVisible">
    <div class="grid_4 alpha">
      <label>Starts:</label>
    </div>
    <div class="grid_7">
      <input type="text" name="immediateBillDate" style="width: 100%"
        data-role="datepicker" data-bind="value: source.partiallyBilledDate" data-depth="year" data-start="year" data-format="MMM yyyy">
    </div>
    <div class="grid_1 omega">
      <span data-for='immediateBillDate' class='k-invalid-msg'></span>
    </div>
  </div>
  <div class="grid_12" data-bind="visible: bindOptions.dnidRowVisible">
    <div class="grid_4 alpha">
      <label class="custLabel">Long Code:</label>
    </div>
    <div class="grid_4">
      <input name="aDNID" style="width: 100%"
        data-role="maskedtextbox" data-mask="<?php echo str_repeat('0', 15); ?>" data-bind="value: source.aDNID" data-prompt-char=" ">
    </div>
    <div class="grid_1 omega">
      <span data-for='aDNID' class='k-invalid-msg'></span>
    </div>
  </div>
</script>

<?php
/**
 * @var shuttleAppletTemplate
 * This is the template for the shuttleApplet/window.
 */
?>
<script id="shuttleAppletTemplate" type="k-kendo-template">
    <div class="k-edit-form-container">
            <div class="container_12">
            <div classs="grid_12">
              <div id="formInfoShuttleDiv" class="homecu-formStatus k-block k-info-colored" style="display:none;">
                <b>These Products already exist: </b>
                <ul></ul>
              </div>
            </div>
                <div class="grid_12">
                  <div class="grid_5">Available</div>
                  <div class="grid_2">&nbsp;</div>
                  <div class="grid_5">Selected</div>
                </div>
                <div class="grid_12">
                  <div class="grid_5">
                    <div id="availableGrid" style="width:100%"></div>
                  </div>
                  <div class="grid_2">
                    <a class="k-button k-button-icontext" id="shuttleMoveToSelectedBtn" href="\\#" style="width:60%">--&raquo;</a>
                    <a class="k-button k-button-icontext" id="shuttleMoveToAvailableBtn" href="\\#" style="width:60%">&laquo;--</a>
                  </div>
                  <div class="grid_5" style="min-height:100px">
                    <div id="selectedGrid" style="width:100%"></div>
                  </div>
                </div>
            </div>
        <div class="k-edit-buttons k-state-default">
            <a class="k-button k-button-icontext k-primary" id="shuttleOkayBtn" href="\\#">
                <span class="k-icon k-update"></span>Okay
            </a>
            <a class="k-button k-button-icontext" id="shuttleCancelBtn" href="\\#">
                <span class="k-icon k-cancel"></span>Cancel
            </a>
        </div>
    </div>
</script>

<?php
/**
 * @var pendingToolbarTemplate
 * This is the template for the toolbar on the pending grid (top level.)
 */
?>
<script id="pendingToolbarTemplate" type="k-kendo-template">
  <a class="k-button k-grid-addSingle" href="\\#">
    <span class="fa fa-2x fa-plus"></span>
  </a>
  <a class="k-button k-grid-createBulk" href="\\#">
    <span class="fa fa-2x fa-clipboard"></span>
  </a>
</script>

<?php // ======================================
      // PENDING BOTTOM GRID TEMPLATES
      // ====================================== ?>

<?php
/**
 * @var detailRowTemplate
 * This is the row template for the bottom level of the pending grid.
 */
?>
<script type="k-kendo-template" id="detailRowTemplate">
  <tr data-uid="#= uid #">
    <?php if ($isInEditList) { ?>
    <td>
      <a class="k-button k-grid-edit" href="\\#">
        <span class="fa fa-2x fa-edit"></span>
      </a>
      # if (deletable) { #
      <a class="k-button k-grid-customDelete" href="\\#">
        <span class="fa fa-2x fa-trash"></span>
      </a>
      # } #
    </td>
    <td>
      # if (showAdvanceWorkflow) { #
      <a class="k-button k-grid-advanceWorkflow" href="\\#">
        #: advanceWorkflowText #
      </a>
      # } #
    </td>
    <?php } ?>
    <td>#: partialBillingStatus #</td>
    <td>#: billingStatusLabel #</td>
    <td>#: actualDescription #</td>
    <td>#: textDescription #</td>
    <td>#: frequencyDescr #</td>
  </tr>
</script>

<?php
/**
 * @var detailEditWindowTemplate
 * This is the template for editing a line item.
 */
?>
<script type="k-kendo-template" id="detailEditWindowTemplate">
  <div class="k-edit-form-container">
    <div id="formValidateEditDetail" style="display:none;"></div>
    <form id="detailEditForm">
      <div class="container_12">
        <div class="grid_12">
          <div class="grid_4 alpha">
            <label>Description:</label>
          </div>
          <div class="grid_7 omega">
            <span data-bind="text: source.actualDescription"></span>
          </div>
        </div>

        <!-- configDiv -->
      </div>
    </form>
    <div class="k-edit-buttons k-state-default">
      <a class="k-button k-button-icontext k-primary continueBtn" href="#">
        <span class="k-icon k-update"></span>Okay
      </a>
      <a class="k-button k-button-icontext cancelBtn" href="#">
        <span class="k-icon k-cancel"></span>Cancel
      </a>
    </div>
  </div>
</script>

<?php
/**
 * @var detailAddWindowTemplate
 * This is the template for adding a line item.
 */
?>
<script type="k-kendo-template" id="detailAddWindowTemplate">
  <div class="k-edit-form-container">
    <div id="formValidateAddDetail" style="display:none;"></div>
    <form id="detailAddForm">
      <div class="container_12">
        <div class="grid_12" id="descriptionLabelLine">
          <div class="grid_4 alpha">
            <label>Description:</label>
          </div>
          <div class="grid_7 omega">
            <div id="featureDetailDDL"></div>
          </div>
        </div>

        <div class="configDiv"></div>
      </div>
    </form>
    <div class="k-edit-buttons k-state-default">
      <a class="k-button k-button-icontext k-primary continueBtn" href="\\#">
        <span class="k-icon k-update"></span>Okay
      </a>
      <a class="k-button k-button-icontext cancelBtn" href="\\#">
        <span class="k-icon k-cancel"></span>Cancel
      </a>
    </div>
  </div>
</script>

<?php
/**
 * @var detailConfigTemplate
 * This is the template for the line items.
 * This goes through a template to remove unused DIVs.
 * Then it is bound to the lineItemObservable.
 */
?>
<script type="k-kendo-template" id="detailConfigTemplate">
  # if (showOverrideRow) { #
  <div class="grid_12">
    <div class="grid_4 alpha">Override:</div>
    <div class="grid_7">
      <input type="checkbox" data-bind="click: showOverride, visible: bindOptions.isOverrideCheckboxShown">
      <input class="k-input" type="text" name="descriptionOverride" data-bind="value: source.overrideDescription, visible: bindOptions.isOverrideDescrShown">
    </div>
    <div class="grid_1 omega">
      <span data-for='descriptionOverride' class='k-invalid-msg'></span>
    </div>
  </div>
  # } #
  # if (showFixedRow) { #
  <div class="grid_12">
    <div class="grid_4 alpha">
      <label class="custLabel" data-for="fixed"># if (fixedLabel == "") { # &nbsp; # } else { # #: fixedLabel # # } #</label>
    </div>
    <div class="grid_4">
      <input type="text" name="fixed" required data-required-msg="Fixed is required" style="width: 100%"
        data-role="numerictextbox" data-format="#= format #" data-decimals="#: decimals #" data-bind="value: source.fixed">
    </div>
    <div class="grid_1 omega">
      <span data-for='fixed' class='k-invalid-msg'></span>
    </div>
  </div>
  # } #
  # if (showBillHalfDiv) { #
    <div class="grid_12">
      <div class="grid_4 alpha">Setup Options:</div>
      <div class="grid_7">
        <div id="billHalfs_#: addOrUpdate #" data-role="dropdownlist" data-text-field="text" data-value-field="value"
          data-bind="source: ddls.setupBillingDDL, value: bindOptions.billHalfValue,
          events: { change: billHalfChange }, enabled: bindOptions.billHalfDDLEnabled"></div>
      </div>
      <div class="grid_1 omega">
        &nbsp;
      </div>
    </div>
    <div class="grid_12" data-bind="visible: bindOptions.billHalfCheckReceivedRowVisible">
      <div class="grid_4 alpha">
        <span data-bind="text: bindOptions.billHalfDateLabel"></span>
      </div>
      <div class="grid_7">
        <input type="text" name="checkReceived" style="width: 100%"
          data-role="datepicker" data-bind="value: source.partiallyBilledDate">
      </div>
      <div class="grid_1 omega">
        <span data-for='checkReceived' class='k-invalid-msg'></span>
      </div>
    </div>
    <div class="grid_12" data-bind="visible: bindOptions.billHalfDateRowVisible">
      <div class="grid_4 alpha">
        <span data-bind="text: bindOptions.billHalfDateLabel"></span>
      </div>
      <div class="grid_7">
        <input type="text" name="billHalfDate" style="width: 100%"
          data-role="datepicker" data-bind="value: source.partiallyBilledDate" data-depth="year" data-start="year" data-format="MMM yyyy">
      </div>
      <div class="grid_1 omega">
        <span data-for='billHalfDate' class='k-invalid-msg'></span>
      </div>
    </div>
    <div class="grid_12" data-bind="visible: bindOptions.billHalfAmountRowVisible">
      <div class="grid_4 alpha">
        <label>Amount Received:</label>
      </div>
      <div class="grid_4">
        <input type="text" name="checkReceivedAmount" style="width: 100%"
          data-role="numerictextbox" data-min="0" data-decimals="2" data-format="{0:c}" data-bind="value: source.partiallyBilledAmount">
      </div>
      <div class="grid_1 omega">
        <span data-for='checkReceivedAmount' class='k-invalid-msg'></span>
      </div>
    </div>
  # } #
  # if (showWorkflowDiv) { #
    <div class="grid_12 workflowDiv">
      <div class="grid_4 alpha">
        <label>Workflow:</label>
      </div>
      <div class="grid_7">
        <select id="workflows_#: addOrUpdate #" data-role="dropdownlist" data-text-field="text" data-value-field="value"
          data-bind="source: ddls.workflowDDL, value: bindOptions.workflowValue, events: { change: workflowChange }"></select>
      </div>
      <div class="grid_1 omega">
        &nbsp;
      </div>
    </div>
    <div class="grid_12" data-bind="visible: bindOptions.associateToJobRowVisible">
      <div class="grid_4 alpha">
        <label>Associate to Job:</label>
      </div>
      <div class="grid_7">
        <div id="unattacheds_#: addOrUpdate #" data-role="dropdownlist" data-text-field="text" data-value-field="value"
          data-bind="source: ddls.unattachedJobDDL, value: bindOptions.unattachedJobValue"></div>
      </div>
      <div class="grid_1 omega">
        &nbsp;
      </div>
    </div>
    <div class="grid_12" data-bind="visible: bindOptions.immediateBillRowVisible">
      <div class="grid_4 alpha">
        <label>Starts:</label>
      </div>
      <div class="grid_7">
        <input type="text" name="immediateBillDate" style="width: 100%"
          data-role="datepicker" data-bind="value: source.partiallyBilledDate" data-depth="year" data-start="year" data-format="MMM yyyy">
      </div>
      <div class="grid_1 omega">
        <span data-for='immediateBillDate' class='k-invalid-msg'></span>
      </div>
    </div>
  # } #
  # if (showVariableRow) { #
  <div class="grid_12">
    <div class="grid_4 alpha">
      <label class="custLabel" data-for="variable"># if (variableLabel == "") { # &nbsp; # } else { # #: variableLabel # # } #</label>
    </div>
    <div class="grid_4">
      <input type="text" name="variable" required data-required-msg="Variable is required" style="width: 100%"
        data-role="numerictextbox" data-decimals="#: decimals #" data-format="#= format #" data-bind="value: source.variable">
    </div>
    <div class="grid_1 omega">
      <span data-for='variable' class='k-invalid-msg'></span>
    </div>
  </div>
  # } #
  # if (showQuantity1Row) { #
  <div class="grid_12">
    <div class="grid_4 alpha">
      <label data-for="qty1"># if (quantity1Label1 == "") { # &nbsp; # } else { # #: quantity1Label1 # # } #</label>
    </div>
    <div class="grid_4">
      <input type="text" name="qty1" required data-required-msg="Quantity 1 is required" style="width: 100%"
        data-role="numerictextbox" data-decimals="0" data-format="\\#" data-min="0" data-bind="value: source.qty1">
    </div>
    <div class="grid_3">
      <label data-for="qty1"># if (quantity1Label2 == "") { # &nbsp; # } else { # #: quantity1Label2 # # } #</label>
    </div>
    <div class="grid_1 omega">
      <span data-for='qty1' class='k-invalid-msg'></span>
    </div>
  </div>
  # } #
  # if (showQuantity2Row) { #
  <div class="grid_12">
    <div class="grid_4 alpha">
      <label data-for="qty2"># if (quantity2Label1 == "") { # &nbsp; # } else { # #: quantity2Label1 # # } #</label>
    </div>
    <div class="grid_4">
      <input type="text" name="qty2" required data-required-msg="Quantity 2 is required" style="width: 100%"
        data-role="numerictextbox" data-decimals="0" data-format="\\#" data-min="0" data-bind="value: source.qty2">
    </div>
    <div class="grid_3">
      <label data-for="qty2"># if (quantity2Label2 == "") { # &nbsp; # } else { # #: quantity2Label2 # # } #</label>
    </div>
    <div class="grid_1 omega">
      <span data-for='qty2' class='k-invalid-msg'></span>
    </div>
  </div>
  # } #
  # if (showQuantityRangeRow) { #
  <div class="grid_12">
    <div class="grid_4 alpha">
      <label># if (quantityRangeLabel1 == "") { # &nbsp; # } else { # #: quantityRangeLabel1 # # } #</label>
    </div>
    <div class="grid_3">
      <input type="text" name="qty1Range" required data-required-msg="Quantity 1 is required" style="width: 100%"
        data-role="numerictextbox" data-decimals="0" data-format="\\#" data-min="0" data-bind="value: source.qty1">
    </div>
    <div class="grid_1">To</div>
    <div class="grid_3">
      <input type="text" name="qty2Range" style="width: 100%"
        data-role="numerictextbox" data-decimals="0" data-format="\\#" data-min="0" data-bind="value: source.qty2" placeholder="∞">
    </div>
    <div class="grid_1 omega">
      <span data-for='qty1Range' class='k-invalid-msg'></span>
      <span data-for='qty2Range' class='k-invalid-msg'></span>
    </div>
  </div>
  # } #
  # if (showDNIDDiv) { #
  <div class="grid_12">
    <div class="grid_4 alpha">
      <label class="custLabel" data-for="aDNID">Long Code:</label>
    </div>
    <div class="grid_4">
      <input name="aDNID" style="width: 100%"
        data-role="maskedtextbox" data-mask="<?php echo str_repeat('0', 15); ?>" data-bind="value: source.aDNID" data-prompt-char=" ">
    </div>
    <div class="grid_1 omega">
      <span data-for='aDNID' class='k-invalid-msg'></span>
    </div>
  </div>
  # } #
  # if (showFrequencyDiv) { #
  <div class="grid_12">
    <div class="grid_4 alpha">
      <label>Frequency:</label>
    </div>
    <div class="grid_3">
      <div id="frequencies_#: addOrUpdate #" data-role="dropdownlist" data-text-field="text" data-value-field="value"
        data-bind="source: ddls.frequencyDDL, value: bindOptions.frequencyValue, events: { change: frequencyChange }"></div>
    </div>
    <div class="grid_1 omega">
      &nbsp;
    </div>
  </div>
  <div class="grid_12" data-bind="visible: bindOptions.billsOn1RowVisible">
    <div class="grid_4 alpha">
      <label>Bills On:</label>
    </div>
    <div class="grid_3">
      <div id="billsOn1s_#: addOrUpdate #" data-role="dropdownlist" data-text-field="text" data-value-field="value"
        data-bind="source: ddls.monthDDL, value: bindOptions.billsOn1Value, events: { change: frequencyChange }"></div>
    </div>
    <div class="grid_1 omega">
      &nbsp;
    </div>
  </div>
  <div class="grid_12" data-bind="visible: bindOptions.billsOn2RowVisible">
    <div class="grid_4 alpha">
      <label>And:</label>
    </div>
    <div class="grid_3">
      <div id="billsOn2s_#: addOrUpdate #" data-role="dropdownlist" data-text-field="text" data-value-field="value"
        data-bind="source: ddls.monthDDL, value: bindOptions.billsOn2Value, events: { change: frequencyChange }"></div>
    </div>
    <div class="grid_1 omega">
      &nbsp;
    </div>
  </div>
  # } #
</script>

<?php
/**
 * @var changeStartMonthTemplate
 * This is the template for changing the month in the pending detail grid.
 */
?>
<script id="changeStartMonthTemplate" type="k-kendo-template">
    <div class="k-edit-form-container added">
          <div class="container_12">
            <div class="grid_12">
              <div class="grid_4 alpha">Start Date:</div>
              <div class="grid_7 omega"><div id="pendingStartMonthDDL"></div></div>
            </div>
          </div>
        <div class="k-edit-buttons k-state-default">
          <a class="k-button k-button-icontext k-primary continueBtn" href="\\#">
              <span class="k-icon k-update"></span>Okay
          </a>
          <a class="k-button k-button-icontext cancelBtn" href="\\#">
              <span class="k-icon k-cancel"></span>Cancel
          </a>
        </div>
    </div>
</script>

<?php
/**
 * @var detailToolbarTemplate
 * This is the template for the toolbar: pending grid, bottom level.
 */
?>
<script id="detailToolbarTemplate" type="k-kendo-template">
  <a class="k-button k-grid-add" href="\\#">
    <span class="fa fa-2x fa-plus"></span>
  </a>
  <a class="k-button k-grid-startMonthlies" href="\\#">
    Start Recurring
  </a>
</script>

<?php // ======================================
      // ACTIVE GRID TEMPLATES
      // ====================================== ?>

<?php
/**
 * @var activeRowTemplate
 * This is the row template for the active grid.
 */
?>
<script type="k-kendo-template" id="activeRowTemplate">
  <tr data-uid="#= uid#">
    <?php if ($isInEditList) { ?>
      <td>
        # if (showCompleteButton) { #
          <a class="k-button k-grid-advanceWorkflow" href="\\#">#: completeButtonText #</a>
        # } #
        <a class="k-button k-grid-changePrice" href="\\#">Change Price</a>
        <a class="k-button k-grid-customDelete" href="\\#">
          <span class="fa fa-2x fa-trash"></span>
        </a>
      </td>
    <?php } ?>
    <td>#: productName #</td>
    <td>#: featureName #</td>
    <td>#: partialBillingStatus #</td>
    <td>#: status #</td>
    <td>#: featureDescription #</td>
    <td>#: frequencyDescr #</td>
  </tr>
</script>

<?php
/**
 * @var changeEndMonthTemplate
 * This is the template for the change end month window.
 */
?>
<script id="changeEndMonthTemplate" type="k-kendo-template">
    <div class="k-edit-form-container added">
          <div class="container_12">
            <div class="grid_12">
              <div class="grid_4 alpha">End Date:</div>
              <div class="grid_7 omega"><div id="activeEndMonthDDL"></div></div>
            </div>
          </div>
        <div class="k-edit-buttons k-state-default">
          <a class="k-button k-button-icontext k-primary continueBtn" href="\\#">
              <span class="k-icon k-update"></span>Okay
          </a>
          <a class="k-button k-button-icontext cancelBtn" href="\\#">
              <span class="k-icon k-cancel"></span>Cancel
          </a>
        </div>
    </div>
</script>

<?php
/**
 * @var activeChangePriceTemplate
 * This is the template for the change price window.
 */
?>
<script type="k-kendo-template" id="activeChangePriceTemplate">
  <div class="k-edit-form-container">
    <div id="formValidateChangePrice" style="display:none;"></div>
    <form id="activeChangePriceForm">
      <div class="container_12">
        <div class="grid_12">
          <div class="grid_4 alpha">
            <label>Description:</label>
          </div>
          <div class="grid_7 omega">
            <span data-bind="text: source.actualDescription"></span>
          </div>
        </div>

        <!-- configDiv -->
      </div>
    </form>
    <div class="k-edit-buttons k-state-default">
      <a class="k-button k-button-icontext k-primary continueBtn" href="#">
        <span class="k-icon k-update"></span>Okay
      </a>
      <a class="k-button k-button-icontext cancelBtn" href="#">
        <span class="k-icon k-cancel"></span>Cancel
      </a>
    </div>
  </div>
</script>

<?php // ======================================
      // COMPLETED GRID TEMPLATES
      // ====================================== ?>

<?php
/**
 * @var completedRowTemplate
 * This is the row template for the completed grid.
 */
?>
<script type="k-kendo-template" id="completedRowTemplate">
  <tr data-uid="#= uid#">
    <?php if ($isInEditList) { ?>
      <td>
        # if (showAdvanceWorkflow) { #
        <a class="k-button k-grid-advanceWorkflow" href="\\#">
          #: advanceWorkflowText #
        </a>
        # } #
      </td>
    <?php } ?>
    <td>#: productName #</td>
    <td>#: featureName #</td>
    <td>#: partialBillingStatus #</td>
    <td>#: status #</td>
    <td>#: featureDescription #</td>
    <td>#: frequencyDescr #</td>
  </tr>
</script>

<?php // ======================================
      // PAGE HTML
      // ====================================== ?>

<div class="container_12">
    <div class="grid_12">
        <h2>Showing details for <span id="cuLabel"></span></h2>
        <div id="cu" style="display:none"></div><div id="cuName" style="display:none;"></div>
    </div>
    <div id="formMain"></div>
    <div id="formValidateMainDiv" style="display:none;"></div>
    <div class="grid_12">
        <div id="warningDiv" class="k-block" style="display:none;"></div>
    </div>
    <div class="grid_12">
        <div id="activeGrid" class="detailGrid minifiedActionGrid"></div>
    </div>
    <div class="grid_12">
        <div id="pendingGrid" class="detailGrid minifiedActionGrid"></div>
    </div>
    <div class="grid_12">
        <div id="completedGrid" class="detailGrid minifiedActionGrid"></div>
    </div>
</div>