commonJsFunctions.i

<?php
/* File: commonJsFunctions.php
 * Purpose: Contains common Javascript functions but I wanted to not have to call to an external JS file every time that I needed one of these functions.
 * This also allows some PHP variables directly into these functions if necessary.
 * SPB-- Created to reduce copying of code.
 */

function getCancelFunction() {
/* This will cancel the popup editor.  It clears out the invalid request variables and then cancels the row.  There was something funky going on so that is why the cancelRow has to be called manually. */
?>
function cancel(e)
{
    $("#invalidRequestClientSide").val(false);
    $("#invalidRequestServerSide").val(false);
    e.sender.cancelRow();
    e.sender.refresh();
    e.preventDefault();
    return false;
}
<?php }

function getParseCrudGridFunction() {
/* This function is used in most grids in the dataSource.schema.parse function slot.  I organized all my CRUD calls to return a sql array (if not production), an error array,
 * the actual data, and an operation parameter that is: read, update, add, or delete.  This function parses that and shows errors and SQL.
 * (Otherwise, Kendo will treat the whole data as data for the grid.)  It also sets the invalid request parameter.
 * This parameter is useful later in preventing the window from closing when there actually is an error.
 * Parameters: Object data-- data from CRUD AJAX call.
*/
?>
function parseCrudGrid(data, isDetail)
{
    var statusField= typeof(isDetail) != "undefined" && isDetail ? "formValidatePopupDetailDiv" : "formValidatePopupDiv";
    var errorLocation= data.operation == "update" || data.operation == "add" ? statusField : "formValidateMainDiv";
    $("#invalidRequestServerSide").val(errorsAreShown(data, errorLocation));

    return data.record;
}
<?php }

function getSetupValidatorInGridFunction() {
/* For most all editable grids, this is called the first line in the edit function.  It has multiple purposes. 1) Adds the custom HomeCU validator for the popup editor.
 * 2) Since, anytime "required" and several other attributes are added to the HTML, the default validator fires so there is logic to get around that.
 * 3) The window of the popup is altered to only close when the data is valid (and user doesn't click on the cancel button).  Data came become invalid through the client side or the server side.
 * Parameters: Object e-- generic event parameter
*/
?>
function setupValidatorInGrid(e, isDetail, validatorDefinition, stillHomecuValidator)
{
    if ($("#invalidRequestClientSide").length == 0)
        $("body").append("<input type='hidden' id='invalidRequestClientSide'>");
    if ($("#invalidRequestServerSide").length == 0)
        $("body").append("<input type='hidden' id='invalidRequestServerSide'>");
    var form= "popupForm";
    var statusField= "formValidatePopupDiv";
    if (typeof(isDetail) != "undefined" && isDetail)
    {
        form= "popupFormDetail";
        statusField= "formValidatePopupDetailDiv";
    }

    if (typeof(validatorDefinition) == "undefined")
        $.homecuValidator.setup({formValidate: form, formErrorTitle: 'The following errors were detected:',
        formStatusField: statusField});
    else if (stillHomecuValidator != null && stillHomecuValidator)
        $.homecuValidator.setup(validatorDefinition);
    else
        $("#"+form).kendoValidator(validatorDefinition);

    // Always return valid (To get around Kendo autovalidate).
    e.sender.editable.validatable.validate = function () { return true; };
    e.sender.editable.validatable.validateInput = function(input) { return true; };

    // To always force saves
    e.model.dirty= true;

    $("#invalidRequestClientSide").val(false);
    $("#invalidRequestServerSide").val(false);

    var cancelClicked= false;

    $(".k-popup-edit-form .k-grid-cancel").click(function () {
        cancelClicked= true;
    });

    $(".k-popup-edit-form .k-grid-update").click(function () {
        cancelClicked= false;
        if (!$(this).hasClass("k-state-disabled"))
        {
            $(this).addClass("k-state-disabled");
        }
        else
        {
            e.preventDefault();
            return false;
        }
    });

    var window = e.sender.editable.element.data("kendoWindow");
    window.bind("close", function(eWindow){
        var invalidRequestClientSide= $("#invalidRequestClientSide").val() == "true";
        var invalidRequestServerSide= $("#invalidRequestServerSide").val() == "true";
        if (!cancelClicked && (invalidRequestClientSide || invalidRequestServerSide))
        {
            eWindow.preventDefault();
            $(".k-popup-edit-form .k-grid-update").removeClass("k-state-disabled");
            return false;
        }
    });
}
<?php }

function getUseValidatorInGridFunction() {
/* For most all editable grids, this is called in the save function.  It calls the validate function on the validator and if that returns any error messages, then it prevents the window from closing.
 * Parameters: Object e-- generic event parameter
*/
?>
function useValidatorInGrid(e, isDetail, useCommonValidator)
{
    if ($("#invalidRequestClientSide").length == 0)
        $("body").append("<input type='hidden' id='invalidRequestClientSide'>");
    if ($("#invalidRequestServerSide").length == 0)
        $("body").append("<input type='hidden' id='invalidRequestServerSide'>");
    var statusField= typeof(isDetail) != "undefined" && isDetail ? "formValidatePopupDetailDiv" : "formValidatePopupDiv";

    if (typeof(useCommonValidator) == "undefined" || !useCommonValidator)
        $.homecuValidator.validate();
    else
        $("#"+statusField).data("kendoValidator").validate();
    if ($("#" + statusField).is(":visible"))
    {
        $("#invalidRequestClientSide").val(true);
        e.preventDefault();
        $(".k-popup-edit-form .k-grid-update").removeClass("k-state-disabled");
        hideWaitWindow();
        return false;
    }
    else $("#invalidRequestClientSide").val(false);
}
<?php }

