TreeviewGridSir

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/locale/en-gb.js"></script>
<body>
    <hi>SIR Tracker - Outstanding Defects Cud2tteyoygcvedifrd November 2017</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 thisMonthName = getMonthName();
    var lastMonthName = getLastMonthName();
    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: true, loaded: true,
            icon: "ui-icon-folder-open,ui-icon-folder-collapsed" },
        { 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 },
        { 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 },
      { 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: true, loaded: true,
            icon: "ui-icon-folder-open,ui-icon-folder-collapsed" },
        { 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 },
        { 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 }
    ];

    $("#treegrid").jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["Project", "From year start",...