7.10.4. Displaying the Invoices

The JSP page contains the layout for displaying the grid with invoice headers and the navigation bar. Invoice items are displayed as a drop-down grid when the header of the selected invoice is clicked.

  1. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  3. <c:set var="cp" value="${pageContext.request.servletContext.contextPath}"
  4.        scope="request" />
  6. <!DOCTYPE html>
  7. <html>
  8.     <head>
  9.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  10.         <title>An example of a Spring MVC application using Firebird and jOOQ</title>
  12.         <!-- Scripts and styles -->
  13.         <%@ include file="../jspf/head.jspf" %>
  14.         <script src="${cp}/resources/js/jqGridProduct.js"></script>
  15.         <script src="${cp}/resources/js/jqGridCustomer.js"></script>
  16.         <script src="${cp}/resources/js/jqGridInvoice.js"></script>
  17.     </head>
  18.     <body>
  19.         <!-- Navigation menu -->
  20.         <%@ include file="../jspf/menu.jspf" %>
  22.         <div class="container body-content">
  24.             <h2>Invoices</h2>
  26.             <table id="jqGridInvoice"></table>
  27.             <div id="jqPagerInvoice"></div>
  29.             <hr />
  30.             <footer>
  31.                 <p>&copy; 2016 - An example of a Spring MVC application using
  32.                    Firebird and jOOQ</p>
  33.             </footer>
  34.         </div>
  36.         <script type="text/javascript">
  37.             var invoiceGrid = null;
  38.             $(document).ready(function () {
  39.                 invoiceGrid = JqGridInvoice({
  40.                     baseAddress: '${cp}'
  41.                 });
  42.             });
  43.         </script>
  45.     </body>
  46. </html>