function getEscapeHTMLFunction() {
/* Simple function to escape HTML code e.g. "<b>Hi</b>" will show up literally, rather than a bolded "Hi."
 * Parameters: String s-- the string to escape. */
?>
function escapeHTML(s)
{
    if (s == null || (s+"").trim() == "")
        return "";
    return s.replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}
<?php }

function getUnescapeHTMLFunction() {
/* Reverse of previous function.
 * Parameters: String s-- the string to unescape. */
 ?>
function unescapeHTML(s)
{
    if (s == null || (s+"").trim() == "")
        return "";
    return s.replace(/&amp;/g, '&')
            .replace(/&quot;/g, '"')
            .replace(/&lt;/g, '<')
            .replace(/&gt;/g, '>');
}
<?php }

function getShowSQLFunction($showSQL) {
/* Function is called in the parseCrudGrid function which is used in nearly every grid.  For any other grid, this function is called directly.
 * In the inc.php, there is a boolean for showing SQL.  If it is set, then #showSQL will be 1 and any AJAX calls will also return an array of SQL used.
 * This function will separate the SQL by a line in the DIV provided for showing SQL.
 * Parameters: Object data-- full data from any AJAX call, Boolean shouldAppend-- if set to true, SQL will be added on the end of the DIV, rather than replace a previous AJAX call's SQL. */
 ?>
function showSQL(data, shouldAppend)
{
    <?php if ($showSQL)
    { ?>
        if (typeof shouldAppend == "undefined" || !shouldAppend)
            $("#sqlOutput").empty();
        else
            $("#sqlOutput").append("<br /><br />");
        var first= true;

        if (typeof(data.sql) == "undefined")
            $("#sqlOutput").append("(No SQL available)");
        else
            for (var i=0; i!= data.sql.length; i++)
            {
                if (!first)
                    $("#sqlOutput").append("<br /><br />");
                $("#sqlOutput").append(escapeHTML(data.sql[i]));
                first= false;
            }
    <?php } ?>
}
<?php }

function getErrorsAreShownFunction() {
/* Function is called in the parseCrudGrid function which is used in nearly every grid.  For any other grid, this function is called directly.
 * It mimics the same structure as the validator so the invalid client side messages and invalid server side messages look the same.  Each error message is appended as a list item.
 * Function returns a boolean.  True: there are errors; False: no errors.
 * Parameters: Object data-- full data from any AJAX call, String outputDiv-- specifies the error DIV (there is one for the edit popup and one for the main page),
 * Boolean shouldAppend-- if set to true, the errors are appended to the end of the error DIV, rather than overwriting the whole error DIV.
 */
 ?>
function errorsAreShown(data, outputDiv, shouldAppend, notId)
{
    var selector= notId == null ? "#"+outputDiv : outputDiv;
    if (data.error.length > 0)
    {
        if (typeof shouldAppend == "undefined" || !shouldAppend)
            $(selector).empty();
        $(selector).append("<p>The following errors were detected:</p><ul></ul>");
        for (var i=0; i!= data.error.length; i++)
            $(selector+" ul").append("<li>"+escapeHTML(data.error[i])+"</li>");
        $(selector).show();
    }
    else
    {
        $(selector).empty();
        $(selector).hide();
    }
    return data.error.length > 0;
}
<?php }

function getAddMinifiedActionStyleFunction() {
/* Adds a special class for formatting.  If using tooltips, then tooltips are created.
 * Prerequisites: On grid, need: toolbar: [{name: "create", text: ""}] and in the first of the columns: {title: "Action", columns: [{command: [{name: "edit", text: ""},
 *   {name: "customDelete", text: "", iconClass: "k-icon k-delete"}], width: "8%"}]},
 * Parameters: String gridId-- name of the grid, Boolean useTooltips-- if yes, create them!
 */
?>
function addMinifiedActionStyle(gridElement, useTooltips, additionalTooltips)
{
    var position= "left";
    var showAfter= 2000; // 2 seconds
    var tooltipHandles= [];

    var tooltips= [{filter: ".k-grid-add", content: "Add new record"},
        {filter: ".k-grid-customDelete", content: "Delete"},
        {filter: ".k-grid-edit", content: "Edit"}
    ];

    if (typeof(additionalTooltips) != "undefined" && additionalTooltips.length > 0)
    {
        tooltips= tooltips.concat(additionalTooltips);
    }

    // Setup tooltips (default)
    if (typeof(useTooltips) == "undefined" || useTooltips)
    {
        // Add class for CSS
        $(gridElement).addClass("minifiedActionGrid");

        for(var i=0; i!= tooltips.length; i++)
        {
            tooltipHandles.push($(gridElement).kendoTooltip({
                filter: tooltips[i].filter,
                content: tooltips[i].content,
                position: position,
                showAfter: showAfter,
                callout: false
            }).data("kendoTooltip"));
        }
    }
    else
        $(gridElement).addClass("actionGrid");
    return tooltipHandles;
}
<?php }

function getAddDuplicateErrorFunction() {
/* Type of custom error validation.  It was the ONLY type and then I had to separate it out.
 */
?>
function addDuplicateError(e, field, onSave)
{
    addError(e,field, onSave, "duplicate");
}
<?php }

