cutrustdetail.prg

<?php
  /*
   * Script: cutrustdetail.v2
   *
   * Purpose:  This script is used to assign values for a credit union using a
   *            trusted vendor.  Things such as billpay values and other SSO
   *          The user will need to select a trustedid, which is setup in the
   *          cutrustedmaster table. They are then allowed to enter the options
   *          for each of the fields.
   *
   * Parameters:
   *          user_name - This is the cu code coming from the menu
   *
   */

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

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

// Globals
$dataFile= "cutrustdetail.data";
$dataPath= "/hcuadm/$dataFile";
$showSQL= false;

dms_import_v2($DATA_PARAMETERS, "TOP_LEVEL", array("user_name" => "string"));
$cu= strtoupper($DATA_PARAMETERS["TOP_LEVEL"]["user_name"]);

printMonitorPageTop("CU trust detail for $cu", $homecuKendoVersion, $cloudfrontDomainName);
?>

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

  .k-grid tbody .k-button {
    min-width: 20px !important; /* override */
  }

  #defaultValueGrid thead {
    display: none;
  }

  #defaultValueGrid tbody tr {
    height: 50px;
  }

  #defaultValueGrid .k-grid-customDelete {
    position: relative;
    left: -5px;
  }

  .homecu-formStatus {
    margin: 5px;
    padding: 5px;
  }

  #accordion {
    border-color: rgb(204, 204, 204);
    background-color: rgb(238, 238, 238);
    border-radius: 6px;
    color: rgb(51, 131, 187) !important;
    display: block;
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
  }

  #deleteDialogWindow .message {
    text-align: center;
  }

  #deleteDialogWindow .k-edit-buttons {
    text-align: center;
  }

  .k-context-menu .k-item, .k-context-menu {
    width: 250px !important;
    text-overflow: ellipsis;
  }

  .helpCell:hover, .k-grid-help:hover {
        text-decoration: underline;
        cursor: help;
  }
</style>

<script type="text/javascript">

<?php
// Include common functions
getErrorsAreShownFunction();
getContextMenuForDoubleLevelGrid();
getAddMinifiedActionStyleFunction();
getParseCrudGridFunction();
getEscapeHTMLFunction();
getShowSQLFunction($showSQL);
getSetupValidatorInGridFunction();
getUseValidatorInGridFunction();
getShowWaitFunctions();
?>

<?php
/**
 * Initializes the top level grid.  You are able to add unused trusted details which will pull in all the details from the master.
 */ ?>
