Grid not displaying properly

KennethRichards · ‎09-26-2013

At one point my grid would display correctly. Now I just get column titles and a big white space at the bottom of my page. Does anyone have any idea why this is happening? I'm pretty sure it has somthing to do with my html but that is all I can think of.

[ATTACH=CONFIG]27788[/ATTACH]

[HTML]
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Text Search</title>
    <script>var dojoConfig = { parseOnLoad:true }</script>

    <script src="http://js.arcgis.com/3.6/"></script>
    <script src="scripts/App2.js"></script>

    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojox/grid/resources/tundraGrid.css">
    <link rel="stylesheet" href="styles/Base.css">

    <style>
    </style>

</head>
<body class="tundra">

<div id="titleBar">
<div id="titleText" class="mapMenus">
    <a href='http://azogcc.az.gov/'>ARIZONA OIL AND GAS <br>CONSERVATION COMMISSION</a>
</div>

<div id="navigationMenu" class="mapMenus">
    <ul>
        <li><a href='http://azogcc.az.gov/'>Home</a></li>

    </ul>
</div>
    <div id="titleImg" class="mapMenus">
        <a href='http://azgs.az.gov/'><img src="photos/AZ_state_seal2.png" height="49" width="49"></a>
    </div>
</div>

<div id="search_body"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

<div id="outGrid"
    data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region: bottom">
    <table data-dojo-type="dojox.grid.DataGrid" escapeHTMLInData="false" jsid="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'" style="height:100%; width:100%">
        <thead>
        <tr>
            <th field="apino" width="auto">API No</th>
            <th field="otherid" width="auto">State Permit No</th>
            <th field="wellname" width="auto">Operator</th>
            <th field="county" width="auto">County</th>
            <th field="twp" width="auto">Township</th>
            <th field="rge" width="auto">Range</th>
            <th field="section_" width="auto">Section</th>
            <th field="drillertotaldepth" width="auto">Depth (ft)</th>
            <th field="formationtd" width="auto">Formation at Depth</th>
            <th field="folderField" width="auto" >Well Folder</th>
            <th field="logField" width="auto" >Scanned Well Log</th>
            <th field="lasField" width="auto" >LAS Data</th>
        </tr>
        </thead>
    </table>
</div>
</div>

</body>
</html>
[/HTML]

I am also getting a parse error in my console. I'm not sure if the error appeared when the grid stopped working but they both happened at about the same time.

JonathanUihlein · ‎09-26-2013

Can you post your updated javascript, your css and the specific errors from the console?

Or, you can replicate your project in a http://jsfiddle.net/ so we can look at a 'working' version.

This will make troubleshooting much easier.

Thanks!

KennethRichards · ‎09-26-2013

Here is a fiddle of my page.

JonathanUihlein · ‎09-26-2013

I would suggest opening up your browser console and troubleshooting the easier errors first.

Example:

I see a parser error in the console as follows:

dojo/parser::parse() error
Error: ReferenceError: bottom is not defined in data-dojo-props='region: bottom'

Refers to this line:

<div id="outGrid" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: bottom">

You need to add single quotes around the word bottom, just like you have for the other content pane region properties.

<div id="outGrid" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">

There are further issues after that change...

The parser is unnecessarily being called multiple times, causing expected parser errors.

You are still using a dojox datagrid but haven't included that module in your require.

I noticed you are loading the dgrid "OnDemandGrid" module but aren't actually doing anything with it.

Also, you aren't setting an idProperty on your store (basically, assign a unique ID).

I took a few minutes to rewrite your application to use a dgrid to display the results of your query task.

I *strongly* suggest stepping back from this application and hammering out the functionality before doing anything with styling, css or images.

Try writing several smaller applications that each focus on a specific functionality, and then combine and integrate overall functionality between those smaller apps. This should keep your code much more clean and manageable over a longer period.

Rewritten application below:

<title>
    Text Search
</title>
<script src="http://js.arcgis.com/3.6/">
</script>
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojox/grid/resources/tundraGrid.css">
<style>
html, body, #grid {
 height: 100%;
 margin: 0;
 overflow: hidden;
 padding: 0;
 width:100%
}