function getAddErrorFunction() {
/* Goal is to mimic the validation already in place.  On field blur, invalid message will show up.  On a save, list of invalid messages will show up on the top.
 * So, the first part is to set up the (!) invalid error message.  The tooltip will not change, however, if there is more validation on that field.  It will show the same as previously.
 * Therefore, the second part is to change that.  However, Kendo doesn't label tooltips.  There will be a tooltip per input with a validation so I cannot assume that it is the first tooltip there is.
 * So, I iterate through the tooltips, find content that fits the validation messages for any validation the field has e.g. required, homecuDateGT, etc. Once I find that, I add a class to that tooltip.
 * So, I check for that tooltip class and once found, I change the value of the tooltip.  Finally, if the onSave is true, then the error message needs to be appended to the top.
 * Parameters: Object e-- generic event parameter, String field-- name of the input, Boolean onSave-- two modes: on blur and onSave, the onSave option adds in the appension to the top,
 * String errorType-- specifies where to get the error message.  Script is looking for the data-{errorType}-msg attribute of the input field.
 */
 ?>
function addError(e, field, onSave, errorType, formValidateDiv, byId)
{
    // Construct invalid message (!) on the field.
   var input= byId != null && byId ? "#" + field + "Input" : "input[name='"+field+"']";
   var invalidMsgDiv= $(".k-invalid-msg[data-for='"+ field+ "']");
   var invalidMsg= $(input).attr("data-"+ errorType +"-msg");
   $(invalidMsgDiv).addClass("k-widget k-tooltip k-tooltip-validation");
   $(invalidMsgDiv).attr("data-role", "alert");
   $(invalidMsgDiv).attr("title", invalidMsg);
   $(invalidMsgDiv).html("<span class='k-icon k-warning'></span>");
   $(invalidMsgDiv).show();

   var div= typeof(formValidateDiv) == "undefined" ? "formValidatePopupDiv" : formValidateDiv;

   // If class is not already found, then I will need to iterate through the tooltips and add the class.
   if ($(".k-animation-container.tooltipFor_"+field).length == 0)
   {
       // Find all possible messages.
       var possibleMsgs= [];
       $(input).each(function (e) {
            $.each(this.attributes, function(i, attrib){
               var name = attrib.name.trim();
               var value = attrib.value.trim();

               if (name.match(/^data-\w+-msg$/))
                   possibleMsgs.push(value);
            });
       });

       // Search for possible messages and if there is a match, then add a class to the first one and remove the rest.
       var found= false;
       $(".k-animation-container .k-tooltip-content").each(function (e) {
           var value= $(this).text().trim();
           if ($.grep(possibleMsgs, function(n, i) {return n == value; }).length != 0)
           {
               if (!found)
               {
                    $(this).closest(".k-animation-container").addClass("tooltipFor_"+field);
                    found= true;
               }
               else $(this).closest(".k-animation-container").remove();
           }
       });
   }

   // Now, if the class is found, then I need to change the tooltip to the right value.  (If it isn't found, then Kendo will initialize a tooltip for the invalid-msg which is fine behavior.)
   if ($(".k-animation-container.tooltipFor_"+field).length != 0)
   {
        var previousMsg= $(".k-animation-container.tooltipFor_"+field).text();
        if (previousMsg != invalidMsgDiv)
        $("#" + div+ " li:contains('"+ previousMsg + "')").each(function (e) {
            if ($(this).text().trim() == previousMsg) // just because it contains the message doesn't mean that it is the one.
                $(this).addClass("removeLi");
        });
        $(".k-animation-container.tooltipFor_"+field+" .k-tooltip-content").text(invalidMsg);
   }

   // It will manually append error message to the end of the error DIV.  Currently that is set to formValidatePopupDiv but if necessary, that can move into a variable.
   if (onSave)
   {
       $("#" + div + " .removeLi").remove();
        if ($("#" + div + " #"+ errorType +"Error").length != 0)
            $("#" + div + " #"+ errorType +"Error").text(invalidMsg);
        else if ($("#" + div + " ul").length != 0)
            $("#" + div + " ul").append("<li id='"+ errorType +"Error'>"+invalidMsg+"</li>");
        else $("#" + div).html("<p>The following errors were detected:</p><ul><li id='" + errorType +"Error'>"+invalidMsg+"</li></ul>");
        $("#" + div).show();
        $("#invalidRequestClientSide").val(true);
        e.preventDefault();
        $(".k-popup-edit-form .k-grid-update").removeClass("k-state-disabled");
        hideWaitWindow();
        return false;
   }
}
<?php }

function getSetupDeleteConfirmDialogFunction() {
/* For most all editable grids, this is called in the dataBound.  1) Creates a kendoWindow from a template and placeholder found in the precontent.html file and set visibility to false.
 * 2) Sets up the click events for the button in the template.  The AJAX call is sent as a parameter in the function.
 * 3) Per delete button in the grid, adds logic to open the kendoWindow positionally relative to the delete button.
 * Parameters: String deleteOperation-- this is the AJAX call e.g. main.php?mainAction=data&operation={deleteOperation},
 * String gridName-- name of the grid, String gridId-- name of the primary id of the grid.
 */
?>
var gridIdToDelete= null;
function setupDeleteConfirmDialog(deleteOperation, gridElement, gridId, dialogWindowSelector, runWhenDeletedFunc, runWhenOpenedFunc, additionalParameters)
{
    var grid= $(gridElement).data("kendoGrid");
    var deleteConfirm= $("#"+dialogWindowSelector).data("kendoWindow");

    if (deleteConfirm == null)
    {
        deleteConfirm= $("<div id='"+dialogWindowSelector+"'></div>").kendoWindow({
            content: {template: $("#deleteConfirmTemplate").html()},
            visible: false,
            modal: true,
            title: "Confirm deletion",
            width: 400,
            height: 125,
            resizable: false,
            open: function() {
                if (window.activeWindows != null)
                    window.activeWindow.push(this);
            },
            close: function() {
                if (window.activeWindows != null)
                    window.activeWindows.pop();
            }
        }).data("kendoWindow");

        $("#"+dialogWindowSelector).closest(".k-window").addClass("k-windowDelete");

        var continueBtn= $("#"+dialogWindowSelector).find(".deleteConfirmContinueBtn");
        $(continueBtn).click(function () {
            var parameters= typeof(additionalParameters) == "object" ? additionalParameters : {};
            parameters[gridId]= gridIdToDelete;
            showWaitWindow();
            $.post(deleteOperation, parameters,
            function (data){
                hideWaitWindow();

                // If no errors, then remove record from the grid
                if (!errorsAreShown(data, "formValidateMainDiv"))
                {
                    var data= grid.dataSource.data().slice(0);
                    data= $.grep(data, function(n,i) { return n[gridId] != gridIdToDelete; });
                    grid.dataSource.data(data);

                    if (typeof(runWhenDeletedFunc) == "function")
                        (runWhenDeletedFunc)();
                }
            });
            deleteConfirm.close();
            return false;
        });

        var cancelBtn= $("#"+dialogWindowSelector).find(".deleteConfirmCancelBtn");
        $(cancelBtn).click(function () {
            deleteConfirm.close();
            return false;
        });
    }

    $(gridElement).find(".k-grid-customDelete").click(function(e){
        var tr= $(e.target).closest("tr");
        gridIdToDelete= grid.dataItem(tr)[gridId];

        deleteConfirm.open();
        if (window.activeWindows != null)
            window.activeWindows.push(deleteConfirm);

        if (typeof(runWhenOpenedFunc) == "function")
            (runWhenOpenedFunc)(e);
        return false;
    });
}
<?php }