The basic logic on the client side is concentrated in the /resources/js/jqGridInvoice.js JavaScript module.

  1. var JqGridInvoice = (function ($, jqGridProductFactory, jqGridCustomerFactory) {
  3.     return function (options) {
  4.         var jqGridInvoice = {
  5.             dbGrid: null,
  6.             detailGrid: null,
  7.             options: $.extend({
  8.                 baseAddress: null
  9.             }, options),
  10.             // return invoice model description
  11.             getInvoiceColModel: function () {
  12.                 return [
  13.                     {
  14.                         label: 'Id',
  15.                         name: 'INVOICE_ID', // field name
  16.                         key: true,
  17.                         hidden: true
  18.                     },
  19.                     {
  20.                         label: 'Customer Id'
  21.                         name: 'CUSTOMER_ID',
  22.                         hidden: true,
  23.                         editrules: {edithidden: true, required: true},
  24.                         editable: true,
  25.                         edittype: 'custom', // custom type
  26.                         editoptions: {
  27.                             custom_element: function (value, options) {
  28.                                 // add hidden input
  29.                                 return $("<input>")
  30.                                         .attr('type', 'hidden')
  31.                                         .attr('rowid', options.rowId)
  32.                                         .addClass("FormElement")
  33.                                         .addClass("form-control")
  34.                                         .val(value)
  35.                                         .get(0);
  36.                             }
  37.                         }
  38.                     },
  39.                     {
  40.                         label: 'Date',
  41.                         name: 'INVOICE_DATE',
  42.                         width: 60,
  43.                         sortable: true,
  44.                         editable: true,
  45.                         search: true,
  46.                         edittype: "text", // input type
  47.                         align: "right",
  48.                         // format as date
  49.                         formatter: jqGridInvoice.dateTimeFormatter,
  50.                         sorttype: 'date', // sort as date
  51.                         formatoptions: {
  52.                             srcformat: 'Y-m-d\TH:i:s', // input format
  53.                             newformat: 'Y-m-d H:i:s'   // output format
  54.                         },
  55.                         editoptions: {
  56.                             // initializing the form element for editing
  57.                             dataInit: function (element) {
  58.                                 // creating datepicker
  59.                                 $(element).datepicker({
  60.                                     id: 'invoiceDate_datePicker',
  61.                                     dateFormat: 'dd.mm.yy',
  62.                                     minDate: new Date(2000, 0, 1),
  63.                                     maxDate: new Date(2030, 0, 1)
  64.                                 });
  65.                             }
  66.                         },
  67.                         searchoptions: {
  68.                             // initializing the form element for searching
  69.                             dataInit: function (element) {
  70.                                 // create datepicker
  71.                                 $(element).datepicker({
  72.                                     id: 'invoiceDate_datePicker',
  73.                                     dateFormat: 'dd.mm.yy',
  74.                                     minDate: new Date(2000, 0, 1),
  75.                                     maxDate: new Date(2030, 0, 1)
  76.                                 });
  77.                             },
  78.                             searchoptions: { // search types
  79.                                 sopt: ['eq', 'lt', 'le', 'gt', 'ge']
  80.                             }
  81.                         }
  82.                     },
  83.                     {
  84.                         label: 'Customer',
  85.                         name: 'CUSTOMER_NAME',
  86.                         width: 250,
  87.                         editable: true,
  88.                         edittype: "text",
  89.                         editoptions: {
  90.                             size: 50,
  91.                             maxlength: 60,
  92.                             readonly: true
  93.                         },
  94.                         editrules: {required: true},
  95.                         search: true,
  96.                         searchoptions: {
  97.                             sopt: ['eq', 'bw', 'cn']
  98.                         }
  99.                     },
  100.                     {
  101.                         label: 'Amount',
  102.                         name: 'TOTAL_SALE',
  103.                         width: 60,
  104.                         sortable: false,
  105.                         editable: false,
  106.                         search: false,
  107.                         align: "right",
  108.                         // foramt as currency
  109.                         formatter: 'currency',
  110.                         sorttype: 'number',
  111.                         searchrules: {
  112.                             "required": true,
  113.                             "number": true,
  114.                             "minValue": 0
  115.                         }
  116.                     },
  117.                     {
  118.                         label: 'Paid',
  119.                         name: 'PAID',
  120.                         width: 30,
  121.                         sortable: false,
  122.                         editable: true,
  123.                         search: true,
  124.                         searchoptions: {
  125.                             sopt: ['eq']
  126.                         },
  127.                         edittype: "checkbox",
  128.                         formatter: "checkbox",
  129.                         stype: "checkbox",
  130.                         align: "center",
  131.                         editoptions: {
  132.                             value: "1",
  133.                             offval: "0"
  134.                         }
  135.                     }
  136.                 ];
  137.             },
  138.             initGrid: function () {
  139.                 // url to retrieve data
  140.                 var url = jqGridInvoice.options.baseAddress + '/invoice/getdata';
  141.                 jqGridInvoice.dbGrid = $("#jqGridInvoice").jqGrid({
  142.                     url: url,
  143.                     datatype: "json", // data format
  144.                     mtype: "GET", // http request type
  145.                     // model description
  146.                     colModel: jqGridInvoice.getInvoiceColModel(),
  147.                     rowNum: 500, // number of rows displayed
  148.                     loadonce: false, // load only once
  149.                     // default sort by INVOICE_DATE column
  150.                     sortname: 'INVOICE_DATE',
  151.                     sortorder: "desc", // sorting order
  152.                     width: window.innerWidth - 80,
  153.                     height: 500,
  154.                     viewrecords: true, // display the number of entries
  155.                     guiStyle: "bootstrap",
  156.                     iconSet: "fontAwesome",
  157.                     caption: "Invoices",
  158.                     // pagination element
  159.                     pager: '#jqPagerInvoice',
  160.                     subGrid: true, // show subGrid
  161.                     // javascript function to display the child grid
  162.                     subGridRowExpanded: jqGridInvoice.showChildGrid,
  163.                     subGridOptions: {
  164.                         // load only once
  165.                         reloadOnExpand: false,
  166.                         // load the subgrid string only when you click on the "+"
  167.                         selectOnExpand: true
  168.                     }
  169.                 });
  170.             },
  171.             // date format function
  172.             dateTimeFormatter: function(cellvalue, options, rowObject) {
  173.                 var date = new Date(cellvalue);
  174.                 return date.toLocaleString().replace(",", "");
  175.             },
  176.             // returns a template for the editing dialog
  177.             getTemplate: function () {
  178.               var template = "<div style='margin-left:15px;' id='dlgEditInvoice'>";
  179.               template += "<div>{CUSTOMER_ID} </div>";
  180.               template += "<div> Date: </div><div>{INVOICE_DATE}</div>";
  181.               // customer input field with a button
  182.               template += "<div> Customer <sup>*</sup>:</div>";
  183.               template += "<div>";
  184.               template += "<div style='float: left;'>{CUSTOMER_NAME}</div> ";
  185.               template += "<a style='margin-left: 0.2em;' class='btn' ";
  186.               template += "onclick='invoiceGrid.showCustomerWindow(); ";
  187.               template += "return false;'>";
  188.               template += "<span class='glyphicon glyphicon-folder-open'>";
  189.               template += "</span>Select</a> ";
  190.               template += "<div style='clear: both;'></div>";
  191.               template += "</div>";
  192.               template += "<div> {PAID} Paid </div>";
  193.               template += "<hr style='width: 100%;'/>";
  194.               template += "<div> {sData} {cData}  </div>";
  195.               template += "</div>";
  196.               return template;
  197.             },
  198.             // date conversion in UTC
  199.             convertToUTC: function(datetime) {
  200.               if (datetime) {
  201.                   var dateParts = datetime.split('.');
  202.                   var date = dateParts[2].substring(0, 4) + '-' +
  203.                              dateParts[1] + '-' + dateParts[0];
  204.                   var time = dateParts[2].substring(5);
  205.                   if (!time) {
  206.                       time = '00:00:00';
  207.                   }
  208.                   var dt = Date.parse(date + 'T' + time);
  209.                   var s = dt.getUTCFullYear() + '-' +
  210.                           dt.getUTCMonth() + '-' +
  211.                           dt.getUTCDay() + 'T' +
  212.                           dt.getUTCHour() + ':' +
  213.                           dt.getUTCMinute() + ':' +
  214.                           dt.getUTCSecond() + '  GMT';
  215.                   return s;
  216.               } else
  217.                   return null;
  218.             },
  219.             // returns the options for editing invoices
  220.             getEditInvoiceOptions: function () {
  221.               return {
  222.                 url: jqGridInvoice.options.baseAddress + '/invoice/edit',
  223.                 reloadAfterSubmit: true,
  224.                 closeOnEscape: true,
  225.                 closeAfterEdit: true,
  226.                 drag: true,
  227.                 modal: true,
  228.                 top: $(".container.body-content").position().top + 150,
  229.                 left: $(".container.body-content").position().left + 150,
  230.                 template: jqGridInvoice.getTemplate(),
  231.                 afterSubmit: jqGridInvoice.afterSubmit,
  232.                 editData: {
  233.                   INVOICE_ID: function () {
  234.                     var selectedRow = jqGridInvoice.dbGrid.getGridParam("selrow");
  235.                     var value = jqGridInvoice.dbGrid
  236.                                .getCell(selectedRow, 'INVOICE_ID');
  237.                     return value;
  238.                   },
  239.                   CUSTOMER_ID: function () {
  240.                     return $('#dlgEditInvoice input[name=CUSTOMER_ID]').val();
  241.                   },
  242.                   INVOICE_DATE: function () {
  243.                     var datetime = $('#dlgEditInvoice input[name=INVOICE_DATE]')
  244.                                   .val();
  245.                     return jqGridInvoice.convertToUTC(datetime);
  246.                   }
  247.                 }
  248.               };
  249.             },
  250.             // returns options for adding invoices
  251.             getAddInvoiceOptions: function () {
  252.               return {
  253.                 url: jqGridInvoice.options.baseAddress + '/invoice/create',
  254.                 reloadAfterSubmit: true,
  255.                 closeOnEscape: true,
  256.                 closeAfterAdd: true,
  257.                 drag: true,
  258.                 modal: true,
  259.                 top: $(".container.body-content").position().top + 150,
  260.                 left: $(".container.body-content").position().left + 150,
  261.                 template: jqGridInvoice.getTemplate(),
  262.                 afterSubmit: jqGridInvoice.afterSubmit,
  263.                 editData: {
  264.                   CUSTOMER_ID: function () {
  265.                     return $('#dlgEditInvoice input[name=CUSTOMER_ID]').val();
  266.                   },
  267.                   INVOICE_DATE: function () {
  268.                     var datetime = $('#dlgEditInvoice input[name=INVOICE_DATE]')
  269.                                   .val();
  270.                     return jqGridInvoice.convertToUTC(datetime);
  271.                   }
  272.                 }
  273.               };
  274.             },
  275.             // returns the options for deleting invoices
  276.             getDeleteInvoiceOptions: function () {
  277.               return {
  278.                 url: jqGridInvoice.options.baseAddress + '/invoice/delete',
  279.                 reloadAfterSubmit: true,
  280.                 closeOnEscape: true,
  281.                 closeAfterDelete: true,
  282.                 drag: true,
  283.                 msg: "Delete the selected invoice?",
  284.                 afterSubmit: jqGridInvoice.afterSubmit,
  285.                 delData: {
  286.                   INVOICE_ID: function () {
  287.                     var selectedRow = jqGridInvoice.dbGrid.getGridParam("selrow");
  288.                     var value = jqGridInvoice.dbGrid
  289.                                .getCell(selectedRow, 'INVOICE_ID');
  290.                     return value;
  291.                   }
  292.                 }
  293.               };
  294.             },
  295.             initPager: function () {
  296.                 // display the navigation bar
  297.                 jqGridInvoice.dbGrid.jqGrid('navGrid', '#jqPagerInvoice',
  298.                     {
  299.                          search: true,
  300.                          add: true,
  301.                          edit: true,
  302.                          del: true,
  303.                          view: false,
  304.                          refresh: true,
  306.                          searchtext: "Search",
  307.                          addtext: "Add",
  308.                          edittext: "Edit",
  309.                          deltext: "Delete",
  310.                          viewtext: "View",
  311.                          viewtitle: "Selected record",
  312.                          refreshtext: "Refresh"
  313.                     },
  314.                     jqGridInvoice.getEditInvoiceOptions(),
  315.                     jqGridInvoice.getAddInvoiceOptions(),
  316.                     jqGridInvoice.getDeleteInvoiceOptions()
  317.                 );
  318.                 // Add a button to pay the invoice
  319.                 var urlPay = jqGridInvoice.options.baseAddress + '/invoice/pay';
  320.                 jqGridInvoice.dbGrid.navButtonAdd('#jqPagerInvoice',
  321.                     {
  322.                        buttonicon: "glyphicon-usd",
  323.                        title: "Pay",
  324.                        caption: "Pay",
  325.                        position: "last",
  326.                        onClickButton: function () {
  327.                          // get the id of the current record
  328.                          var id = jqGridInvoice.dbGrid.getGridParam("selrow");
  329.                          if (id) {
  330.                            $.ajax({
  331.                                url: urlPay,
  332.                                type: 'POST',
  333.                                data: {INVOICE_ID: id},
  334.                                success: function (data) {
  335.                                    // Check if an error has occurred
  336.                                    if (data.hasOwnProperty("error")) {
  337.                                        jqGridInvoice.alertDialog('??????',
  338.                                                                  data.error);
  339.                                    } else {
  340.                                           // refresh grid
  341.                                        $("#jqGridInvoice").jqGrid(
  342.                                            'setGridParam',
  343.                                            {
  344.                                                datatype: 'json'
  345.                                            }
  346.                                        ).trigger('reloadGrid');
  347.                                    }
  348.                                }
  349.                            });
  350.                          }
  351.                        }
  352.                     }
  353.                 );
  354.             },
  355.             init: function () {
  356.                 jqGridInvoice.initGrid();
  357.                 jqGridInvoice.initPager();
  358.             },
  359.             afterSubmit: function (response, postdata) {
  360.                 var responseData = response.responseJSON;
  361.                 // Check if an error has occurred
  362.                 if (responseData.hasOwnProperty("error")) {
  363.                     if (responseData.error.length) {
  364.                         return [false, responseData.error];
  365.                     }
  366.                 } else {
  367.                     // refresh grid
  368.                     $(this).jqGrid(
  369.                             'setGridParam',
  370.                             {
  371.                                 datatype: 'json'
  372.                             }
  373.                     ).trigger('reloadGrid');
  374.                 }
  375.                 return [true, "", 0];
  376.             },
  377.             getInvoiceLineColModel: function (parentRowKey) {
  378.               return [
  379.                   {
  380.                     label: 'Invoice Line ID',
  381.                     name: 'INVOICE_LINE_ID',
  382.                     key: true,
  383.                     hidden: true
  384.                   },
  385.                   {
  386.                     label: 'Invoice ID',
  387.                     name: 'INVOICE_ID',
  388.                     hidden: true,
  389.                     editrules: {edithidden: true, required: true},
  390.                     editable: true,
  391.                     edittype: 'custom',
  392.                     editoptions: {
  393.                       custom_element: function (value, options) {
  394.                           // create hidden input
  395.                           return $("<input>")
  396.                                  .attr('type', 'hidden')
  397.                                  .attr('rowid', options.rowId)
  398.                                  .addClass("FormElement")
  399.                                  .addClass("form-control")
  400.                                  .val(parentRowKey)
  401.                                  .get(0);
  402.                       }
  403.                     }
  404.                   },
  405.                   {
  406.                     label: 'Product ID',
  407.                     name: 'PRODUCT_ID',
  408.                     hidden: true,
  409.                     editrules: {edithidden: true, required: true},
  410.                     editable: true,
  411.                     edittype: 'custom',
  412.                     editoptions: {
  413.                       custom_element: function (value, options) {
  414.                           // create hidden input
  415.                           return $("<input>")
  416.                                  .attr('type', 'hidden')
  417.                                  .attr('rowid', options.rowId)
  418.                                  .addClass("FormElement")
  419.                                  .addClass("form-control")
  420.                                  .val(value)
  421.                                  .get(0);
  422.                       }
  423.                     }
  424.                   },
  425.                   {
  426.                     label: 'Product',
  427.                     name: 'PRODUCT_NAME',
  428.                     width: 300,
  429.                     editable: true,
  430.                     edittype: "text",
  431.                     editoptions: {
  432.                         size: 50,
  433.                         maxlength: 60,
  434.                         readonly: true
  435.                     },
  436.                     editrules: {required: true}
  437.                   },
  438.                   {
  439.                     label: 'Price',
  440.                     name: 'SALE_PRICE',
  441.                     formatter: 'currency',
  442.                     editable: true,
  443.                     editoptions: {
  444.                         readonly: true
  445.                     },
  446.                     align: "right",
  447.                     width: 100
  448.                   },
  449.                   {
  450.                     label: 'Quantity',
  451.                     name: 'QUANTITY',
  452.                     align: "right",
  453.                     width: 100,
  454.                     editable: true,
  455.                     editrules: {required: true, number: true, minValue: 1},
  456.                     editoptions: {
  457.                       dataEvents: [{
  458.                         type: 'change',
  459.                         fn: function (e) {
  460.                           var quantity = $(this).val() - 0;
  461.                           var price =
  462.                             $('#dlgEditInvoiceLine input[name=SALE_PRICE]').val()-0;
  463.                           var total = quantity * price;
  464.                           $('#dlgEditInvoiceLine input[name=TOTAL]').val(total);
  465.                         }
  466.                       }],
  467.                       defaultValue: 1
  468.                     }
  469.                   },
  470.                   {
  471.                     label: 'Total',
  472.                     name: 'TOTAL',
  473.                     formatter: 'currency',
  474.                     align: "right",
  475.                     width: 100,
  476.                     editable: true,
  477.                     editoptions: {
  478.                         readonly: true
  479.                     }
  480.                   }
  481.               ];
  482.             },
  483.             // returns the options for editing the invoice item
  484.             getEditInvoiceLineOptions: function () {
  485.               return {
  486.                 url: jqGridInvoice.options.baseAddress + '/invoice/editdetail',
  487.                 reloadAfterSubmit: true,
  488.                 closeOnEscape: true,
  489.                 closeAfterEdit: true,
  490.                 drag: true,
  491.                 modal: true,
  492.                 top: $(".container.body-content").position().top + 150,
  493.                 left: $(".container.body-content").position().left + 150,
  494.                 template: jqGridInvoice.getTemplateDetail(),
  495.                 afterSubmit: jqGridInvoice.afterSubmit,
  496.                 editData: {
  497.                   INVOICE_LINE_ID: function () {
  498.                     var selectedRow = jqGridInvoice.detailGrid
  499.                                      .getGridParam("selrow");
  500.                     var value = jqGridInvoice.detailGrid
  501.                                .getCell(selectedRow, 'INVOICE_LINE_ID');
  502.                     return value;
  503.                   },
  504.                   QUANTITY: function () {
  505.                     return $('#dlgEditInvoiceLine input[name=QUANTITY]').val();
  506.                   }
  507.                 }
  508.               };
  509.             },
  510.             // returns options for adding an invoice item
  511.             getAddInvoiceLineOptions: function () {
  512.               return {
  513.                 url: jqGridInvoice.options.baseAddress + '/invoice/createdetail',
  514.                 reloadAfterSubmit: true,
  515.                 closeOnEscape: true,
  516.                 closeAfterAdd: true,
  517.                 drag: true,
  518.                 modal: true,
  519.                 top: $(".container.body-content").position().top + 150,
  520.                 left: $(".container.body-content").position().left + 150,
  521.                 template: jqGridInvoice.getTemplateDetail(),
  522.                 afterSubmit: jqGridInvoice.afterSubmit,
  523.                 editData: {
  524.                   INVOICE_ID: function () {
  525.                     var selectedRow = jqGridInvoice.dbGrid.getGridParam("selrow");
  526.                     var value = jqGridInvoice.dbGrid
  527.                                .getCell(selectedRow, 'INVOICE_ID');
  528.                     return value;
  529.                   },
  530.                   PRODUCT_ID: function () {
  531.                     return $('#dlgEditInvoiceLine input[name=PRODUCT_ID]').val();
  532.                   },
  533.                   QUANTITY: function () {
  534.                     return $('#dlgEditInvoiceLine input[name=QUANTITY]').val();
  535.                   }
  536.                 }
  537.               };
  538.             },
  539.             // returns the option to delete the invoice item
  540.             getDeleteInvoiceLineOptions: function () {
  541.               return {
  542.                 url: jqGridInvoice.options.baseAddress + '/invoice/deletedetail',
  543.                 reloadAfterSubmit: true,
  544.                 closeOnEscape: true,
  545.                 closeAfterDelete: true,
  546.                 drag: true,
  547.                 msg: "Delete the selected item?",
  548.                 afterSubmit: jqGridInvoice.afterSubmit,
  549.                 delData: {
  550.                   INVOICE_LINE_ID: function () {
  551.                     var selectedRow = jqGridInvoice.detailGrid
  552.                                      .getGridParam("selrow");
  553.                     var value = jqGridInvoice.detailGrid
  554.                                .getCell(selectedRow, 'INVOICE_LINE_ID');
  555.                     return value;
  556.                   }
  557.                 }
  558.               };
  559.             },
  560.             // Event handler for the parent grid expansion event
  561.             // takes two parameters: the parent record identifier
  562.             // and the primary record key
  563.             showChildGrid: function (parentRowID, parentRowKey) {
  564.                 var childGridID = parentRowID + "_table";
  565.                 var childGridPagerID = parentRowID + "_pager";
  566.                 // send the primary key of the parent record
  567.                 // to filter the entries of the invoice items
  568.                 var childGridURL = jqGridInvoice.options.baseAddress
  569.                                  + '/invoice/getdetaildata';
  570.                 childGridURL = childGridURL + "?INVOICE_ID="
  571.                              + encodeURIComponent(parentRowKey);
  572.                 // add HTML elements to display the table and page navigation
  573.                 // as children for the selected row in the master grid
  574.                 $('<table>')
  575.                         .attr('id', childGridID)
  576.                         .appendTo($('#' + parentRowID));
  577.                 $('<div>')
  578.                         .attr('id', childGridPagerID)
  579.                         .addClass('scroll')
  580.                         .appendTo($('#' + parentRowID));
  581.                 // create and initialize the child grid
  582.                 jqGridInvoice.detailGrid = $("#" + childGridID).jqGrid({
  583.                     url: childGridURL,
  584.                     mtype: "GET",
  585.                     datatype: "json",
  586.                     page: 1,
  587.                     colModel: jqGridInvoice.getInvoiceLineColModel(parentRowKey),
  588.                     loadonce: false,
  589.                     width: '100%',
  590.                     height: '100%',
  591.                     guiStyle: "bootstrap",
  592.                     iconSet: "fontAwesome",
  593.                     pager: "#" + childGridPagerID
  594.                 });
  595.                 // displaying the toolbar
  596.                 $("#" + childGridID).jqGrid(
  597.                     'navGrid', '#' + childGridPagerID,
  598.                     {
  599.                         search: false,
  600.                         add: true,
  601.                         edit: true,
  602.                         del: true,
  603.                         refresh: true
  604.                     },
  605.                     jqGridInvoice.getEditInvoiceLineOptions(),
  606.                     jqGridInvoice.getAddInvoiceLineOptions(),
  607.                     jqGridInvoice.getDeleteInvoiceLineOptions()
  608.                 );
  609.             },
  610.             // returns a template for the invoice item editor
  611.             getTemplateDetail: function () {
  612.               var template = "<div style='margin-left:15px;' ";
  613.               template += "id='dlgEditInvoiceLine'>";
  614.               template += "<div>{INVOICE_ID} </div>";
  615.               template += "<div>{PRODUCT_ID} </div>";
  616.               // input field with a button
  617.               template += "<div> Product <sup>*</sup>:</div>";
  618.               template += "<div>";
  619.               template += "<div style='float: left;'>{PRODUCT_NAME}</div> ";
  620.               template += "<a style='margin-left: 0.2em;' class='btn' ";
  621.               template += "onclick='invoiceGrid.showProductWindow(); ";
  622.               template += "return false;'>";
  623.               template += "<span class='glyphicon glyphicon-folder-open'>";
  624.               template += "</span> Select</a> ";
  625.               template += "<div style='clear: both;'></div>";
  626.               template += "</div>";
  627.               template += "<div> Quantity: </div><div>{QUANTITY} </div>";
  628.               template += "<div> Price: </div><div>{SALE_PRICE} </div>";
  629.               template += "<div> Total: </div><div>{TOTAL} </div>";
  630.               template += "<hr style='width: 100%;'/>";
  631.               template += "<div> {sData} {cData}  </div>";
  632.               template += "</div>";
  633.               return template;
  634.             },
  635.             // Display selection window from the goods directory.
  636.             showProductWindow: function () {
  637.               var dlg = $('<div>')
  638.                         .attr('id', 'dlgChooseProduct')
  639.                         .attr('aria-hidden', 'true')
  640.                         .attr('role', 'dialog')
  641.                         .attr('data-backdrop', 'static')
  642.                         .css("z-index", '2000')
  643.                         .addClass('modal')
  644.                         .appendTo($('body'));
  646.               var dlgContent = $("<div>")
  647.                         .addClass("modal-content")
  648.                         .css('width', '760px')
  649.                         .appendTo($('<div>')
  650.                                 .addClass('modal-dialog')
  651.                                 .appendTo(dlg));
  653.               var dlgHeader = $('<div>').addClass("modal-header")
  654.                                           .appendTo(dlgContent);
  655.               $("<button>")
  656.                         .addClass("close")
  657.                         .attr('type', 'button')
  658.                         .attr('aria-hidden', 'true')
  659.                         .attr('data-dismiss', 'modal')
  660.                         .html("&times;")
  661.                         .appendTo(dlgHeader);
  662.               $("<h5>").addClass("modal-title")
  663.                          .html("Select product")
  664.                          .appendTo(dlgHeader);
  665.               var dlgBody = $('<div>')
  666.                         .addClass("modal-body")
  667.                         .appendTo(dlgContent);
  668.               var dlgFooter = $('<div>').addClass("modal-footer")
  669.                                           .appendTo(dlgContent);
  670.               $("<button>")
  671.                 .attr('type', 'button')
  672.                 .addClass('btn')
  673.                 .html('OK')
  674.                 .on('click', function () {
  675.                     var rowId = $("#jqGridProduct")
  676.                                .jqGrid("getGridParam", "selrow");
  677.                     var row = $("#jqGridProduct")
  678.                              .jqGrid("getRowData", rowId);
  679.                     $('#dlgEditInvoiceLine input[name=PRODUCT_ID]')
  680.                         .val(row["PRODUCT_ID"]);
  681.                     $('#dlgEditInvoiceLine input[name=PRODUCT_NAME]')
  682.                         .val(row["NAME"]);
  683.                     $('#dlgEditInvoiceLine input[name=SALE_PRICE]')
  684.                         .val(row["PRICE"]);
  685.                     var price = $('#dlgEditInvoiceLine input[name=SALE_PRICE]')
  686.                         .val()-0;
  687.                     var quantity = $('#dlgEditInvoiceLine input[name=QUANTITY]')
  688.                         .val()-0;
  689.                     var total = Math.round(price * quantity * 100) / 100;
  690.                     $('#dlgEditInvoiceLine input[name=TOTAL]').val(total);
  691.                     dlg.modal('hide');
  692.                 })
  693.                 .appendTo(dlgFooter);
  695.               $("<button>")
  696.                     .attr('type', 'button')
  697.                     .addClass('btn')
  698.                     .html('Cancel')
  699.                     .on('click', function () {
  700.                         dlg.modal('hide');
  701.                     })
  702.                     .appendTo(dlgFooter);
  704.               $('<table>')
  705.                     .attr('id', 'jqGridProduct')
  706.                     .appendTo(dlgBody);
  707.               $('<div>')
  708.                     .attr('id', 'jqPagerProduct')
  709.                     .appendTo(dlgBody);
  711.               dlg.on('hidden.bs.modal', function () {
  712.                     dlg.remove();
  713.               });
  714.               dlg.modal();
  716.               jqGridProductFactory({
  717.                   baseAddress: jqGridInvoice.options.baseAddress
  718.               });
  719.             },
  720.             // Display the selection window from the customer's directory.
  721.             showCustomerWindow: function () {
  722.                 // the main block of the dialog
  723.                 var dlg = $('<div>')
  724.                         .attr('id', 'dlgChooseCustomer')
  725.                         .attr('aria-hidden', 'true')
  726.                         .attr('role', 'dialog')
  727.                         .attr('data-backdrop', 'static')
  728.                         .css("z-index", '2000')
  729.                         .addClass('modal')
  730.                         .appendTo($('body'));
  731.                 // block with the contents of the dialog
  732.                 var dlgContent = $("<div>")
  733.                         .addClass("modal-content")
  734.                         .css('width', '730px')
  735.                         .appendTo($('<div>')
  736.                                 .addClass('modal-dialog')
  737.                                 .appendTo(dlg));
  738.                 // block with dialog header
  739.                 var dlgHeader = $('<div>').addClass("modal-header")
  740.                                           .appendTo(dlgContent);
  741.                 // button "X" for closing
  742.                 $("<button>")
  743.                         .addClass("close")
  744.                         .attr('type', 'button')
  745.                         .attr('aria-hidden', 'true')
  746.                         .attr('data-dismiss', 'modal')
  747.                         .html("&times;")
  748.                         .appendTo(dlgHeader);
  749.                 // title of dialog
  750.                 $("<h5>").addClass("modal-title")
  751.                          .html("Select customer")
  752.                          .appendTo(dlgHeader);
  753.                 // body of dialog
  754.                 var dlgBody = $('<div>')
  755.                         .addClass("modal-body")
  756.                         .appendTo(dlgContent);
  757.                 // footer of dialog
  758.                 var dlgFooter = $('<div>').addClass("modal-footer")
  759.                                           .appendTo(dlgContent);
  760.                 // "OK" button
  761.                 $("<button>")
  762.                     .attr('type', 'button')
  763.                     .addClass('btn')
  764.                     .html('OK')
  765.                     .on('click', function () {
  766.                         var rowId = $("#jqGridCustomer")
  767.                                    .jqGrid("getGridParam", "selrow");
  768.                         var row = $("#jqGridCustomer")
  769.                                  .jqGrid("getRowData", rowId);
  770.                         // Keep the identifier and the name of the customer
  771.                         // in the input elements of the parent form.
  772.                         $('#dlgEditInvoice input[name=CUSTOMER_ID]')
  773.                             .val(rowId);
  774.                         $('#dlgEditInvoice input[name=CUSTOMER_NAME]')
  775.                             .val(row["NAME"]);
  776.                         dlg.modal('hide');
  777.                     })
  778.                     .appendTo(dlgFooter);
  779.                 // "Cancel" button
  780.                 $("<button>")
  781.                         .attr('type', 'button')
  782.                         .addClass('btn')
  783.                         .html('Cancel')
  784.                         .on('click', function () {
  785.                             dlg.modal('hide');
  786.                         })
  787.                         .appendTo(dlgFooter);
  788.                 // add a table to display the customers in the body of the dialog
  789.                 $('<table>')
  790.                         .attr('id', 'jqGridCustomer')
  791.                         .appendTo(dlgBody);
  792.                 // add the navigation bar
  793.                 $('<div>')
  794.                         .attr('id', 'jqPagerCustomer')
  795.                         .appendTo(dlgBody);
  796.                 dlg.on('hidden.bs.modal', function () {
  797.                     dlg.remove();
  798.                 });
  799.                 // display dialog
  800.                 dlg.modal();
  801.                 jqGridCustomerFactory({
  802.                     baseAddress: jqGridInvoice.options.baseAddress
  803.                 });
  804.             },
  805.             // A window for displaying the error.
  806.             alertDialog: function (title, error) {
  807.                 var alertDlg = $('<div>')
  808.                         .attr('aria-hidden', 'true')
  809.                         .attr('role', 'dialog')
  810.                         .attr('data-backdrop', 'static')
  811.                         .addClass('modal')
  812.                         .appendTo($('body'));
  813.                 var dlgContent = $("<div>")
  814.                         .addClass("modal-content")
  815.                         .appendTo($('<div>')
  816.                                 .addClass('modal-dialog')
  817.                                 .appendTo(alertDlg));
  818.                 var dlgHeader = $('<div>').addClass("modal-header")
  819.                                           .appendTo(dlgContent);
  820.                 $("<button>")
  821.                         .addClass("close")
  822.                         .attr('type', 'button')
  823.                         .attr('aria-hidden', 'true')
  824.                         .attr('data-dismiss', 'modal')
  825.                         .html("&times;")
  826.                         .appendTo(dlgHeader);
  827.                 $("<h5>").addClass("modal-title")
  828.                          .html(title)
  829.                          .appendTo(dlgHeader);
  830.                 $('<div>')
  831.                         .addClass("modal-body")
  832.                         .appendTo(dlgContent)
  833.                         .append(error);
  834.                 alertDlg.on('hidden.bs.modal', function () {
  835.                     alertDlg.remove();
  836.                 });
  837.                 alertDlg.modal();
  838.             }
  839.         };
  840.         jqGridInvoice.init();
  841.         return jqGridInvoice;
  842.     };
  843. })(jQuery, JqGridProduct, JqGridCustomer);

