TreeviewGridSir

by arame3333

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script>
<body>

    <hi>SIR Tracker - Outstanding Defects Current on <span id="todayDate"></span></hi>
    <div id="outerDiv" style="margin:5px;">
      <table id="treegrid"></table>
  </div>
</body>

CSS

.ui-jqgrid .ui-jqgrid-htable th div, .ui-jqgrid-sortable  {
    height:auto;
    overflow:hidden;
    white-space:normal !important;
}

JavaScript

$(function () {
    "use strict";
    var todayDate = $("#todayDate");
    todayDate.text(moment().format("dddd Do MMMM YYYY"))
    var thisMonthName = moment().format("MMM")
    var lastMonthName = moment().subtract(1, 'months').format("MMM");
    var mydata = [
        { id: "1", name: "CD/N142 Janson Close", yearStart: "10", lastMonth: "1",
        	thisMonth: "72", outstandingFaults: "83", openFaults: "83", closeFaults: "3", totalFaults: "169",
			      level: "0", parent: "null", isLeaf: false, expanded: false, loaded: true,
            icon: "fa-minus, fa-plus" },
        { id: "2", name: "Electrical", yearStart: "8", lastMonth: "1",
        	thisMonth: "48", outstandingFaults: "77", openFaults: "43", closeFaults: "2", totalFaults: "109",
            level: "1", parent: "1", isLeaf: true, expanded: false, loaded: true, icon: "fa-bolt" },
        { id: "3", name: "Mechanical", yearStart: "2", lastMonth: "0",
        	thisMonth: "24", outstandingFaults: "6", openFaults: "40", closeFaults: "1", totalFaults: "60",
            level: "1", parent: "1", isLeaf: true, expanded: false, loaded: true, icon: "fa-wrench" },
      { id: "4", name: "CD/L224 Lychet Way", yearStart: "3", lastMonth: "10",
        	thisMonth: "67", outstandingFaults: "80", openFaults: "130", closeFaults: "265", totalFaults: "475",
			      level: "0", parent: "null", isLeaf: false, expanded: false, loaded: true,
            icon: "fa-minus, fa-plus" },
        { id: "5", name: "Electrical", yearStart: "2", lastMonth: "8",
        	thisMonth: "47", outstandingFaults: "40", openFaults: "80", closeFaults: "190", totalFaults: "270",
            level: "1", parent: "4", isLeaf: true, expanded: false, loaded: true, icon: "fa-bolt" },
        { id: "6", name: "Mechanical", yearStart: "1", lastMonth: "2",
        	thisMonth: "20", outstandingFaults: "40", openFaults: "50", closeFaults: "75", totalFaults: "205",
            level: "1", parent: "4", isLeaf: true, expanded: false, loaded: true, icon:...