function getSetupDeleteConfirmDialogFunction_v2($gridId, $gridPrimary, $gridError, $deleteDialogId, $deleteOperation= null, $template= null)
{ ?>
    function initDelete()
    {
        $("<div id='<?php echo $deleteDialogId; ?>'></div>").appendTo("body");

        $("#<?php echo $gridId; ?>").on("click", ".k-grid-custdelete", function() {
            var deleteDialog= $("#<?php echo $deleteDialogId; ?>").data("kendoWindow");
            var tr= $(this).closest("tr");
            $("#<?php echo $deleteDialogId; ?>").data("tr", tr);

            if (deleteDialog == null)
            {
                <?php if (isset($template)) {?>
                    var template= '<?php echo $template; ?>';
                <?php } else { ?>
                var template= '<div class="k-edit-form-container"><div class="container_12">\
                    <div class="grid_12 message">Are you sure that you want to delete?</div>\
                    <div class="k-edit-buttons k-state-default"><a class="k-button k-button-icontext deleteConfirmContinueBtn" href="\\#"><span class="k-icon k-update"></span>\
                     Continue</a><a class="k-button k-button-icontext deleteConfirmCancelBtn" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a> </div></div>';
                <?php } ?>

                deleteDialog= $("#<?php echo $deleteDialogId; ?>").kendoWindow({
                    content: {template: template},
                    visible: false,
                    modal: true,
                    title: "Confirm deletion",
                    width: 400,
                    height: 125,
                    resizable: false,
                    close: function() {
                        if (window.activeWindows != null)
                            window.activeWindows.pop();
                    }
                }).data("kendoWindow");

                $("#<?php echo $deleteDialogId; ?>").closest(".k-window").css({<?php printTopCenterCss(200, "", "jsGuts"); ?>});
            }

            deleteDialog.open();
            if (window.activeWindows != null)
                window.activeWindows.push(deleteDialog);
        });

        $("#<?php echo $deleteDialogId; ?>").on("click", ".deleteConfirmContinueBtn", function() {
            var tr= $("#<?php echo $deleteDialogId; ?>").data("tr");
            var grid= $("#<?php echo $gridId; ?>").data("kendoGrid");
            var primary= grid.dataItem(tr).<?php echo $gridPrimary; ?>;
            <?php if (isset($deleteOperation)) { ?>
            showWaitWindow();
            $.post("<?php echo $deleteOperation; ?>", {<?php echo $gridPrimary; ?>: primary}, function(data) {
                hideWaitWindow();
                if (!errorsAreShown(data, "<?php echo $gridError; ?>"))
                {
                    grid.removeRow(tr);
                }
            });
            <?php } else { ?>
                grid.removeRow(tr);
            <?php } ?>
            $("#<?php echo $deleteDialogId; ?>").data("kendoWindow").close();
            return false;
        });

        $("#<?php echo $deleteDialogId; ?>").on("click", ".deleteConfirmCancelBtn", function() {
            $("#<?php echo $deleteDialogId; ?>").data("kendoWindow").close();
            return false;
        });
    }
<?php }

