5.10.3. Dialog Boxes for Invoices

The dialog boxes for editing secondary sets of data are much more complicated than for the primary sets. Since they often use options selected from other modules, it will not be possible to use the standard jqGrid methods to build these edit dialog boxes. However, this library has an option to build dialog boxes using templates, which we will use.

To enable customer selection, we will create a read-only field with a button at its right-hand side for opening the form displaying the customer selection grid.

  1. // returns properties to create edit dialogs
  2. function update(act) {
  3.   // editing dialog template
  4.   var template = "<div style='margin-left:15px;' id='dlgEditInvoice'>";
  5.   template += "<div>{CUSTOMER_ID} </div>";
  6.   template += "<div> Date: </div><div>{INVOICE_DATE} </div>";
  7.   // customer input field with a button
  8.   template += "<div> Customer <sup>*</sup>:</div>";
  9.   template += "<div>";
  10.   template += "<div style='float: left;'>{CUSTOMER_NAME}</div> ";
  11.   template += "<a style='margin-left: 0.2em;' class='btn'";
  12.   template += " onclick='showCustomerWindow(); return false;'>";
  13.   template += "<span class='glyphicon glyphicon-folder-open'></span>";
  14.   template += " Select</a> ";
  15.   template += "<div style='clear: both;'></div>";
  16.   template += "</div>";
  17.   template += "<div> {PAID} Paid </div>";
  18.   template += "<hr style='width: 100%;'/>";
  19.   template += "<div> {sData} {cData} </div>";
  20.   template += "</div>";
  21.   return {
  22.     top: $(".container.body-content").position().top + 150,
  23.     left: $(".container.body-content").position().left + 150,
  24.     modal: true,
  25.     drag: true,
  26.     closeOnEscape: true,
  27.     closeAfterAdd: true,
  28.     closeAfterEdit: true,
  29.     reloadAfterSubmit: true,
  30.     template: (act != "del") ? template : null,
  31.     onclickSubmit: function (params, postdata) {
  32.       // get row id
  33.       var selectedRow = dbGrid.getGridParam("selrow");
  34.       switch (act) {
  35.         case "add":
  36.           params.url = '@Url.Action("Create")';
  37.           // get customer id for current row
  38.           postdata.CUSTOMER_ID =
  39.             $('#dlgEditInvoice input[name=CUSTOMER_ID]').val();
  40.           break;
  41.         case "edit":
  42.           params.url = '@Url.Action("Edit")';
  43.           postdata.INVOICE_ID = selectedRow;
  44.           // get customer id for current row
  45.           postdata.CUSTOMER_ID =
  46.             $('#dlgEditInvoice input[name=CUSTOMER_ID]').val();
  47.           break;
  48.         case "del":
  49.           params.url = '@Url.Action("Delete")';
  50.           postdata.INVOICE_ID = selectedRow;
  51.           break;
  52.       }
  53.     },
  54.     afterSubmit: function (response, postdata) {
  55.       var responseData = response.responseJSON;
  56.       // check the result for error messages
  57.       if (responseData.hasOwnProperty("error")) {
  58.         if (responseData.error.length) {
  59.           return [false, responseData.error];
  60.         }
  61.         }
  62.         else {
  63.           // refresh grid
  64.           $(this).jqGrid(
  65.             'setGridParam',
  66.             {
  67.               datatype: 'json'
  68.             }
  69.           ).trigger('reloadGrid');
  70.         }
  71.         return [true, "", 0];
  72.       }
  73.     };
  74.   };
  75. }

