Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Dylan Rich
170
ig-hierarchical-grid Not Appearing on Page
posted

So I'm trying to make a hierarchical grid in html paired with some angular and jquery. I set up the grid in my html following this page as an example:

http://www.igniteui.com/help/using-ignite-ui-with-angularjs

My html code looks like this:

<!DOCTYPE html>
<html manifest="/XMII/CM/EnCompass/grid/grid.appcache">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8,9,EDGE" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <title>NC Summary Report</title>

    <link href="../css/encompass.css" rel="stylesheet" type="text/css">
    <link href="../grid/css/structure/infragistics.css" rel="stylesheet" />
    <link href="../grid/css/themes/infragistics/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
    <link href="../css/customGrid.css" rel="stylesheet" type="text/css">
    <script src="../js/modernizr-latest.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <script src="../grid/js/FileSaver.js"></script>
    <script src="../grid/js/Blob.js"></script>
    <script src="../grid/js/angular.js"></script>
    <script src="../grid/js/angular-messages.js"></script>
    <script src="../grid/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
    <script src="../grid/js/infragistics.core.js"></script>
    <script src="../grid/js/infragistics.lob.js"></script>
    <script src="../grid/js/modules/infragistics.util.js"></script>
    <script src="../grid/js/modules/infragistics.documents.core.js"></script>
    <script src="../grid/js/modules/infragistics.excel.js"></script>
    <script src="../grid/js/modules/infragistics.gridexcelexporter.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../grid/js/GridUtil.js"></script>
</head>

<body class="background" id="background" ng-app="NCSummaryConfiguration" ng-controller="NCSummaryController as ncc">
    <div class="container-fluid">
        <h3 class="header">NC Summary Report</h3>
        <div class="row">
            <div class="col-md-3 col-xs-3">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="shoporder" class="control-label col-md-6 col-xs-6">Shop Order:</label>
                        <div class="col-md-6 col-xs-6">
                            <input type="text" ng-model="shoporder" name="shoporder" onkeypress="checkSubmit(event)" placeholder="Enter Shop Order" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="submitbutton" class="control-label col-md-6 col-xs-6"></label>
                        <div class="col-md-6 col-xs-6">
                            <input type="button" value="Submit" name="submitbutton" ng-click="ncc.updateGrid()"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <br />
        <div class="row  alert alert-{{statusBar}}">
                <span class="col-md-11 col-md-offset-1 col-xs-11 col-xs-offset-1">Status: {{status}}</span>
        </div>
        <br />
        <input type="button" value="Expand All" ng-click="expandAllRoot()">
        <input type="button" value="Collapse All" ng-click="collapseAllRoot()">
        <div class="row">
            <div class="col-md-12">
                <ig-hierarchical-grid id="grid1"
                                    data-source="data"
                                    width="100%"
                                    height="100%"
                                    auto-commit="true"
                                    auto-generate-columns="false"
                                    auto-generate-layouts="false"
                                    expand-collapse-animations="false"
                                    enable-hover-styles="false">
                    <features>
                        <feature name="Sorting"></feature>
                        <feature name="Filtering"></feature>
                        <feature name="Selection"></feature>
                        <feature name="Resizing"></feature>
                    </features>
                    <columns>
                        <column key="sfc" header-text="SFC" width="200px" data-type="string"></column>
                        <column key="comments" header-text="Comments" width="200px" data-type="string"></column>
                        <column key="category" header-text="NC Category" width="200px" data-type="string"></column>
                        <column key="incident" header-text="Incident Number" width="200px" data-type="string"></column>
                        <column key="name" header-text="Employee Name" width="200px" data-type="string"></column>
                    </columns>
                    <column-layouts>
                        <column-layout key="history" response-data-key="" primary-key="ActualKey" auto-generate-columns="false" width="100%" enable-hover-styles="false">
                            <columns>
                                <column key="Component" header-text="Actual Component" width="200px" data-type="string"></column>
                            </columns>
                            <features>
                                <feature name="Selection"></feature>
                                <feature name="Resizing"></feature>
                            </features>
                        </column-layout>
                    </column-layouts>
                </ig-hierarchical-grid>
            </div>
        </div>
    </div>
</body>
</html>

All of my references are correct, and while there is a bunch of javascript as well, I can't even get the empty grid to display on the page, let alone try to load it with data. Everything on the page except for the grid displays properly, and I'm getting no javascript errors thrown. I know the html code is being loaded because it's visible in the debugger, but the grid just isn't loading or appearing on the page, and I can't seem to figure out why.