function getShowWaitFunctions() {
/* Plagiarized from Mark.  These functions open up a Kendo window with the Kendo loading symbol and then close it.
 */
?>

function showWaitWindow()
{
    if ($("#hideSubmitWait").length == 0)
    {
        $("body").append("<div id='hideSubmitWait' style='position:relative; left:-2000px;top:-2000px;'></div>");
        $("#hideSubmitWait").append("<div id='homecuSubmitWait' class='k-block'></div>");
        $("#homecuSubmitWait").append("<div class='k-loading-image'></div>");
    }

    var submitWaitWindow = $("#homecuSubmitWait").data('kendoWindow');
    if (submitWaitWindow == null)
      submitWaitWindow= $("#homecuSubmitWait").kendoWindow({
          title: false,
          visible:false,
          resizable: false,
          modal: true,
          height:55,
          minHeight:48,
          width:54,
          minWidth:48
      }).data("kendoWindow");
    submitWaitWindow.center().open();
}

function hideWaitWindow()
{
    if ($("#hideSubmitWait").length == 0)
    {
        $("body").append("<div id='hideSubmitWait' style='position:relative; left:-2000px;top:-2000px;'></div>");
        $("#hideSubmitWait").append("<div id='homecuSubmitWait' class='k-block'></div>");
        $("#homecuSubmitWait").append("<div class='k-loading-image'></div>");
    }

    var submitWaitWindow = $("#homecuSubmitWait").data('kendoWindow');
    if (submitWaitWindow != null)
        submitWaitWindow.close();
}

<?php }
function getContextMenuForSingleLevelGrid() {

?>

function getFullContextMenuSingle(gridSelector, contextMenuSelector, deleteDialogSelector, gridId, deleteUrl)
{
    var fullContextMenu= this;
    this.contextMenuSelector= contextMenuSelector;
    this.contextMenu= null;
    this.gridSelector= gridSelector;
    this.grid= $("#" + gridSelector).data("kendoGrid");
    this.deleteUrl= deleteUrl;
    this.gridId= gridId;
    this.deleteDialogSelector= deleteDialogSelector;
    this.openFunc= null;
    this.selectFunc= null;

    this.gridCancel= function ()
    {
        var rows= $("#" + this.gridSelector +" .k-grid-content tr");
        var grid= this.grid;

        $(rows).off("click");
        $(rows).on("click", function () {
          grid.editRow($(this));
        });

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

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

    this.gridDatabound= function (initialized)
    {
        var rows= $("#" + this.gridSelector +" .k-grid-content tr");
        var grid= this.grid;

        $(rows).on("click", function () {
          grid.editRow($(this));
        });

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

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

        this.initContextMenu();
    }

    this.addFunctions= function(openFunc, selectFunc)
    {
        this.openFunc= openFunc;
        this.selectFunc= selectFunc;
    }

    this.initContextMenu= function ()
    {
        this.contextMenu= $("#" + this.contextMenuSelector).data("kendoContextMenu");
        if (this.contextMenu == null)
        {
            var dataItemForDelete= null;
            var deleteConfirm= $("<div id='" + this.deleteDialogSelector + "'></div>").kendoWindow({
                content: {template: $("#deleteConfirmTemplate").html()},
                visible: false,
                modal: true,
                title: "Confirm deletion",
                width: 400,
                height: 125,
                resizable: false,
                close: function() {
                    if (window.activeWindows != null)
                        window.activeWindows.pop();
                }
            }).data("kendoWindow");

            $("#" + this.deleteDialogSelector).closest(".k-window.k-widget").css({<?php printTopCenterCss(200, "", "jsGuts"); ?>})

            var gridId= this.gridId;
            var deleteUrl= this.deleteUrl;
            var grid= this.grid;

            $("#" + this.deleteDialogSelector + " .deleteConfirmContinueBtn").click(function () {
                var parameters= {};
                parameters[gridId]= dataItemForDelete[gridId];
                showWaitWindow();
                $.post(deleteUrl, parameters, function (data){
                    hideWaitWindow();
                    showSQL(data);

                    // If no errors, then remove record from the grid
                    if (!errorsAreShown(data, "formValidateMainDiv"))
                    {
                        var data= grid.dataSource.data().slice(0);
                        data= $.grep(data, function(n,i) { return n[gridId] != dataItemForDelete[gridId]; });
                        grid.dataSource.data(data);
                    }
                });
                deleteConfirm.close();
                return false;
            });

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

            var openFunc= this.openFunc;
            var selectFunc= this.selectFunc;
            this.contextMenu= $("<div id='" + this.contextMenuSelector + "'></div>").kendoContextMenu({
                target: "#" + this.gridSelector,
                filter: ".k-grid-content tr",
                alignToAnchor: true,
                orientation: "vertical",
                popupCollision: false,
                open: function (e)
                {
                    this.remove("li");

                    var options= [{text: "Edit", cssClass: "editLi"}, {text: "Delete", cssClass: "deleteLi"}];
                    var tr= $(e.event.target).closest("tr"); // If set at the tr level, it returns itself.  If set at the td level, it return its parent.
                    var dataItem= grid.dataItem($(tr));

                    if (typeof(openFunc) == "function")
                        (openFunc)(options, dataItem);
                    this.append(options);
                },
                select: function (e)
                {
                  var item= $(e.item);
                  var tr= $(e.target).closest("tr"); // If set at the tr level, it returns itself.  If set at the td level, it return its parent.
                  var dataItem= grid.dataItem($(tr));

                  if ($(item).hasClass("editLi"))
                  {
                      grid.editRow($(tr));
                  }
                  else if ($(item).hasClass("deleteLi"))
                  {
                    dataItemForDelete= dataItem;
                    deleteConfirm.open();
                    if (window.activeWindows != null)
                        window.activeWindows.push(deleteConfirm);
                  }

                  if (typeof(selectFunc) == "function")
                    (selectFunc)(item, dataItem);
                }
          }).data("kendoContextMenu");
        }
    }
}

<?php }
function getContextMenuForDoubleLevelGrid() {

?>

function getFullContextMenu(grid, contextMenuId, masterId, detailId)
{
    var fullContextMenu= this;

    this.contextMenu= null;
    this.grid= grid;
    this.contextMenuId= contextMenuId;
    this.masterId= masterId;
    this.detailId= detailId;
    this.detailGrids= [];
    this.limitFromDatabound= [];
    this.getDetailData= null;
    this.dataFile= null;
    this.masterDeleteOperation= null;
    this.detailDeleteOperation= null;
    this.postDeleteFunc= null;
    this.getNumDetailsFunc= null;

    this.setDeleteOptions= function(dataFile, masterDeleteOperation, detailDeleteOperation, postDeleteFunc, getNumDetailsFunc)
    {
        this.dataFile= dataFile;
        this.masterDeleteOperation= masterDeleteOperation;
        this.detailDeleteOperation= detailDeleteOperation;
        this.postDeleteFunc= postDeleteFunc;
        this.getNumDetailsFunc= getNumDetailsFunc;
    }

    this.setOptionFuncs= function(masterOptionFunc, detailOptionFunc, additionalSelectOptionFunc)
    {
        this.masterOptionFunc= masterOptionFunc;
        this.detailOptionFunc= detailOptionFunc;
        this.additionalSelectOptionFunc= additionalSelectOptionFunc;
    }

    this.setLimitFromDatabound= function(limitFromDatabound)
    {
        this.limitFromDatabound= limitFromDatabound;
    }

    this.gridCancel= function (e, grid, isMaster)
    {
        var rows= null;
        if (isMaster)
        {
            rows= $(grid.tbody).find("tr.k-master-row");

            if (this.limitFromDatabound.indexOf("click") == -1)
            {
                // Put it at the td level because expanding/collapsing the master row should not open up the edit.
                $(rows).find("[role='gridcell']").off("click");
                $(rows).find("[role='gridcell']").on("click", function () {
                  grid.editRow($(this).parent());
                });
            }

        }
        else
        {
            rows= $(grid.tbody).find("tr");

            if (this.limitFromDatabound.indexOf("click") == -1)
            {
                $(rows).off("click");
                $(rows).on("click", function () {
                  grid.editRow($(this));
                });
            }
        }

        if (this.limitFromDatabound.indexOf("mouseenter") == -1)
        {
            $(rows).off("mouseenter");
            $(rows).on("mouseenter", function () {
              $(this).addClass("k-state-hover");
            });
        }

        if (this.limitFromDatabound.indexOf("mouseleave") == -1)
        {
            $(rows).off("mouseleave");
            $(rows).on("mouseleave", function () {
              $(this).removeClass("k-state-hover");
            });
        }

    }

    this.gridDatabound= function (isMaster, initialized, thisGrid)
    {
        var rows= null;
        if (isMaster)
        {
            rows= $(thisGrid.tbody).find("tr.k-master-row");
            if (!initialized)
            {
              // Make sure that all detail grids are initialized for "add subtask option"
              $(rows).each(function() {
                 thisGrid.expandRow($(this));
                 thisGrid.collapseRow($(this));
              });
            }
            this.initContextMenu();

            if (this.limitFromDatabound.indexOf("click") == -1)
                // Put it at the td level because expanding/collapsing the master row should not open up the edit.
                $(rows).find("[role='gridcell']").on("click", function () {
                  thisGrid.editRow($(this).parent());
                });
        }
        else
        {
            rows= $(thisGrid.tbody).find("tr");

            if (this.limitFromDatabound.indexOf("click") == -1)
                $(rows).on("click", function () {
                  thisGrid.editRow($(this));
                });
        }

        if (this.limitFromDatabound.indexOf("mouseenter") == -1)
            $(rows).on("mouseenter", function () {
              $(this).addClass("k-state-hover");
              rowForMenu= $(this);
            });

        if (this.limitFromDatabound.indexOf("mouseleave") == -1)
            $(rows).on("mouseleave", function () {
              $(this).removeClass("k-state-hover");
            });
    }

    this.addToDetailGrid= function (detailGridId, detailGrid)
    {
        this.detailGrids[detailGridId]= detailGrid;
    }

    this.initContextMenu= function ()
    {
        contextMenu= $("#" + contextMenuId).data("kendoContextMenu");
        if (contextMenu == null)
        {
            var dataItemForDelete= null;
            var gridForDelete= null;

            // Since these were added later, apparent the variables are not found in this context without reinitialization.
            var detailData= this.detailData;
            var dataFile= this.dataFile;
            var masterDeleteOperation= this.masterDeleteOperation;
            var detailDeleteOperation= this.detailDeleteOperation;
            var postDeleteFunc= this.postDeleteFunc;

            var deleteConfirm= $("<div id='deleteDialog'></div>").kendoWindow({
                content: {template: $("#deleteConfirmTemplate").html()},
                visible: false,
                modal: true,
                title: "Confirm deletion",
                width: 400,
                height: 125,
                resizable: false,
                close: function() {
                    if (window.activeWindows != null)
                        window.activeWindows.pop();
                }
            }).data("kendoWindow");

            $("#deleteDialog").closest(".k-window.k-widget").css({<?php printTopCenterCss(200, "", "jsGuts"); ?> });

            $("#deleteDialog .deleteConfirmContinueBtn").click(function () {
                var isMaster= $(gridForDelete.tbody).find("tr.k-master-row").length > 0;
                var url= dataFile + "?operation=";
                var parameters= {};
                parameters[masterId]= dataItemForDelete[masterId];
                if (isMaster)
                {
                    url+= masterDeleteOperation;
                }
                else
                {
                    url+= detailDeleteOperation;
                    parameters[detailId]= dataItemForDelete[detailId];
                }
                showWaitWindow();
                $.post(url, parameters, function (data){
                    hideWaitWindow();
                    showSQL(data);

                    // If no errors, then remove record from the grid
                    if (!errorsAreShown(data, "formValidateMainDiv"))
                    {
                        if (typeof(postDeleteFunc) == "function")
                            (postDeleteFunc)(isMaster, dataItemForDelete);
                    }
                });
                deleteConfirm.close();
                return false;
            });

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

            var detailOptionFunc= this.detailOptionFunc;
            var masterOptionFunc= this.masterOptionFunc;
            var additionalSelectOptionFunc= this.additionalSelectOptionFunc;
            var getNumDetailsFunc= this.getNumDetailsFunc;

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

                    this.remove("li");

                    var options= [];
                    var grid= $(e.event.target).closest(".k-grid").data("kendoGrid");
                    var tr= $(e.event.target).closest("tr"); // If set at the tr level, it returns itself.  If set at the td level, it return its parent.
                    var dataItem= grid.dataItem($(tr));

                    if ($(grid.tbody).find(".k-master-row").length != 0)
                    {
                        if (typeof(masterOptionFunc) != "function")
                            options= [{text: "Edit", cssClass: "editLi"}, {text: "Delete", cssClass: "deleteLi"}, {text: "Add detail", cssClass: "addDetailLi"}];
                        else
                            (masterOptionFunc)(options, dataItem);
                    }
                    else
                    {
                        if (typeof(detailOptionFunc) != "function")
                            options= [{text: "Edit", cssClass: "editLi"}, {text: "Delete", cssClass: "deleteLi"}];
                        else
                            (detailOptionFunc)(options, dataItem);
                    }

                    this.append(options);
                },
                select: function (e)
                {
                  var item= $(e.item);
                  var tr= $(e.target).closest("tr"); // If set at the tr level, it returns itself.  If set at the td level, it return its parent.
                  var grid= $(e.target).closest(".k-grid").data("kendoGrid");
                  var dataItem= grid.dataItem($(tr));

                  if ($(item).hasClass("editLi"))
                  {
                      grid.editRow($(tr));
                  }
                  else if ($(item).hasClass("deleteLi"))
                  {
                    var numDetails= $(e.target).closest(".detailGrid") > 0 ? 0 : (typeof(getNumDetailsFunc) == "function" ? (getNumDetailsFunc)(dataItem) : 0);
                    if (numDetails > 0)
                    {
                        $("#detailDeleteMsg").show();
                        $("#detailDeleteMsg span").text(numDetails);
                    }
                    else
                    {
                        $("#detailDeleteMsg").hide();
                    }
                    dataItemForDelete= dataItem;
                    gridForDelete= grid;
                    deleteConfirm.open();
                    if (window.activeWindows != null)
                        window.activeWindows.push(deleteConfirm);
                  }
                  else if ($(item).hasClass("addDetailLi"))
                  {
                    fullContextMenu.detailGrids[dataItem[masterId]].addRow();
                  }

                  if (typeof(additionalSelectOptionFunc) == "function")
                    (additionalSelectOptionFunc)(item, tr, grid, dataItem);
                }
          }).data("kendoContextMenu");
        }
    }
}
<?php }