</style>
<script>
    require([
  "dojo/_base/declare", 
  "dojo/store/Memory",
  "dgrid/OnDemandGrid", 
  "dojo/parser",

  "dojo/ready", 
  "esri/tasks/query", 
  "esri/tasks/QueryTask",

  "dojo/dom", 
  "dojo/on", 
  "dojo/_base/array"
 ], function(declare, Memory, OnDemandGrid, parser, ready, Query, QueryTask, dom, on, array) {
 
 
  var myQuery, myQueryTask;
  
  var StandardGrid = declare([OnDemandGrid]);
  var grid = new StandardGrid({
   bufferRows: 50,
   columns: {
    apino: "API No",
    otherid: "State Permit No",
    wellname: "Operator",
    county: "County",
    twp: "Township",
    rge: "Range",
    section_: "Section",
    drillertotaldepth: "Depth (ft)",
    formationtd: "Formation at Depth",
    folderField: "Well Folder",
    logField: "Scanned Well Log",
    lasField: "LAS Data"
   }
  }, "grid");
   
        ready(function() {
   // Make sure all elements are loaded and accessible
   parser.parse();

   // Run the Query 
   runQuery();

            function runQuery() {
    myQuery = new Query();
    myQueryTask = new QueryTask("http://services.azgs.az.gov/ArcGIS/rest/services/aasggeothermal/AZWellHeaders/MapServer/0");
    myQuery.returnGeometry = false;
    myQuery.outFields = ["apino", "otherid", "wellname", "county", "twp", "rge", "section_", "drillertotaldepth", "formationtd", "field", "relatedresource", "welltype"];
                myQuery.where = "apino like '%%'" + " OR " + "otherid like '%%'";
                myQueryTask.execute(myQuery, updateGrid);
            }

            function showResults(myFeatures) {
                console.log(myFeatures);
                var s = "";
                for (var i = 0, il = myFeatures.features.length; i < il; i++) {
                    var featureAttributes = myFeatures.features.attributes;
                    for (att in featureAttributes) {
                        s = s + "<strong>" + att + ": </strong>" + featureAttributes[att] + "<br />";
                    }
                }
                dojo.byId("info").innerHTML = s;
            }

            function updateGrid(featureSet) {
                console.log("featureSet", featureSet);
                var data = [];

                array.forEach(featureSet.features, function(entry) {
                    var logs = [],
                        las = [],
                        folders = [],
                        relatedResource = entry.attributes.relatedresource === null ? "no value" : entry.attributes.relatedresource;

                    var raw = relatedResource.split("|");
                    raw.forEach(function(bit) {
                        var resource = bit.split(", ");
                        if (resource[0] && resource[1]) {
                            var url = resource[1].trim();
                            var name = resource[0].trim();
                        }
                        var anchor = "<li><a href='" + url + "' target='_blank'>" + name + "</a></li>";
                        if (url != null) {
                            if (url.indexOf(".tif", url.length - 4) !== -1) {
                                logs.push(anchor);
                            }
                            if (url.indexOf(".pdf", url.length - 4) !== -1) {
                                folders.push(anchor);
                            }
                            if (url.indexOf(".las", url.length - 4) !== -1) {
                                las.push(anchor);
                            }
                        }
                    });
                    data.push({
                        objectid: entry.attributes.objectid,
                        apino: entry.attributes.apino,
                        otherid: entry.attributes.otherid,
                        wellname: entry.attributes.wellname,
                        county: entry.attributes.county,
                        twp: entry.attributes.twp,
                        rge: entry.attributes.rge,
                        section_: entry.attributes.section_,
                        drillertotaldepth: entry.attributes.drillertotaldepth,
                        formationtd: entry.attributes.formationtd,
                        logField: '<ul>' + logs.join(" ") + '</ul>',
                        lasField: '<ul>' + las.join(" ") + '</ul>',
                        folderField: '<ul>' + folders.join(" ") + '</ul>'
                    });
                });
                var dataForGrid = {
                    items: data
                };
                //console.log(data);
                var store = new Memory({
                    data: dataForGrid,
                    idProperty: "apiNo"
                });
                grid.setStore(store);
            }
        });
    });
