5.10.2. Views for Invoices

As with the Customer controller, only one view, View/Invoice/Index.cshtml is needed. The others can be deleted from this folder. The layout of the view is very simple, but the JavaScript code is quite extensive. We will examine the js code piece-by-piece.

@{
    ViewBag.Title = "Index";
}
<h2>Invoices</h2>
<table id="jqg"></table>
<div id="jpager"></div>
<script type="text/javascript">
  /**
    * The code to work with jqGrid
    */
</script>

To begin with, we will take the code for working with the main grid. All we have to write into it is the properties of the model (field types and sizes, search, sorting, visibility parameters, etc.).

// invoice grid
var dbGrid = $("#jqg").jqGrid({
  url: '@Url.Action("GetData")', URL to retrieve data
  datatype: "json", // format data
  mtype: "GET", // type of http request
  // model description
  colModel: [
  {
    label: 'Id',
    name: 'INVOICE_ID',
    key: true,
    hidden: true
  },
  {
    label: 'CUSTOMER_ID',
    name: 'CUSTOMER_ID',
    hidden: true,
    editrules: { edithidden: true, required: true },
    editable: true,
    edittype:'custom', // own type
    editoptions: {
      custom_element: function (value, options) {
        // add hidden input
        return $("<input>")
            .attr('type', 'hidden')
            .attr('rowid', options.rowId)
            .addClass("FormElement")
            .addClass("form-control")
            .val(value)
            .get(0);
      }
    }
  },
  {
    label: 'Date',
    name: 'INVOICE_DATE',
    width: 60,
    sortable: true,
    editable: true,
    search: true,
    edittype: "text", // type of input
    align: "right",
    formatter: 'date', // formatted as date
    sorttype: 'date', // sorted as date
    formatoptions: { // date format
      srcformat: 'd.m.Y H:i:s',
      newformat: 'd.m.Y H:i:s'
    },
    editoptions: {
      // initializing the form element for editing
      dataInit: function (element) {
        // create datepicker
        $(element).datepicker({
          id: 'invoiceDate_datePicker',
          dateFormat: 'dd.mm.yy',
          minDate: new Date(2000, 0, 1),
          maxDate: new Date(2030, 0, 1)
        });
      }
    },
    searchoptions: {
      // initializing the form element for searching
      dataInit: function (element) {
        // create datepicker
        $(element).datepicker({
          id: 'invoiceDate_datePicker',
          dateFormat: 'dd.mm.yy',
          minDate: new Date(2000, 0, 1),
          maxDate: new Date(2030, 0, 1)
        });
      },
      searchoptions: { // searching types
        sopt: ['eq', 'lt', 'le', 'gt', 'ge']
      },
    }
  },
  {
    label: 'Customer',
    name: 'CUSTOMER_NAME',
    width: 250,
    editable: true,
    edittype: "text",
    editoptions: {
      size: 50,
      maxlength: 60,
      readonly: true
    },
    editrules: { required: true },
    search: true,
    searchoptions: {
      sopt: ['eq', 'bw', 'cn']
    },
  },
  {
    label: 'Amount',
    name: 'TOTAL_SALE',
    width: 60,
    sortable: false,
    editable: false,
    search: false,
    align: "right",
    formatter: 'currency', // format as currency
    sorttype: 'number',
    searchrules: {
      "required": true,
      "number": true,
      "minValue": 0
    }
  },
  {
    label: 'Paid',
    name: 'PAID',
    width: 30,
    sortable: false,
    editable: true,
    search: true,
    searchoptions: {
      sopt: ['eq']
    },
    edittype: "checkbox",
    formatter: "checkbox",
    stype: "checkbox",
    align: "center",
    editoptions: {
      value: "1",
      offval: "0"
    }
  }
  ],
  rowNum: 500, // number of rows displayed
  loadonce: false,
  sortname: 'INVOICE_DATE', // sort by default by NAME column
  sortorder: "desc",
  width: window.innerWidth - 80, // grid width
  height: 500, // grid height
  viewrecords: true, // display the number of records
  caption: "Invoices", // grid caption
  pager: '#jpager', // pagination element
  subGrid: true, // show subgrid
  // javascript function for displaying the parent grid
  subGridRowExpanded: showChildGrid,
  subGridOptions: {
    // upload data only once
    reloadOnExpand: false,
    // load the subgrid rows only when you click on the icon "+"
    selectOnExpand: true
  },
});
// display the navigation bar
dbGrid.jqGrid('navGrid', '#jpager',
  {
    search: true,
    add: true,
    edit: true,
    del: true,
    view: false,
    refresh: true,
    searchtext: "Search",
    addtext: "Add",
    edittext: "Edit",
    deltext: "Delete",
    viewtext: "View",
    viewtitle: "Selected record",
    refreshtext: "Refresh"
  },
  update("edit"),
  update("add"),
  update("del")
);

We’ll add one more “custom” button to the main grid, for paying the invoice.

// Add a button to pay the invoice
dbGrid.navButtonAdd('#jpager',
{
  buttonicon: "glyphicon-usd",
  title: "Pay",
  caption: "Pay",
  position: "last",
  onClickButton: function () {
    // get the current record ID
    var id = dbGrid.getGridParam("selrow");
    if (id) {
      var url = '@Url.Action("Pay")';
      $.ajax({
        url: url,
        type: 'POST',
        data: { id: id },
        success: function (data) {
          // check if an error has occurred
          if (data.hasOwnProperty("error")) {
            alertDialog('Error', data.error);
          }
          else {
            // refresh grid
            $("#jqg").jqGrid(
              'setGridParam',
              {
                datatype: 'json'
              }
            ).trigger('reloadGrid');
          }
        }
      });
    }
  }
});