var dataItemToDelete= null;
var detailRecords= [];
var trustedIdDetailDDLData= {};
function initGrid()
{

    var initialized= false;

    var grid= $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: "<?php echo $dataPath; ?>?operation=readTrustedVendors&cu=<?php echo $cu; ?>",
                    dataType: "json",
                    type: "POST"
                },
                create: {
                    url: "<?php echo $dataPath; ?>?operation=createTrustedId&cu=<?php echo $cu; ?>",
                    dataType: "json",
                    type: "POST"
                },
        parameterMap: function(data, type) {
          showWaitWindow();
          if (type == "read")
            return {};
          else if (type = "create")
            return data;
        }
            },
            schema: {
                model: {
                    id: "trustedId",
                    fields: {
                        trustedId: {type: "string"},
                        hasMasterRecord: {type: "boolean", defaultValue: true},
            masterDetailLength: {type: "number"}
                    }
                },
        parse: function (data)
        {
          hideWaitWindow();
            if (data.operation == "read")
            {
                trustedIdDetailDDLData= data.trustedIdDetailDDL;
            detailRecords= data.detailRecords;
            $("#grid .k-grid-add").addClass("topLevel");
            }

          <?php // Gets the trusted ids from an associate array that are not used.  Associate array is necessary because array also contains the valid properties of the trustedId referenced later. ?>
          var availableTrustedIds= Object.keys(trustedIdDetailDDLData);
          var gridData= grid.dataSource.data();
          var trustedIdsInGrid= {};
          for (var i=0; i!= gridData.length; i++)
            trustedIdsInGrid[gridData[i].trustedId]= true;
          availableTrustedIds= $.grep(availableTrustedIds, function (n,i) { return typeof(trustedIdsInGrid[n]) == "undefined"; });

          if (availableTrustedIds.length == 0)
                $("#grid .k-grid-add.topLevel").hide();
            else
                $("#grid .k-grid-add.topLevel").show();
          showWarnings(data, "warningNotification");
          showSQL(data);

          if (data.operation == "read")
          {
              $("#invalidRequestServerSide").val(errorsAreShown(data, "formValidateMainDiv"));
              return data.topRecords;
          }
          else
          {
              $("#invalidRequestServerSide").val(errorsAreShown(data, "formValidatePopupDiv"));
              for(var i=0; i!= data.bottomRecords.length; i++)
              {
                detailRecords.push(data.bottomRecords[i]);
              }
              return data.record;
          }
        }
            },
      sort: {field: "trustedId", dir: "asc"}
        },
        columns: [
      {field: "hasMasterRecord", hidden: true},
            {field: "trustedId", title: "Trusted ID",
        template: function (dataItem) {
                if (dataItem.hasMasterRecord)
                    return dataItem.trustedId;
                else
                    return "*** " + dataItem.trustedId + " *** DO NOT USE: NO MASTER RECORD ***";
            }
      }
        ],
       sortable: true,
       filterable: {extra: false},
       toolbar: [{name: "create", text: ""}],
       detailTemplate: "<div class=\"detailGrid\"></div>",
       detailInit: function (eOuter) {
          initDetailGrid(eOuter, trustedIdDetailDDLData[eOuter.data.trustedId]);
       },
       editable: {
            mode: "popup",
            template: kendo.template($("#popupTemplate").html()),
            window: {
                draggable: false,
                resizable: false,
                title: "Add Trusted Id",
                actions: [],
                width: 400
            }
       },
       edit: function (eOuter) {
          setupValidatorInGrid(eOuter, false);
            var availableTrustedIds= Object.keys(trustedIdDetailDDLData);
            var gridData= grid.dataSource.data();
            var trustedIdsInGrid= {};
            for (var i=0; i!= gridData.length; i++)
                trustedIdsInGrid[gridData[i].trustedId]= true;
            availableTrustedIds= $.grep(availableTrustedIds, function (n,i) { return typeof(trustedIdsInGrid[n]) == "undefined"; });

            var trustedIdDDL= $("#nameDDL").kendoDropDownList({
                dataSource: {
                    data: availableTrustedIds
                },
                filter: "startswith",
            dataBound: function () {
              eOuter.model.trustedId= this.value();
              eOuter.model.masterDetails= kendo.stringify(trustedIdDetailDDLData[this.value()]);
            },
                change: function () {
                    eOuter.model.trustedId= this.value();
              eOuter.model.masterDetails= kendo.stringify(trustedIdDetailDDLData[this.value()]);
                }
            }).data("kendoDropDownList");
       },
       save: function (eOuter) {
          useValidatorInGrid(eOuter, false);
       },
       dataBound: function () {
        fullContextMenu.gridDatabound (true, initialized, grid);
       if (!initialized)
         {
              addMinifiedActionStyle("#grid", true);
              initialized= true;
         }
      },
      cancel: function (eOuter) {
        fullContextMenu.gridCancel(eOuter, grid, true);
        grid.cancelRow();
        eOuter.preventDefault();
        return false;
      },
      detailExpand: function(e) {
        $(e.detailRow).find(".detailGrid").data("kendoGrid").dataSource.read(); // Doing autoBind false on the detail grid and that is so it shows the new records on a trusted detail create.
      }
    }).data("kendoGrid");

  fullContextMenu= new getFullContextMenu(grid, "contextMenu", "trustedId", "property");

  fullContextMenu.setOptionFuncs(masterOptionFunc, detailOptionFunc, additionalSelectOptionFunc);
  fullContextMenu.setDeleteOptions("<?php echo $dataPath; ?>", "removeTrustedId&cu=<?php echo $cu; ?>", "removeTrustedDetail&cu=<?php echo $cu; ?>", function(isMaster, dataItemForDelete) {
      if (isMaster)
      {
          var data= grid.dataSource.data().slice(0);
          data= $.grep(data, function(n,i) { return n.trustedId != dataItemForDelete.trustedId; });
          detailRecords= $.grep(detailRecords, function(n,i) { return n.trustedId != dataItemForDelete.trustedId; });
          $(".detailGrid:visible").each(function () { $(this).data("kendoGrid").dataSource.read(); });
          grid.dataSource.data(data);
      }
      else
      {
          detailRecords= $.grep(detailRecords, function(n,i) { return n.trustedId == dataItemForDelete.trustedId && n.property == dataItemForDelete.property;}, true);
          $(".detailGrid:visible").each(function () { $(this).data("kendoGrid").dataSource.read(); });
      }
  }, function(dataItem) {
    return $.grep(detailRecords, function(n,i) { n.trustedId == dataItem.trustedId; }).length;
  });

  fullContextMenu.setLimitFromDatabound(["click"]);
}