Now we will write a function for opening the customer module that invokes the Bootstrap library to create a dialog box containing the grid from which a customer can be selected. It is actually the same grid we used earlier but, this time, it is enclosed by a dialog box. A click on the OK button will place the customer identifier and the customer name into the input fields of the parent dialog box for editing invoices.

  1. /**
  2.  * Display a window for selecting a customer
  3.  */
  4. function showCustomerWindow() {
  5.   // the main block of the dialog
  6.   var dlg = $('<div>')
  7.      .attr('id', 'dlgChooseCustomer')
  8.      .attr('aria-hidden', 'true')
  9.      .attr('role', 'dialog')
  10.      .attr('data-backdrop', 'static')
  11.      .css("z-index", '2000')
  12.      .addClass('modal')
  13.      .appendTo($('body'));
  15.   // block with the contents of the dialog
  16.   var dlgContent = $("<div>")
  17.      .addClass("modal-content")
  18.      .css('width', '730px')
  19.      .appendTo($('<div>')
  20.      .addClass('modal-dialog')
  21.      .appendTo(dlg));
  23.   // block with dialogue header
  24.   var dlgHeader = $('<div>').addClass("modal-header").appendTo(dlgContent);
  26.   // button "X" for closing
  27.   $("<button>")
  28.     .addClass("close")
  29.     .attr('type', 'button')
  30.     .attr('aria-hidden', 'true')
  31.     .attr('data-dismiss', 'modal')
  32.     .html("&asmp;times;")
  33.     .appendTo(dlgHeader);
  35.   // title
  36.   $("<h5>").addClass("modal-title")
  37.            .html("Select customer")
  38.            .appendTo(dlgHeader);
  40.   // body of dialogue
  41.   var dlgBody = $('<div>')
  42.      .addClass("modal-body")
  43.      .appendTo(dlgContent);
  45.   // footer of the dialogue
  46.   var dlgFooter = $('<div>').addClass("modal-footer").appendTo(dlgContent);
  48.   // button "OK"
  49.   $("<button>")
  50.     .attr('type', 'button')
  51.     .addClass('btn')
  52.     .html('OK')
  53.     .on('click', function () {
  54.        var rowId = $("#jqgCustomer").jqGrid("getGridParam", "selrow");
  55.        var row = $("#jqgCustomer").jqGrid("getRowData", rowId);
  56.        // To save the identifier and customer name
  57.        // to the input elements of the parent form
  58.        $('#dlgEditInvoice input[name=CUSTOMER_ID]').val(rowId);
  59.        $('#dlgEditInvoice input[name=CUSTOMER_NAME]').val(row["NAME"]);
  60.        dlg.modal('hide');
  61.   })
  62.   .appendTo(dlgFooter);
  64.   // button "Cancel"
  65.   $("<button>")
  66.     .attr('type', 'button')
  67.     .addClass('btn')
  68.     .html('Cancel')
  69.     .on('click', function () { dlg.modal('hide'); })
  70.     .appendTo(dlgFooter);
  72.   // add a table to display the customers in the body of the dialog
  73.   $('<table>')
  74.     .attr('id', 'jqgCustomer')
  75.     .appendTo(dlgBody);
  77.   // add the navigation bar
  78.   $('<div>')
  79.     .attr('id', 'jqgCustomerPager')
  80.     .appendTo(dlgBody);
  82.   dlg.on('hidden.bs.modal', function () {
  83.     dlg.remove();
  84.   });
  86.   // show dialog
  87.   dlg.modal();
  89.   // create and initialize jqGrid
  90.   var dbGrid = $("#jqgCustomer").jqGrid({
  91.     url: '@Url.Action("GetData", "Customer")', // URL to retrieve data
  92.     mtype: "GET", // http type of request
  93.     datatype: "json", // data format
  94.     page: 1,
  95.     width: '100%',
  96.     // view description
  97.     colModel: [
  98.     {
  99.       label: 'Id',
  100.       name: 'CUSTOMER_ID',
  101.       key: true,
  102.       hidden: true
  103.     },
  104.     {
  105.       label: 'Name',
  106.       name: 'NAME',
  107.       width: 250,
  108.       sortable: true,
  109.       editable: true,
  110.       edittype: "text", // input type
  111.       search: true,
  112.       searchoptions: {
  113.         sopt: ['eq', 'bw', 'cn'] // allowed search operators
  114.       },
  115.       // size and maximum length for the input field
  116.       editoptions: { size: 30, maxlength: 60 },
  117.       // required input
  118.       editrules: { required: true }
  119.     },
  120.     {
  121.       label: 'Address',
  122.       name: 'ADDRESS',
  123.       width: 300,
  124.       sortable: false,
  125.       editable: true,
  126.       search: false,
  127.       edittype: "textarea",
  128.       editoptions: { maxlength: 250, cols: 30, rows: 4 }
  129.     },
  130.     {
  131.       label: 'Zip Code',
  132.       name: 'ZIPCODE',
  133.       width: 60,
  134.       sortable: false,
  135.       editable: true,
  136.       search: false,
  137.       edittype: "text",
  138.       editoptions: { size: 30, maxlength: 10 },
  139.     },
  140.     {
  141.       label: 'Phone',
  142.       name: 'PHONE',
  143.       width: 85,
  144.       sortable: false,
  145.       editable: true,
  146.       search: false,
  147.       edittype: "text",
  148.       editoptions: { size: 30, maxlength: 14 },
  149.     }
  150.     ],
  151.     loadonce: false,
  152.     pager: '#jqgCustomerPager',
  153.     rowNum: 500, // number of rows displayed
  154.     sortname: 'NAME', // sort by default by NAME column
  155.     sortorder: "asc",
  156.     height: 500
  157.   });
  159.   dbGrid.jqGrid('navGrid', '#jqgCustomerPager',
  160.     {
  161.       search: true,
  162.       add: false,
  163.       edit: false,
  164.       del: false,
  165.       view: false,
  166.       refresh: true,
  167.       searchtext: "Search",
  168.       viewtext: "View",
  169.       viewtitle: "Selected record",
  170.       refreshtext: "Refresh"
  171.     }
  172.   );
  173. }

