invoiceView.prg

<?php
/* File: monthReport.html
 * Purpose: provides a simple report for a month without any fluff introduced by Kendo.  You cannot do anything with this besides view it.
 */
?>

<script type="text/javascript">

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

<?php
/**
 * function initInvoiceView()
 * Initalizes them invoice views
 */
?>
function InitInvoiceView() {
  $.homecuValidator.setup({formValidate: "invoiceForm", formStatusField: "invoiceFormStatus"});
  var bottomGrid = $("#bottomGrid").kendoGrid({
      dataSource: {
        transport: {
          read: {
            url: "index.prg?operation=cuView&cu=<?php echo $SYSENV["BILL"]["cu"]; ?>",
            dataType: "json",
            type: "POST"
          },
          parameterMap: function(data, type) {
            showWaitWindow();
            return {};
          }
        },
        schema: {
          model: {
            id: "templateId",
            fields: {
              templateId: {type: "number"},
              textDescription: {type: "string"},
              statusLabel: {type: "string"},
              billHalf: {type: "boolean"},
              initialCosts: {type: "string"},
              recurringCosts: {type: "string"}
            }
          },
          parse: function (data) {
             hideWaitWindow();
             if (data.status !== "000") {
               $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
               return [];
             } else {
               InitTop(data.top);
               return data.bottom;
             }
          }
        },
        group: {field: "billingStatusGroup"}
      },
      columns: [
        {title: ""},
        {field: "billingStatusGroup", hidden: true,
          groupHeaderTemplate: "# if (value == 0) { # Active: # } else if (value == 1) { # Pending: # } else { # Completed: # } #"}
      ],
      rowTemplate: kendo.template($("#rowTemplate").html()),
      altRowTemplate: kendo.template($("#altRowTemplate").html()),
      dataBound: function (e) {
        $("#bottomGrid .k-grid-header").remove();

        $("#bottomGrid .k-grouping-row").each(function () {
          $(this).after($("#headerRowTemplate").html());
          $(this).prev().find("td").css({borderBottom: "1px solid black"});
          $(this).next().find("td").css({borderTop: "1px solid black"});
        });

        $("#bottomGrid .k-grouping-row td").each(function () {
          $(this).text($(this).text()); // Removes the p and k-reset elements
        });
      }
    }).data("kendoGrid");
}

<?php
/**
 * function initTop(topData)
 * Initializes the top
 *
 * @param array topData -- the data for the top grid.
 */
?>
function InitTop(topData) {
  var topGrid = $("#topGrid").kendoGrid({
    dataSource: {
      data: topData,
      schema: {
        model: {
          id: "cu",
          fields: {
            cu: {type: "string"},
            cuName: {type: "string"},
            type: {type: "string"},
            closed: {type: "boolean"}
          }
        }
      }
    },
    rowTemplate: kendo.template($("#topRowTemplate").html()),
    dataBound: function (e) {
      $("#topGrid .k-grid-header").remove();
      $("#topGrid colgroup").remove();
    }
  }).data("kendoGrid");
}

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

<script id="topRowTemplate" type="text/k-kendo-template">
<tr class="header">
  <td>CU</td>
  <td>CU Name</td>
  <td>Type</td>
  <td>Closed</td>
</tr>
<tr data-uid="#: uid #">
  <td>#: cu #</td>
  <td>#: cuName #</td>
  <td>#: type #</td>
  <td># if (closed) { # Yes # } else { # No # } #</td>
</tr>
</script>
<script id="headerRowTemplate" type="text/k-kendo-template">
  <tr class="header">
      <td colspan="2">
          <div class="grid_12">
            <div class="grid_4 alpha">Item Name</div>
            <div class="grid_1">Split</div>
            <div class="grid_2">Status</div>
            <div class="grid_2">Initial</div>
            <div class="grid_3 omega">Recurring</div>
          </div>
        </td>
  </tr>
</script>
<script id="rowTemplate" type="text/x-kendo-template">
    <tr class="normalRow" data-uid="#= uid #">
      <td colspan="2">
        <div class="grid_12">
          <div class="grid_4 alpha"># if (salesItemDescr == "") { # &nbsp; # } else { # #: salesItemDescr # # } #</div>
          <div class="grid_1"># if (billHalf) { # Yes # } else { # No # } #</div>
          <div class="grid_2"># if (statusLabel == "") { # &nbsp; # } else { # #: statusLabel # # } #</div>
          <div class="grid_2"># if (initialCosts == "") { # &nbsp; # } else { # #: initialCosts # # } #</div>
          <div class="grid_3 omega"># if (recurringCosts == "") { # &nbsp; # } else { # #: recurringCosts # # } #</div>
        </div>
        <div class="grid_12" style="margin: 15px;"><span class="descriptionSpan"><b>Description: </b> &nbsp; #: textDescription #</span></div>
      </td>
    </tr>
</script>
<script id="altRowTemplate" type="text/x-kendo-template">
    <tr class="k-alt normalRow" data-uid="#= uid #">
      <td colspan="2">
        <div class="grid_12">
          <div class="grid_4 alpha"># if (salesItemDescr == "") { # &nbsp; # } else { # #: salesItemDescr # # } #</div>
          <div class="grid_1"># if (billHalf) { # Yes # } else { # No # } #</div>
          <div class="grid_2"># if (statusLabel == "") { # &nbsp; # } else { # #: statusLabel # # } #</div>
          <div class="grid_2"># if (initialCosts == "") { # &nbsp; # } else { # #: initialCosts # # } #</div>
          <div class="grid_3 omega"># if (recurringCosts == "") { # &nbsp; # } else { # #: recurringCosts # # } #</div>
        </div>
        <div class="grid_12" style="margin: 15px;"><span class="descriptionSpan"><b>Description: </b> &nbsp; #: textDescription #</span></div>
      </td>
    </tr>
</script>
<div class="container_12" id="invoiceForm">
    <div id="invoiceFormStatus"></div>
    <div class="grid_12">
        <div id="topGrid" class="cuIndexGrid"></div>
    </div>
    <div class="grid_12">
        &nbsp;
    </div>

    <div class="grid_12">
        <div id="bottomGrid" class="cuIndexGrid"></div>
    </div>
</div>