</script>
</head>
<body class="tundra">
 <div id="grid" style="margin:0; padding:0;"></div>
</body>
</html>

I didn't change your 'updateGrid()' function much, outside of changing the store and adding an idProperty.

In my opinion, you still have a lot of changes to make. This is a hardcore developer project and you have your hands full. Hopefully this advice helps.

KennethRichards · ‎09-27-2013

Well I went through your suggestions. I cleaned up my js file. It had a lot of unfinished ideas in it that I got rid of.
I still can't get the grid to display correctly. I just get column titles on my screen. It is acting like the css for the grid is getting overwritten or not even applied. It is also seems like the dijit layout is being overwritten. I blame part of my problems with transitioning from 3.5 to 3.6 and going from legacy to AMD. There are a lot of changes between all of those.

KennethRichards · ‎09-27-2013

Here is my updated html. The problem has to come from there. I have hardly touched the js in the last week other.

[HTML]
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Text Search</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojox/grid/resources/tundraGrid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <link rel="stylesheet" href="styles/Base.css">
    <script src="http://js.arcgis.com/3.6/"></script>
    <script src="scripts/App2.js"></script>
</head>
<body class="tundra">
<div id="titleBar">
<div id="titleText" class="mapMenus">
    <a href='http://azogcc.az.gov/'>ARIZONA OIL AND GAS <br>CONSERVATION COMMISSION</a>
</div>
<div id="navigationMenu" class="mapMenus">
    <ul>
        <li><a href='http://azogcc.az.gov/'>Home</a></li>
        <li><a href='http://azgs.az.gov/'>AZGS</a></li>
        <li><a href='http://welldata.azogcc.az.gov/index.html'>Map Search</a></li>
        <li><a href='http://welldata.azogcc.az.gov/textsearch.html'>Text Search</a></li>
    </ul>
</div>
    <div id="titleImg" class="mapMenus">
        <a href='http://azgs.az.gov/'><img src="photos/AZ_state_seal2.png" height="49" width="49"></a>
    </div>
</div>
<div id="search_body"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">
<div id="search_info"
        data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region:'top'">
    <div id="info">
    <p>
        <strong> Text Search:</strong> Complete one or multiple fields and press the Submit Search button to search for wells based on their attributes. Selecting LAS data will open the LAS data in a text file. The selected LAS data can be saved and downloaded by using the save page as function.
    </p>
        </div>
    </div>
<div id="image_box"
        data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region:'right'">
    <img src="photos/Arizona_Meridians_Labled.jpg" height="385" width="350">
        <div id="img_info">
            <p>Map of Arizona State Meridians</p>
        </div>
</div>
<div id="forum"
     data-dojo-type="dijit/layout/ContentPane"
     data-dojo-props="region:'left'">
<form action="">
    <table>
        <tr>
            <td class="label">
                <label for="apinum">API Number</label>
            </td>
            <td>
                <input type="text" name="apino" id="apinum" size="14" maxlength="14" placeholder="02-005-00000"><br>
            </td>
        </tr>
<tr>
            <td>
                <input type="button" id="executeApi" value="Search by API"/>
            </td>
        </tr>
</table>
</form>
<form action="">
    <table>
        <tr>
            <td class="label">
                <label for="stateperm"> State Permit</label>
            </td>
            <td>
                <input type="text" name="otherid" id="stateperm" size="4" maxlength="4" placeholder="0000"><br>
            </td>
        </tr>
<tr>
            <td>
                <input type="button" id="executeSP" value="Search by State Permit"/>
            </td>
        </tr>
</table>
</form>
<form action="">
    <table>
        <tr>
            <td class="label">
                <label for="countyid">County</label>
            </td>
            <td>
                <select name="county" id="countyid">
                    <option value=" "> </option>
                    <option value="APACHE">Apache</option>
                    <option value="COCHIESE">Cochise</option>
                </select>
            </td>
        </tr>
<tr>
            <td>
                <input type="button" id="executeCount" value="Search by County"/>
            </td>
        </tr>