All that is left to write for the invoice module is the showChildGrid function that enables the invoice lines to be displayed and edited. Our function will create a grid with invoice lines dynamically after a click on the ‘+’ button to show the details.

Loading data for the lines requires passing the primary key from the selected invoice header.

  1. // handler of the event of opening the parent grid
  2. // takes two parameters: the identifier of the parent record
  3. // and the value of the primary key
  4. function showChildGrid(parentRowID, parentRowKey) {
  5.   var childGridID = parentRowID + "_table";
  6.   var childGridPagerID = parentRowID + "_pager";
  7.   // send the primary key of the parent record
  8.   // to filter the entries of the invoice items
  9.   var childGridURL = '@Url.Action("GetDetailData")';
  10.   childGridURL = childGridURL + "?invoice_id="
  11.     + encodeURIComponent(parentRowKey)
  13.   // add HTML elements to display the table and page navigation
  14.   // as children for the selected row in the master grid
  15.   $('<table>')
  16.     .attr('id', childGridID)
  17.     .appendTo($('#' + parentRowID));
  19.   $('<div>')
  20.     .attr('id', childGridPagerID)
  21.     .addClass('scroll')
  22.     .appendTo($('#' + parentRowID));
  24.   // create and initialize the child grid
  25.   var detailGrid = $("#" + childGridID).jqGrid({
  26.     url: childGridURL,
  27.     mtype: "GET",
  28.     datatype: "json",
  29.     page: 1,
  30.     colModel: [
  31.     {
  32.       label: 'Invoice Line ID',
  33.       name: 'INVOICE_LINE_ID',
  34.       key: true,
  35.       hidden: true
  36.     },
  37.     {
  38.       label: 'Invoice ID',
  39.       name: 'INVOICE_ID',
  40.       hidden: true,
  41.       editrules: { edithidden: true, required: true },
  42.       editable: true,
  43.       edittype: 'custom',
  44.       editoptions: {
  45.         custom_element: function (value, options) {
  46.           // create hidden input
  47.           return $("<input>")
  48.                  .attr('type', 'hidden')
  49.                  .attr('rowid', options.rowId)
  50.                  .addClass("FormElement")
  51.                  .addClass("form-control")
  52.                  .val(parentRowKey)
  53.                  .get(0);
  54.         }
  55.       }
  56.     },
  57.     {
  58.       label: 'Product ID',
  59.       name: 'PRODUCT_ID',
  60.       hidden: true,
  61.       editrules: { edithidden: true, required: true },
  62.       editable: true,
  63.       edittype: 'custom',
  64.       editoptions: {
  65.         custom_element: function (value, options) {
  66.           // create hidden input
  67.           return $("<input>")
  68.                  .attr('type', 'hidden')
  69.                  .attr('rowid', options.rowId)
  70.                  .addClass("FormElement")
  71.                  .addClass("form-control")
  72.                  .val(value)
  73.                  .get(0);
  74.         }
  75.       }
  76.     },
  77.     {
  78.       label: 'Product',
  79.       name: 'Product',
  80.       width: 300,
  81.       editable: true,
  82.       edittype: "text",
  83.       editoptions: {
  84.         size: 50,
  85.         maxlength: 60,
  86.         readonly: true
  87.       },
  88.       editrules: { required: true }
  89.     },
  90.     {
  91.       label: 'Price',
  92.       name: 'Price',
  93.       formatter: 'currency',
  94.       editable: true,
  95.       editoptions: {
  96.         readonly: true
  97.       },
  98.       align: "right",
  99.       width: 100
  100.     },
  101.     {
  102.       label: 'Quantity',
  103.       name: 'Quantity',
  104.       align: "right",
  105.       width: 100,
  106.       editable: true,
  107.       editrules: { required: true, number: true, minValue: 1 },
  108.       editoptions: {
  109.         dataEvents: [
  110.         {
  111.           type: 'change',
  112.           fn: function (e) {
  113.             var quantity = $(this).val() - 0;
  114.             var price =
  115.               $('#dlgEditInvoiceLine input[name=Price]').val() - 0;
  116.             $('#dlgEditInvoiceLine input[name=Total]').val(quantity * price);
  117.           }
  118.         }
  119.         ],
  120.         defaultValue: 1
  121.       }
  122.     },
  123.     {
  124.       label: 'Total',
  125.       name: 'Total',
  126.       formatter: 'currency',
  127.       align: "right",
  128.       width: 100,
  129.       editable: true,
  130.       editoptions: {
  131.         readonly: true
  132.       }
  133.     }
  134.     ],
  135.     loadonce: false,
  136.     width: '100%',
  137.     height: '100%',
  138.     pager: "#" + childGridPagerID
  139.   });
  141.   // displaying the toolbar
  142.   $("#" + childGridID).jqGrid('navGrid', '#' + childGridPagerID,
  143.     {
  144.       search: false,
  145.       add: true,
  146.       edit: true,
  147.       del: true,
  148.       refresh: true
  149.     },
  150.     updateDetail("edit"),
  151.     updateDetail("add"),
  152.     updateDetail("del")
  153.   );
  155.   // function that returns settings for the editing dialog
  156.   function updateDetail(act) {
  157.     // editing dialog template
  158.     var template = "<div style='margin-left:15px;' id='dlgEditInvoiceLine'>";
  159.     template += "<div>{INVOICE_ID} </div>";
  160.     template += "<div>{PRODUCT_ID} </div>";
  161.     // input field for goods with a button
  162.     template += "<div> Product <sup>*</sup>:</div>";
  163.     template += "<div>";
  164.     template += "<div style='float: left;'>{Product}</div> ";
  165.     template += "<a style='margin-left: 0.2em;' class='btn' ";
  166.     template += "onclick='showProductWindow(); return false;'>";
  167.     template += "<span class='glyphicon glyphicon-folder-open'></span>";
  168.     template += " ???????</a> ";
  169.     template += "<div style='clear: both;'></div>";
  170.     template += "</div>";
  171.     template += "<div> Quantity: </div><div>{Quantity} </div>";
  172.     template += "<div> Price: </div><div>{Price} </div>";
  173.     template += "<div> Total: </div><div>{Total} </div>";
  174.     template += "<hr style='width: 100%;'/>";
  175.     template += "<div> {sData} {cData} </div>";
  176.     template += "</div>";
  177.     return {
  178.       top: $(".container.body-content").position().top + 150,
  179.       left: $(".container.body-content").position().left + 150,
  180.       modal: true,
  181.       drag: true,
  182.       closeOnEscape: true,
  183.       closeAfterAdd: true,
  184.       closeAfterEdit: true,
  185.       reloadAfterSubmit: true,
  186.       template: (act != "del") ? template : null,
  187.       onclickSubmit: function (params, postdata) {
  188.         var selectedRow = detailGrid.getGridParam("selrow");
  189.         switch (act) {
  190.           case "add":
  191.             params.url = '@Url.Action("CreateDetail")';
  192.             // get invoice id
  193.             postdata.INVOICE_ID =
  194.               $('#dlgEditInvoiceLine input[name=INVOICE_ID]').val();
  195.             // get the product ID for the current record
  196.             postdata.PRODUCT_ID =
  197.               $('#dlgEditInvoiceLine input[name=PRODUCT_ID]').val();
  198.             break;
  199.           case "edit":
  200.             params.url = '@Url.Action("EditDetail")';
  201.             // get current record id
  202.             postdata.INVOICE_LINE_ID = selectedRow;
  203.             break;
  204.           case "del":
  205.             params.url = '@Url.Action("DeleteDetail")';
  206.             // get current record id
  207.             postdata.INVOICE_LINE_ID = selectedRow;
  208.             break;
  209.         }
  210.       },
  211.       afterSubmit: function (response, postdata) {
  212.         var responseData = response.responseJSON;
  213.         // check the result for error messages
  214.         if (responseData.hasOwnProperty("error")) {
  215.           if (responseData.error.length) {
  216.             return [false, responseData.error];
  217.           }
  218.         }
  219.         else {
  220.           // refresh grid
  221.           $(this).jqGrid(
  222.             'setGridParam',
  223.             {
  224.               datatype: 'json'
  225.             }
  226.           ).trigger('reloadGrid');
  227.         }
  228.         return [true, "", 0];
  229.       }
  230.     };
  231.   };
  232. }

Now we are done with creating the invoice module. Although the showProductWindow function that is used to select a product from the list while filling out invoice lines is not examined here, it is totally similar to the showCustomerWindow function that we examined earlier to implement the selection of customers from the customer module.

An observant reader might have noticed that the functions for displaying the selection from the module and for displaying the module itself were almost identical. Something you could do yourself to improve the code is to move these functions into separate .js script files.