<?php
/**
 * function masterOptionFunc(options, dataItem)
 * Adds in the options to the context menu on the top level.
 *
 * @param array options -- the menu items
 * @param object dataItem -- the data for the grid line item
 */
?>
function masterOptionFunc(options, dataItem) {
  options.push({text: "Delete", cssClass: "deleteLi"});

  if (typeof(trustedIdDetailDDLData[dataItem.trustedId]) != "undefined")
  {
      var availableTrustedIds= Object.keys(trustedIdDetailDDLData[dataItem.trustedId]);
      var gridData= $.grep(detailRecords, function(n,i) { return n.trustedId == dataItem.trustedId; });
      var trustedIdsInGrid= {};
      for (var i=0; i!= gridData.length; i++)
        trustedIdsInGrid[gridData[i].property]= true;
      availableTrustedIds= $.grep(availableTrustedIds, function (n,i) { return typeof(trustedIdsInGrid[n]) == "undefined"; });

      if (dataItem.hasMasterRecord && availableTrustedIds.length > 0)
      {
        options.push({text: "Add detail", cssClass: "addDetailLi"});
        options.push({text: "Pull unused master properties", cssClass: "pullLi"});
      }
  }

}

<?php
/**
 * function detailOptionFunc(options, dataItem)
 * Adds in the options for the context menu on the bottom level.
 *
 * @param array options -- the menu items
 * @param object dataItem -- the data for the grid line item
 */