function printDeleteTemplate() {
?>
    <script id="deleteConfirmTemplate" type="text/x-kendo-template">
      <div class="k-edit-form-container">
        <div class="container_12">
            <div class="grid_12 message">Are you sure that you want to delete? <span id="detailDeleteMsg" style="display:none;">This will also delete <span>1</span> detail(s) as well.</div>
        </div>
        <div class="k-edit-buttons k-state-default">
            <a class="k-button k-button-icontext deleteConfirmContinueBtn" href="\#">
                <span class="k-icon k-update"></span>
                Continue
            </a>
            <a class="k-button k-button-icontext deleteConfirmCancelBtn" href="\#">
                <span class="k-icon k-cancel"></span>
                Cancel
            </a>
        </div>
      </div>
    </script>
<?php }

function printShuttleGrid($shuttleDiv, $idColumn= "id", $shortColumn= "short", $longColumn= "long", $selectedColumn= "selected", $prevSelectedColumn= "prevSelected")
{
    $schema= "schema: {\n\tmodel: {\n\t\tid: \"$idColumn\",\n\t\tfields: {\n\t\t\t$idColumn: {type: \"string\"},\n\t\t\t$shortColumn: {type: \"string\"},\n\t\t\t$longColumn: {type: \"string\"},"
    . "\n\t\t\t$selectedColumn: {type: \"boolean\"},\n\t\t\t$prevSelectedColumn: {type: \"boolean\"}\n\t\t}\n\t}\n}";
    ?>
    function initShuttleGrid(shuttleData)
    {
        $("#<?php echo $shuttleDiv;?>").html("<div class='grid_12 dontPrint'>\n<div class='grid_7 alpha'>\n<a href='#' class='k-button allAvailable'>Select All</a>\n</div>\n"
            + "<div class='grid_1'>\n&nbsp;</div>\n<div class='grid_4 omega'>\n<a href='#' class='k-button allSelected'>Select All</a>\n</div>\n</div>\n"
            + "<div class='grid_12'>\n<div class='grid_7 alpha dontPrint'>\n<div class='availableGrid' style='width:100%'></div>\n</div>\n"
            + "<div class='grid_1 dontPrint'><a href='#' class='k-button toSelected shuttleNav' style='width:100%'>&#8614;</a>\n"
            + "<a href='#' class='k-button toAvailable shuttleNav' style='width:100%'>&#8612;</a>\n</div>\n<div class='printOnly grid_3 alpha' style='display:none;'>Selected Programs:</div>"
            + "\n<div class='grid_4 omega'>\n<div class='selectedGrid' style='width:100%'></div>\n</div>\n</div>");

        $("#<?php echo $shuttleDiv; ?>").data("changed", false);

        var first= true;
        var alreadyExists= false;
        for(var i=0; i!= shuttleData.length; i++)
        {
            if (first)
            {
                if (shuttleData[i].<?php echo $prevSelectedColumn; ?> != null)
                    break; // Column already exists.  Don't add it here.
                first= false;
            }
            shuttleData[i].<?php echo $prevSelectedColumn; ?>= shuttleData[i].<?php echo $selectedColumn; ?>;
        }

        var shuttleDataSource= new kendo.data.DataSource({
            data: new kendo.data.ObservableArray(shuttleData),
            <?php echo $schema; ?>,
            sort: {field: "<?php echo $shortColumn; ?>", dir: "asc"}
        });

        var rowA= 0;
        var availableGrid= $("#<?php echo $shuttleDiv; ?> .availableGrid").kendoGrid({
            dataSource: shuttleDataSource,
            columns: [
                {title: "Available", width: "33%"},
                {title: "Description"}
            ],
            rowTemplate: function(model)
            {
                return model.<?php echo $selectedColumn;?> ? "" : "<tr data-uid='" + model.uid + "'" + (rowA++ % 2 == 1 ? " class='k-alt'" : "") + "><td>"
                + model.<?php echo $shortColumn; ?> + "</td><td>" + model.<?php echo $longColumn; ?> + "</td></tr>";
            },
            dataBound: function()
            {
                rowA= 0;
            },
            height: "300px"
        }).data("kendoGrid");

        var rowB= 0;
        var selectedGrid= $("#<?php echo $shuttleDiv; ?> .selectedGrid").kendoGrid({
            dataSource: shuttleDataSource,
            columns: [
                {field: "<?php echo $shortColumn; ?>", title: "Selected"}
            ],
            rowTemplate: function(model)
            {
                return !model.<?php echo $selectedColumn;?> ? "" : "<tr data-uid='" + model.uid + "'" + (rowB++ % 2 == 1 ? " class='k-alt'" : "") + "><td>"
                + model.<?php echo $shortColumn; ?> + "</td></tr>";
            },
            dataBound: function()
            {
                rowB= 0;
            },
            height: "300px"
        }).data("kendoGrid");

        $("#<?php echo $shuttleDiv; ?>").on("click", ".k-grid tbody tr", function() {
            $(this).toggleClass("k-state-selected");
            return false;
        });

        $("#<?php echo $shuttleDiv; ?> .toSelected").click(function() {
            var uids= {};
            var numUids= 0;
            $("#<?php echo $shuttleDiv; ?> .availableGrid .k-state-selected").each(function() {
                uids[$(this).data("uid")]= true;
                numUids++;
            });

            var data= shuttleDataSource.data();
            for(var i=0; i!= data.length; i++)
            {
                if (uids[data[i].uid] != null)
                {
                    data[i].<?php echo $selectedColumn;?>= true;
                    numUids--;
                }
                if (numUids <= 0)
                    break; // no more need to go through the data.
            }
            shuttleDataSource.read();
            $("#<?php echo $shuttleDiv; ?>").data("changed", true);
            return false;
        });

        $("#<?php echo $shuttleDiv; ?> .toAvailable").click(function() {
            var uids= {};
            var numUids= 0;
            $("#<?php echo $shuttleDiv; ?> .selectedGrid .k-state-selected").each(function() {
                uids[$(this).data("uid")]= true;
                numUids++;
            });

            var data= shuttleDataSource.data();
            for(var i=0; i!= data.length; i++)
            {
                if (uids[data[i].uid] != null)
                {
                    data[i].<?php echo $selectedColumn;?>= false;
                    numUids--;
                }
                if (numUids <= 0)
                    break; // no more need to go through the data.
            }
            shuttleDataSource.read();
            $("#<?php echo $shuttleDiv; ?>").data("changed", true);
            return false;
        });

        $("#<?php echo $shuttleDiv; ?> .allSelected").click(function() {
            $("#<?php echo $shuttleDiv; ?> .selectedGrid tbody tr:not(.k-state-selected)").addClass("k-state-selected");
            return false;
        });

        $("#<?php echo $shuttleDiv; ?> .allAvailable").click(function() {
            $("#<?php echo $shuttleDiv; ?> .availableGrid tbody tr:not(.k-state-selected)").addClass("k-state-selected");
            return false;
        });

        var availableData= availableGrid.dataSource.data();
        var selectedData= selectedGrid.dataSource.data();
        if (availableData.length == 0)
            $("#<?php echo $shuttleDiv; ?> .toSelected").enable(false);
        if (selectedData.length == 0)
            $("#<?php echo $shuttleDiv; ?> .toAvailable").enable(false);
    }
<?php }

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