</table>
</form>
<form action="">
    <table>
        <tr>
            <td class="label">
                <label for="fieldid">Field Name</label>
            </td>
            <td>
                <select name="field" id="fieldid">
                    <option value=" "> </option>
                    <option value="Adamana">Adamana</option>
                    <option value="Alpine">Alpine</option>
            </td>
        </tr>
<tr>
            <td>
                <input type="button" id="executeField" value="Search by Field"/>
            </td>
        </tr>
</table>
</form>
<form action="">
    <table>
        <tr>
            <td class="label">
                <label for="twpid">Township</label>
            </td>
            <td>
                <input type="text" name="twp" id="twpid" size="4" maxlength="4" placeholder="00N"><br>
            </td>
        </tr>
                <tr>
            <td class="label">
                <label for="rgeid">Range</label>
            </td>
            <td>
                <input type="text" name="rge" id="rgeid" size="4" maxlength="4" placeholder="00E"><br>
            </td>
        </tr>
         <tr>
            <td class="label">
                <label for="sectionid">Section</label>
            </td>
            <td>
                <input type="text" name="section_" id="sectionid" size="4" maxlength="4" placeholder="00"><br>
            </td>
        </tr>
<tr>
            <td>
                <input type="button" id="executePLSS" value="Search by PLSS"/>
            </td>
        </tr>
</table>
</form>
<form action="">
    <table>
        <tr>
            <td>
                <label for="operatorid">Operator</label>
            </td>
            <td>
                <input type="text" name="operator" id="operatorid" size="30" maxlength="30" placeholder="Arizona Bureau of Mines"><br>
            </td>
        </tr>
<tr>
            <td>
                <input type="button" id="executeOper" value="Search by Operator"/>
            </td>
        </tr>
</table>
</form>
<form action="">
    <table>
        <tr>
            <td class="label">
                <label for="wellnameid">Well Name</label>
            </td>
            <td>
                <input type="text" name="wellname" id="wellnameid" size="30" maxlength="30" placeholder="Dry Mesa 1"><br>
            </td>
        </tr>
<tr>
            <td>
                <input type="button" id="executeWellN" value="Search by Well Name"/>
            </td>
        </tr>
</table>
</form>
<form action="">
    <table>
        <tr>
            <td class="label">
                <label for="depthid">Well Minimum Depth(ft)</label>
            </td>
            <td>
               <input type="text" name="drillertotaldepth" id="depthid" size="8" maxlength="10" placeholder="500"><br>
            </td>
        </tr>
<tr>
            <td>
                <input type="button" id="executeDepth" value="Search by Depth"/>
            </td>

        </tr>
</table>
</form>
        <form action="">
    <table>
<tr>
            <td class="label">
                <label for="formationtdid">Formation at Total Depth</label>
            </td>
            <td>
                <input type="text" name="formationtd" id="formationtdid" size="30" maxlength="30" placeholder="Permian Coconino"><br>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="executeForm" value="Search by Formation"/>
            </td>
        </tr>
    </table>
            </form>
    </div>
<div id="outGrid"
    data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region: 'bottom'" style="height: 100%;">
    <table data-dojo-type="dojox/grid/DataGrid" escapeHTMLInData="false" jsid="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'" style="height:100%; width:100%">
        <thead>
        <tr>
            <th field="apino" width="auto">API No</th>
            <th field="otherid" width="auto">State Permit No</th>
            <th field="wellname" width="auto">Operator</th>
            <th field="county" width="auto">County</th>
            <th field="twp" width="auto">Township</th>
            <th field="rge" width="auto">Range</th>
            <th field="section_" width="auto">Section</th>
            <th field="drillertotaldepth" width="auto">Depth (ft)</th>
            <th field="formationtd" width="auto">Formation at Depth</th>
            <th field="folderField" width="auto" >Well Folder</th>
            <th field="logField" width="auto" >Scanned Well Log</th>
            <th field="lasField" width="auto" >LAS Data</th>
        </tr>
        </thead>
    </table>
</div>
</div>
</body>
</html>
[/HTML]