?>
function detailOptionFunc(options, dataItem) {
  options.push({text: "Delete", cssClass: "deleteLi"});
  var data= $.grep(detailRecords, function(n,i) { return n.trustedId == dataItem.trustedId; });
  data.sort(function(a,b) { return a.displayOrder - b.displayOrder; });

  if (data.length >= 2) // Will need at least two tasks for move before and move after to make sense.
  {
    var moveBeforeChoices= [];
    var moveAfterChoices= [];
    this.taskIndex= -1;
    for (var i=0; i!= data.length; i++)
    {
      moveBeforeChoices.push({text: data[i].property, cssClass: "moveBeforeChoiceLi task_"+i});
      moveAfterChoices.push({text: data[i].property, cssClass: "moveAfterChoiceLi task_"+i});
      if (data[i].property == dataItem.property)
        this.taskIndex= i;
    }

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

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

  if (dataItem.hasMasterRecord)
  {
    options.unshift({text: "Edit", cssClass: "editLi"});
  }
}

<?php
/**
 * function additionalSelectOptionFunc(item, tr, grid, dataItem)
 * Adds in logic when a menu item is clicked
 *
 * @param HTMLElement item -- represents the li clicked on the menu.
 * @param HTMLElement tr -- represents the tr the menu is for.
 * @param object dataItem -- the data for the tr in the grid.
 */
?>
function additionalSelectOptionFunc(item, tr, grid, dataItem)
{
  if ($(item).hasClass("pullLi"))
  {
    var popup= $("#pullDownPopup").data("kendoWindow");
    var pullDownGrid= $("#pullDownGrid").data("kendoGrid");
    var popupNoTemplates= $("#noTemplatesPopup").data("kendoWindow");
    if (popup == null)
    {
      popup= $("<div id='pullDownPopup'></div>").kendoWindow({
        content: {
            template: kendo.template($("#pullTemplate").html())
        },
        modal: true,
        title: "Pull Down Properties",
        visible: false,
        actions: [],
        draggable: false,
        resizable: false,
        width: 400
      }).data("kendoWindow");

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

      pullDownGrid= $("#pullDownGrid").kendoGrid({
        dataSource: {
          data: [],
          schema: {
            model: {
              id: "property",
              fields: {
                property: {type: "string"},
                value: {type: "string"},
                fieldType: {type: "string"},
                message: {type: "string"}
              }
            }
          }
        },
        columns: [
          {title: "<input type='checkbox' id='allCheckbox'>", template: "<input type='checkbox' class='rowCheckbox'>", width: "50px"},
          {field: "property", title: "Property"},
        ],
        autoBind: false
      }).data("kendoGrid");

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



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

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

    $("#pullDownPopup .okayBtn").off("click"); // Make sure that the variables don't stagnate to the first trustedId.
    $("#pullDownPopup .okayBtn").on("click", function() {
        var properties= [];
        $(".rowCheckbox:checked").each(function () {
          properties.push(pullDownGrid.dataItem($(this).parent().parent()));
        });

        showWaitWindow();
        $.post("<?php echo $dataPath; ?>?operation=pullDownOptions&cu=<?php echo $cu; ?>", {trustedId: dataItem.trustedId, options: kendo.stringify(properties)}, function (data) {
          hideWaitWindow();

          showSQL(data);
          if (!errorsAreShown(data, "formValidatePullDownDiv"))
          {
            for (var i=0; i!= data.record.length; i++)
              detailRecords.push(data.record[i]);
            $(".detailGrid:visible").each(function () { $(this).data("kendoGrid").dataSource.read(); });
            popup.close();
          }
        });
    });

    var gridData= grid.dataSource.data();
    var inMaster= trustedIdDetailDDLData[dataItem.trustedId];
    var lookup= {};
    var data= [];
    var gridIndex= null;

    var properties= $.grep(detailRecords, function(n,i) { return n.trustedId == dataItem.trustedId; });
    for(var j=0; j!= properties.length; j++)
      lookup[properties[j].property]= true;
    for (var prop in inMaster)
    {
      if (typeof(lookup[prop]) == "undefined")
        data.push({property: prop, value: inMaster[prop].defaultValue, fieldType: inMaster[prop].fieldType, message: inMaster[prop].message});
    }

    if (data.length > 0)
    {
      $("#allCheckbox").prop("checked", false);
      pullDownGrid.dataSource.data(data);
      popup.open().center();
    }
    else
    {
      popupNoTemplates.open().center();
    }
  }
  else if ($(item).hasClass("moveAfterChoiceLi") || $(item).hasClass("moveBeforeChoiceLi"))
  {
    var classes= $(item).attr("class").split(/\s+/);
    var moveTaskId= 0;
    for(var i=0; i!= classes.length; i++)
    {
      var parts= classes[i].split(/_/);
      if (parts[0].trim() == "task")
      {
        moveTaskId= Number(parts[1]);
        break;
      }
    }

    if ($(item).hasClass("moveAfterChoiceLi"))
      moveTaskId++;
    $.post("<?php echo $dataPath; ?>?operation=reorderProperties&cu=<?php echo $cu; ?>", {position: moveTaskId, trustedId: dataItem.trustedId, property: dataItem.property}, function (data) {
      hideWaitWindow();
      showSQL(data);
      if (!errorsAreShown(data, "formValidateMainDiv"))
      {
        detailRecords= $.grep(detailRecords, function(n,i) { return n.trustedId != dataItem.trustedId; });
        for(var i=0, length= data.record.length; i!= length; i++)
        {
          detailRecords.push(data.record[i]);
        }
        grid.dataSource.read();
        $("#grid").data("kendoGrid").expandRow($(tr).closest(".k-detail-row").prev()); // The outer grid collapses normally but need to still show the grid changed.
      }
    });
  }
}

<?php
/**
 * function showWarnings(data, warningNotification)
 * Shows a warning when a trustedId's properties cannot be decoded properly.
 *
 * @param object data -- the data from the data call that contains the warning property.
 * @param string warningNotification -- the id of the warning notification.
 */
?>
function showWarnings(data, warningNotification)
{
  if (typeof(data.warning) != "undefined" && data.warning.length > 0)
  {
    var notification= $("#"+warningNotification).data("kendoNotification");
    if (notification == null)
    {
        notification = $("<div id='"+warningNotification+"'></div>").kendoNotification({
          position: {
            pinned: true,
            top: 18,
            left: 128
          }
        }).data("kendoNotification");
    }
    var warningLine= "<b>Warnings:</b><br>";
    for (var i=0; i!= data.warning.length; i++)
      warningLine+= data.warning[i]+ "<br>";
    notification.warning(warningLine);
  }
}

<?php
/**
 * function helpDataBound(grid, isCancel)
 * Adds logic to open the help on the grid databound function.
 *
 * @param KendoGrid grid -- the bottom level grid
 * @param boolean isCancel -- need to clear the events on a cancel event.
 */
?>
function helpDataBound(grid, isCancel)
{
  if (isCancel)
    $(grid.tbody).find(".k-grid-help").off("click mouseenter mouseleave");
  $(grid.tbody).find(".k-grid-help").on("click", function () {
    openHelpPopup($(this), grid.dataItem($(this).parent().parent()).message);
    return false;
  });

  $(grid.tbody).find(".k-grid-help").on("mouseenter", function () {
    $(this).data("timer", setTimeout($.proxy(function() { openHelpPopup($(this), grid.dataItem($(this).parent().parent()).message)}, $(this)), 3000));
    return false;
  });

  $(grid.tbody).find(".k-grid-help").on("mouseleave", function () {
    clearTimeout($(this).data("timer"));
    return false;
  });
}

<?php
/**
 * function openHelpPopup(td, message)
 * Opens the help popup
 *
 * @param HTMLElement td -- the table cell of the help popup
 * @param string message -- the message to display in an info popup
 */
?>
function openHelpPopup(td, message)
{
  clearTimeout($(td).data("timer"));
  if ($(td).data("hasNotification") == true)
    return;

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

  if (message == null || message == "")
    notification.info("No help available");
  else
    notification.info(message);
}

<?php
/**
 * function initDetailGrid(eOuter, fieldTypeDDLData)
 * Initializes the bottom-level Grid
 *
 * @param object eOuter -- contains data for the master record and other things.
 * @param object fieldTypeDDLData -- contains the master DDL data.
 */
?>
function initDetailGrid(eOuter, fieldTypeDDLData)
{
    var detailGridInitialized= false;
  var trustedId= eOuter.data.trustedId;
  var detailGridSelector= eOuter.detailRow.find(".detailGrid");

  var nextDisplayOrderNum= $.grep(detailRecords, function(n,i) { return n.trustedId == trustedId; }).length;

    var detailGrid= eOuter.detailRow.find(".detailGrid").kendoGrid({
        dataSource: {
            transport: {
                read: function (options) {
                    options.success(detailRecords);
                },
               create: function (options) {
                showWaitWindow();
                var parameters= {trustedId: trustedId, property: options.data.property, value: options.data.value, fieldType: options.data.fieldType, message: options.data.message};
                    $.post("<?php echo $dataPath; ?>?operation=addTrustedDetail&cu=<?php echo $cu; ?>", parameters, function(data) {
                    hideWaitWindow();
                        showSQL(data);

                    if (!errorsAreShown(data, "formValidatePopupDetailDiv"))
                    {
                      data.record[0].displayOrder= nextDisplayOrderNum++;
                      options.success(data.record);
                      detailRecords.push(data.record[0]);
                    }
                    });
               },
               update: function (options) {
               showWaitWindow();
               var parameters= {trustedId: trustedId, property: options.data.property, value: options.data.value, fieldType: options.data.fieldType, message: options.data.message};
                   $.post("<?php echo $dataPath; ?>?operation=updateTrustedDetail&cu=<?php echo $cu; ?>", parameters, function (data) {
                    hideWaitWindow();
                        showSQL(data);
                    if (!errorsAreShown(data, "formValidatePopupDetailDiv"))
                    {
                      options.success(data.record);
                    }
                   });
               }
            },
            schema: {
                model: {
                    id: "pid",
                    fields: {
            pid: {type: "number"},
                        property: {type: "string"},
                        value: {type: "string"},
            fieldType: {type: "string"},
            hasMasterRecord: {type: "boolean", defaultValue: eOuter.data.hasMasterRecord},
            message: {type: "string"},
            trustedId: {type: "string"},
            displayOrder: {type: "number"}
                    }
                }
            },
      sort: {field: "displayOrder", dir: "asc"},
      filter: {field: "trustedId", operator: "eq", value: eOuter.data.trustedId}
        },
    editable: {
        mode: "popup",
        template: kendo.template($("#popupTemplateDetail").html()),
        window: {
            draggable: false,
            resizable: false,
            actions: [],
            width: 400,
            autoFocus: false
        }
        },
    columns: [
    {field: "hasMasterRecord", hidden: true, attributes: {"class" : "detailHasMasterRecord"}},
    {command: [{className: "k-grid-help k-info-colored", name: "help", text: "", iconClass: "k-icon k-i-info"}], attributes: {"class" : "helpCell"}, width: "50px"},
        {field: "property", title: "Property"},
        {field: "value", title: "Value"}
        ],
      sortable: true,
      filterable: {extra: false},
    autoBind: false,
    edit: function (eInner) {
      setupValidatorInGrid(eInner, true);

      var fieldType= "string";

      $("#valueTextInput").blur(function () {
        eInner.model.dirty= true;
        eInner.model.value= $(this).val();
      });

      $("#valueBooleanInput").click(function () {
        eInner.model.dirty= true;
        eInner.model.value= $(this).prop("checked") ? "Y" : "N";
      });

      var valueNumericInput= $("#valueNumericInput").kendoNumericTextBox({
        change: function () {
          eInner.model.dirty= true;
          eInner.model.value= this.value();
        }
      }).data("kendoNumericTextBox");

      var index= 0;
      var inEditCell= false;
      var valueGrid= $("#valueGrid").kendoGrid({
        dataSource: {
          data: [],
          schema: {
            model: {
              id: "index",
              fields: {
                index: {type: "number"},
                value: {type: "string"}
              }
            }
          }
        },
        columns: [
          {field: "index", hidden: true},
          {command: [{name: "customDelete", text: "", iconClass: "k-icon k-i-delete", click: function(e) {
            eInner.model.dirty= true;
            getValueFromGrid(eInner, e, valueGrid, true);
            return false;
          }}], width: "45px"},
          {field: "value"}
        ],
        editable: {
          mode: "incell",
          confirmation: false
        },
        edit: function (eGrid) {
          if (eGrid.model.isNew())
            eGrid.model.index= ++index;
        },
        save: function (eGrid) {
          eInner.model.dirty= true;
          getValueFromGrid(eInner, eGrid, this, false);
        },
        dataBound: function () {
          addMinifiedActionStyle("#valueGrid", true);
        }
      }).data("kendoGrid");

      if (eInner.model.isNew())
      {
          $(eInner.container).data("kendoWindow").title("Add Detail");
          $("#propertyLabel").remove();

          var addedProperties= {};
          var data= $.grep(detailRecords, function(n,i) { return n.trustedId == eOuter.data.trustedId; });
          for (var i=0; i!= data.length; i++)
          {
            addedProperties[data[i].property]= true;
          }

          var propertyDDL= [];
          for(var prop in fieldTypeDDLData)
          {
            if (typeof(addedProperties[prop]) == "undefined")
            {
              var r= fieldTypeDDLData[prop];
              propertyDDL.push({fieldType: r.fieldType, defaultValue: r.defaultValue, propertyName: prop, message: r.message});
            }
          }
          // Create dropDownList and then select the field type from the first that is defaultly selected.
          var propertyDDL= $("#propertyDDL").kendoDropDownList({
            dataSource: {
              data: propertyDDL,
              schema: {
                model: {
                  id: "propertyName",
                  fields: {
                    propertyName: {type: "string"},
                    defaultValue: {type: "string"},
                    fieldType: {type: "string"},
                    message: {type: "string"}
                  }
                }
              }
            },
            dataTextField: "propertyName",
            dataValueField: "propertyName",
            filter: "startswith",
            dataBound: function (e) {
              var dataItem= this.dataItem();

              if (dataItem != null)
              {
                eInner.model.property= this.value();
                eInner.model.fieldType= dataItem.fieldType;
                eInner.model.message= dataItem.message;
                fieldTypeChange(eInner, valueGrid, valueNumericInput, dataItem.fieldType, true, dataItem.defaultValue);
              }

            },
            change: function (e) {
              var dataItem= this.dataItem();

              if (dataItem != null)
              {
                eInner.model.property= this.value();
                eInner.model.fieldType= dataItem.fieldType;
                eInner.model.message= dataItem.message;
                fieldTypeChange(eInner, valueGrid, valueNumericInput, dataItem.fieldType, true, dataItem.defaultValue);
              }

            }
          }).data("kendoDropDownList");
      }
      else
      {
          $(eInner.container).data("kendoWindow").title("Update Detail");
          $("#propertyDDL").remove();
          fieldTypeChange(eInner, valueGrid, valueNumericInput, eInner.model.fieldType, false);
      }
    },
    save: function (eInner) {
      useValidatorInGrid(eInner, true);
    },
    dataBound: function (eInner)
       {
        helpDataBound(this, false);

        $(this.tbody).find("tr .detailHasMasterRecord:contains(true)").each(function () {
          $(this).parent().find("td:not(.helpCell)").on("click", function () {
            fullContextMenu.gridForMenu= detailGrid;
            fullContextMenu.dataItemForMenu= detailGrid.dataItem($(this).parent());
            fullContextMenu.rowForMenu= $(this).parent();
            detailGrid.editRow($(this).parent());
            return false;
          });
        });
       },
     cancel: function (eInner) {
        fullContextMenu.gridCancel(eInner, this, false);

        $(this.tbody).find("tr td:not(.helpCell)").off("click");
        $(this.tbody).find("tr .detailHasMasterRecord:contains(true)").each(function () {
          $(this).parent().find("td:not(.helpCell)").on("click", function () {
            fullContextMenu.gridForMenu= detailGrid;
            fullContextMenu.dataItemForMenu= detailGrid.dataItem($(this).parent());
            fullContextMenu.rowForMenu= $(this).parent();
            detailGrid.editRow($(this).parent());
            return false;
          });
        });

        helpDataBound(this, true);
        this.cancelChanges();
        eInner.preventDefault();
        return false;
     }
    }).data("kendoGrid");

  fullContextMenu.addToDetailGrid (eOuter.data.trustedId, detailGrid);
}

<?php
/**
 * function getValueFromGrid(eInner, eGrid, grid, isDeleting)
 * When type of "list" is selected, this gets the value from the grid.
 *
 * @param object eInner -- contains the data and other things for the detail record
 * @param object eGrid -- the e argument inside of the value grid
 * @param KendoGrid grid -- the detail grid
 * @param boolean isDeleting -- if true, then the value is being removed from the grid
 */
?>
function getValueFromGrid(eInner, eGrid, grid, isDeleting)
{
    eInner.model.dirty= true;
    var data= grid.dataSource.data();

    if (isDeleting)
    {
      var deletingIndex= Number($(eGrid.target).closest("tr").find("td:eq(0)").text());
      data= $.grep(data, function(n,i) { return n.index != deletingIndex; });
      grid.dataSource.data(data);
    }
    var valueArray= [];
    for (var i=0; i!= data.length; i++)
    {
      if (!isDeleting && data[i].index == eGrid.model.index)
        valueArray.push(eGrid.values.value);
      else
        valueArray.push(data[i].value);
    }
    eInner.model.value= kendo.stringify(valueArray);
}

<?php
/**
 * function fieldTypeChange(eInner, valueGrid, valueNumericInput, newFieldType, updateModel, defaultValue)
 * This makes sure that the value is entered in a numeric text box if the type is Numeric for example.
 *
 * @param object eInner -- the e argument from the detail grid
 * @param KendoGrid valueGrid -- the value grid
 * @param kendoNumericTextBox valueNumericInput -- the numeric text box
 * @param string newFieldType -- What to change the field to
 * @param boolean updateModel -- if true, then set the new value in the model
 * @param string defaultValue -- if updating model, then it also means that the defaultValue is being set.
 */
?>
function fieldTypeChange(eInner, valueGrid, valueNumericInput, newFieldType, updateModel, defaultValue)
{
    switch(newFieldType)
    {
        case "digits":
          $("#valueTextDiv").hide();
          $("#valueBooleanDiv").hide();
          $("#valueNumericDiv").show();
          $("#valueListDiv").hide();

          if (updateModel)
          {
            valueNumericInput.value(defaultValue);
            eInner.model.value= defaultValue;
          }
          else
          {
            valueNumericInput.value(eInner.model.value);
          }
          valueNumericInput.focus();
          break;
        case "string":
          $("#valueTextDiv").show();
          $("#valueBooleanDiv").hide();
          $("#valueNumericDiv").hide();
          $("#valueListDiv").hide();

          if (updateModel)
          {
            $("#valueTextInput").val(defaultValue);
            eInner.model.value= defaultValue;
          }
          else
          {
            $("#valueTextInput").val(eInner.model.value);
          }
          $("#valueTextInput").focus();
          break;
        case "boolean":
          $("#valueTextDiv").hide();
          $("#valueBooleanDiv").show();
          $("#valueNumericDiv").hide();
          $("#valueListDiv").hide();

          if (updateModel)
          {
            if (defaultValue == "Y")
            {
              $("#valueBooleanInput").prop("checked", true);
              eInner.model.value= "Y";
            }
            else
            {
              $("#valueBooleanInput").prop("checked", false);
              eInner.model.value= "N";
            }
          }
          else
          {
            $("#valueBooleanInput").prop("checked", eInner.model.value == "Y");
          }
          $("#valueBooleanInput").focus();
          break;
        case "list":
          $("#valueTextDiv").hide();
          $("#valueBooleanDiv").hide();
          $("#valueNumericDiv").hide();
          $("#valueListDiv").show();

          var valueDecoded= [];
          if (updateModel)
          {
            if (defaultValue != null && defaultValue != "")
            {
              var value= defaultValue.replace(/\\"/g, '"'); // unescape here so JSON is valid.
              valueDecoded= JSON && JSON.parse(value) || $.parseJSON(value);
            }
          }
          else
          {
            if (eInner.model.value != null)
            {
              var value= eInner.model.value.replace(/\\"/g, '"'); // unescape here so JSON is valid.
              valueDecoded= JSON && JSON.parse(value) || $.parseJSON(value);
            }
          }

          var gridData= [];
          for(var i=0; i!= valueDecoded.length; i++)
          {
             gridData.push({index: i, value: valueDecoded[i]});
          }
          valueGrid.dataSource.data(gridData);
          break;
    }
}

$(document).ready(function () {
    initGrid();
});
</script>

<script id="deleteConfirmTemplate" type="text/x-kendo-template">
  <div class="k-edit-form-container">
    <div class="container_12">
        <div class="grid_12 message">Are you sure that you want to delete?
          <span class="removeDetailWarning" style="display:none;">There are <span>1</span> details that will be deleted as well.</span>
        </div>
    </div>
    <div class="k-edit-buttons k-state-default">
        <a class="k-button k-button-icontext deleteConfirmContinueBtn" href="\#">
            <span class="k-icon k-i-check"></span>
            Continue
        </a>
        <a class="k-button k-button-icontext deleteConfirmCancelBtn" href="\#">
            <span class="k-icon k-i-cancel"></span>
            Cancel
        </a>
    </div>
  </div>
</script>
<script id="pullTemplate" type="text/x-kendo-template">
  <div id="formValidatePullDownDiv" class="homecu-formStatus k-block k-error-colored" style="display:none;"></div>
  <div class="k-edit-form-container">
    <div class="container_12">
      <div id="pullDownGrid"></div>
    </div>
    <div class="k-edit-buttons k-state-default">
        <a class="k-button k-button-icontext okayBtn" href="\#">
            <span class="k-icon k-i-check"></span>
            Okay
        </a>
        <a class="k-button k-button-icontext cancelBtn" href="\#">
            <span class="k-icon k-i-cancel"></span>
            Cancel
        </a>
    </div>
  </div>
</script>
<script id="popupTemplate" type="text/x-kendo-template">
    <div id="formValidatePopupDiv" class="homecu-formStatus k-block k-error-colored" style="display:none;"></div>
    <form id="popupForm" class="popupForm" data-role="validator" novalidate>
        <div class="container_12">
            <div class="grid_12">
                 <div class="grid_4 alpha">
                     <label>Id:</label>
                 </div>
                 <div class="grid_7">
                     <div id="nameDDL"></div>
                 </div>
                 <div class="grid_1 omega">
                     &nbsp;
                 </div>
            </div>
        </div>
    </form>
</script>
<script id="popupTemplateDetail" type="text/x-kendo-template">
    <div id="formValidatePopupDetailDiv" class="homecu-formStatus k-block k-error-colored" style="display:none;"></div>
    <form id="popupFormDetail" class="popupForm" data-role="validator" novalidate>
        <div class="container_12">
            <div class="grid_12">
                 <div class="grid_4 alpha">
                     <label>Id:</label>
                 </div>
                 <div class="grid_7">
                     <div id="propertyLabel">#: property #</div>
                     <div id="propertyDDL"></div>
                 </div>
                 <div class="grid_1 omega">
                     &nbsp;
                 </div>
            </div>
            <div class="grid_12">
                 <div class="grid_4 alpha">
                     <label>Value:</label>
                 </div>
                <div class="grid_7">
                    <div id="valueTextDiv" style="display: none;">
                      <textarea class="k-input" id="valueTextInput" style="width: 100%; height: 100px" row=15 col=40></textarea>
                    </div>
                    <div id="valueBooleanDiv" style="display: none;">
                      <input type="checkbox" id="valueBooleanInput">
                    </div>
                    <div id="valueNumericDiv" style="display:none;">
                      <input id="valueNumericInput">
                    </div>
                    <div id="valueListDiv" style="display: none;">
                      <div id="valueGrid" style="width: 100%"></div>
                    </div>
                </div>
                 <div class="grid_1 omega">
                    &nbsp;
                 </div>
            </div>
        </div>
    </form>
</script>
<script id="pullInNoTemplates" type="text/x-kendo-template">
  <div class="k-edit-form-container">
    <div class="container_12">
        <div class="grid_12 message">There are no templates to add.</div>
    </div>
    <div class="k-edit-buttons k-state-default">
        <a class="k-button k-button-icontext okayBtn" href="\#">
            <span class="k-icon k-i-check"></span>
            Okay
        </a>
    </div>
  </div>
</script>

<?php printMonitorPageMiddle("CU trust detail for $cu", null, true); ?>

        <div id='hideSubmitWait' style='position:relative; left:-2000px;top:-2000px;'>
          <div id='homecuSubmitWait' class='k-block' >
            <div class='k-loading-image'></div>
          </div>
        </div>
        <input type="hidden" id="invalidRequestClientSide">
        <input type="hidden" id="invalidRequestServerSide">
        <div class="container_12">
            <div class="grid_12">
            <div class="grid_7 alpha omega">
                  <div id="sqlOutput"></div>
            </div>
            </div>
            <div class="grid_12">
            <div class="grid_7 alpha omega">
                  <div id="formValidateMainDiv" class="k-block k-error-colored" style="display:none;"></div>
            </div>
            </div>
            <div class="grid_12">
        <div class="grid_7 alpha omega">
                  <div id="grid" style="width:100%"></div>
        </div>
            </div>
        </div>

<?php printMonitorPageBottom(); ?>