function printTopCenterCss($offset=0, $class="", $mode="css")
{
    $class= $class == "" ? ".k-widget.k-window" : "$class";
    $offset= intval($offset);
    $guts= array("text-align" => "left", "position" => "absolute", "top" => "10px", "left" => "calc(50% - ${offset}px)");
    $jsGuts= array();
    $cssGuts= array();

    foreach($guts as $key => $value)
    {
        $jsGuts[]= "\"$key\": \"$value\"";
        $cssGuts[]= "$key: $value";
    }
    $jsGuts= implode(", ", $jsGuts);
    $cssGuts= implode(";\n", $cssGuts);

    switch($mode)
    {
        case "js":
            print "\$(\"$class\").css({$jsGuts});";
            break;
        case "jsGuts":
            print $jsGuts;
            break;
        case "css":
        case "":
            print "$class {\n$cssGuts;\n}\n";
            break;
        case "cssGuts":
            print $cssGuts;
            break;
    }
}

/**
 * function IEFixStartsWith()
 * startsWith isn't available for IE 11.  Here is the fix.
 */
function IEFixStartsWith()
{ ?>
    if (!String.prototype.startsWith) {
        String.prototype.startsWith = function(searchString, position){
          position = position || 0;
          return this.substr(position, searchString.length) === searchString;
      };
    }
<?php }

/**
 * function printExtendShowOverflown()
 * This extends jQuery so that kendoTooltip can only appear on text that is over the bounds with "text-overflow" set.
 * Usage: $(".elementclass:overflown")
 */
function printExtendShowOverflown()
{ ?>
  jQuery.extend(jQuery.expr[':'], {
    overflown: function (el) {
      return el.offsetHeight < el.scrollHeight || el.offsetWidth < el.scrollWidth;
    }
  });
<?php }