Displaying and Editing Invoice Lines

In the invoice module, the main grid is used to display headers and the detail grid, opened with a click, is used to display invoice items. For the child grid to be displayed, the True value is assigned to the subGrid property. The child grid is displayed using the subGridRowExpanded event connected with the showChildGrid method.

The items are filtered by the primary key of the invoice. Along with the main buttons on the navigation bar, a custom button for paying for the invoice is added to the invoice header using the jqGridInvoice.dbGrid.navButtonAdd function (see the initPager method).

Dialog Boxes

Dialog boxes for editing secondary modules are much more complicated than their primary counterparts. They often use options selected from other modules. For that reason, these edit dialog boxes cannot be built automatically using jqGrid. However, this library has an option to build dialog boxes using templates, which we use.

The dialog box template is returned by the getTemplate function. The invoiceGrid.showCustomerWindow() function opens the customer module for selecting a customer. It uses the functions of the JqGridCustomer module described earlier. After the customer is selected in the modal window, its key is inserted into the CUSTOMER_ID field. Fields that are to be sent to the server using pre-processing or from hidden fields are described in the editData property of the Edit and Add options.

Processing Dates

To get back to processing dates: as we already know, the InvoiceController controller returns the date in UTC. Because we want to display it in the current time zone, we specify the jqGridInvoice.dateTimeFormatter date formatting function via the formatter property of the corresponding INVOICE_DATE field.

When sending data to the server, we need the reverse operation — convert time from the current time zone to UTC. The convertToUTC function is responsible for that.

The custom template returned by the getTemplateDetail function is also used for editing invoice items. The invoiceGrid.showProductWindow() function opens a window for selecting a product from the product list. This function uses the functions of the JqGridProduct module.

The code for the JqGridInvoice module contains detailed comments and more explanation so that you can understand the logic of its workings.