AnsweredAssumed Answered

Displaying Date Correctly in Dojox Datagrid

Question asked by ShaunGibbins on Jun 17, 2015
Latest reply on Jun 18, 2015 by ShaunGibbins

When datagrid displays a field of esriFieldTypeDate it displays it in a non date format, something like 1396137600000!

 

 

How would I adjust this to display correctly?

 

 

<th field="DeviceUpdate" width="14%">Device Update Date</th>

 

 

Full code

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Gully History</title>

 

 

 

 

  <link rel="stylesheet" href="https://js.arcgis.com/3.13/dijit/themes/soria/soria.css">

    <link rel="stylesheet" href="https://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">

    <link rel="stylesheet" href="https://js.arcgis.com/3.13/dojox/grid/resources/soriaGrid.css">

    <link rel="stylesheet" href="https://js.arcgis.com/3.13/esri/css/esri.css">

  <link rel="stylesheet" href="css/layout.css">

    <style>

        html, body, #mapDiv {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;

        }

 

 

 

 

        body {

            background-color: #FFFFFF;

            overflow: hidden;

            font-family: "Trebuchet MS";

        }

 

 

 

 

        #header {

            background-color: #ececec;

            color: blue;

            font-size: 10pt;

            text-align: center;

            font-weight: bold;

        }

 

 

 

 

        #footer {

            background-color: #ececec;

            color: blue;

            font-size: 10pt;

        }

  #details {

            color: #002d9a;

            font-size: 10pt;

            text-align: center;

        }

  #attributesDiv {

            color: #002d9a;

            font-size: 10pt;

            text-align: right;

        }

  #legendDiv {

            color: #002d9a;

            font-size: 10pt;

            text-align: center;

        }

  #grid {

            color: #002d9a;

            font-size: 10pt;

            text-align: center;

        }

    </style>

 

 

 

 

    <script src="https://js.arcgis.com/3.13/"></script>

    <script>

 

 

 

 

        var map, wellFeatureLayer, grid, store;

 

 

 

 

        require([

          "esri/map",

          "esri/layers/FeatureLayer",

          "esri/layers/ArcGISDynamicMapServiceLayer",

          "esri/layers/ArcGISTiledMapServiceLayer",

          "esri/tasks/query",

          "esri/tasks/QueryTask",

          "esri/tasks/RelationshipQuery",

          "esri/toolbars/draw",

          "dojox/grid/DataGrid",

          "dojo/data/ItemFileReadStore",

          "esri/layers/ImageParameters",

          "dojo/parser",

          "esri/geometry/Extent",

          "dojo/_base/array",

          "esri/symbols/SimpleMarkerSymbol",

          "esri/InfoTemplate",

          "esri/dijit/Legend",

          "esri/dijit/AttributeInspector",

          "dojo/dom",

          "dijit/layout/BorderContainer",

          "dijit/layout/ContentPane",

          "dojo/domReady!"

        ], function (

          Map,

          FeatureLayer,

          DynamicMapServiceLayer,

          Tiled,

          Query,

          QueryTask,

          RelationshipQuery,

          Draw,

          DataGrid,

          ItemFileReadStore,

          ImageParameters,

          parser,

          Extent,

          array,

          SimpleMarkerSymbol,

          InfoTemplate,

          Legend,

          AttributeInspector,

          dom

        ) {

            parser.parse();

            map = new Map("mapDiv");

 

 

 

 

            var tiled = new Tiled("https://myserver/arcgis/rest/services/Maps/SWHMapService/MapServer");

            map.addLayer(tiled);

 

 

 

 

            var imageParams = new ImageParameters();

            imageParams.layerIds = [0, 1, 2];

            imageParams.layerOption = ImageParameters.LAYER_OPTION_SHOW;

            var dynamicLayer = new DynamicMapServiceLayer("https://myserver/arcgis/rest/services/inTouch/inTouchGully/MapServer", { imageParameters: imageParams });

            map.addLayer(dynamicLayer);

 

 

 

 

            var selectionSymbol = new SimpleMarkerSymbol().setColor("red");

            var gullys = new esri.InfoTemplate("Gullys:", " ");

 

 

 

 

            wellFeatureLayer = new FeatureLayer("https://myserver/arcgis/rest/services/inTouch/inTouchGully/FeatureServer/0", { mode: FeatureLayer.MODE_SELECTION, outFields: ["OBJECTID","ITEM_UID","DEVICEUPDATEDDATE","CREATIONDATE","ACTIONTAKEN","DEFECTDETAILS","DEFECTNOTES","REASONNOTCLEANED","SILTLEVEL","SUMP_NAME","UPDATE_TYPE","Jetting","LASTUPDATELOGONID","CREATIONLOGONID"], infoTemplate: gullys });

            wellFeatureLayer1 = new FeatureLayer("https://myserver/arcgis/rest/services/inTouch/inTouchGully/FeatureServer/1", { mode: FeatureLayer.MODE_SELECTION, outFields: ["OBJECTID", "ITEM_UID", "DEVICEUPDATEDDATE","CREATIONDATE","ACTIONTAKEN","DEFECTDETAILS","DEFECTNOTES","REASONNOTCLEANED","SILTLEVEL","SUMP_NAME","UPDATE_TYPE","Jetting","LASTUPDATELOGONID","CREATIONLOGONID"], infoTemplate: gullys });

            wellFeatureLayer2 = new FeatureLayer("https://myserver/arcgis/rest/services/inTouch/inTouchGully/FeatureServer/2", { mode: FeatureLayer.MODE_SELECTION, outFields: ["OBJECTID", "ITEM_UID", "DEVICEUPDATEDDATE","CREATIONDATE","ACTIONTAKEN","DEFECTDETAILS","DEFECTNOTES","REASONNOTCLEANED","SILTLEVEL","SUMP_NAME","UPDATE_TYPE","Jetting","LASTUPDATELOGONID","CREATIONLOGONID"], infoTemplate: gullys });

 

 

 

 

            wellFeatureLayer.setSelectionSymbol(selectionSymbol);

            wellFeatureLayer.on("selection-complete", findRelatedRecords);

 

 

 

 

            wellFeatureLayer1.setSelectionSymbol(selectionSymbol);

            wellFeatureLayer1.on("selection-complete", findRelatedRecords);

 

 

 

 

            wellFeatureLayer2.setSelectionSymbol(selectionSymbol);

            wellFeatureLayer2.on("selection-complete", findRelatedRecords);

 

 

 

 

            map.addLayer(wellFeatureLayer);

            map.addLayer(wellFeatureLayer1);

            map.addLayer(wellFeatureLayer2);

 

 

 

 

            map.on("click", findWells);

 

 

 

 

            function findRelatedRecords(evt) {

                var features = evt.features;

                var relatedTopsQuery = new esri.tasks.RelationshipQuery();

                relatedTopsQuery.outFields = ["*"];

                relatedTopsQuery.relationshipId = 0;

                relatedTopsQuery.objectIds = [features[0].attributes.OBJECTID];

                wellFeatureLayer.queryRelatedFeatures(relatedTopsQuery, function (relatedRecords) {

                    console.log("related recs: ", relatedRecords);

                    if (!relatedRecords.hasOwnProperty(features[0].attributes.OBJECTID)) {

                        console.log("No related records for OBJECTID: ", features[0].attributes.OBJECTID);

                        return;

                    }

                    var fset = relatedRecords[features[0].attributes.OBJECTID];

                    var items = array.map(fset.features, function (feature) {

                        return feature.attributes;

                    });

 

 

 

 

                    //Create data object to be used in store

                    var data = {

                        identifier: "OBJECTID",  //This field needs to have unique values

                        label: "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.

                        items: items

                    };

 

 

 

 

                    //Create data store and bind to grid.

                    store = new ItemFileReadStore({ data: data });

                    grid.setStore(store);

                    grid.setQuery({ OBJECTID: "*" });

                });

            }

 

 

 

 

            //Find the features based on mouse click

            function findWells(evt) {

                grid.setStore(null);

                var selectionQuery = new Query();

                var tol = map.extent.getWidth() / map.width * 5;

                var x = evt.mapPoint.x;

                var y = evt.mapPoint.y;

                var queryExtent = new Extent(x - tol, y - tol, x + tol, y + tol, evt.mapPoint.spatialReference);

                selectionQuery.geometry = queryExtent;

                wellFeatureLayer.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW);

                wellFeatureLayer1.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW);

                wellFeatureLayer2.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW);

            }

 

 

 

 

            //add the legend

            var legend = new Legend({

                map: map,

                layerInfos: [{

                    layer: dynamicLayer,

                    title: ""

                }]

            }, "legendDiv");

            legend.startup();

            legend.refresh([{ layer: dynamicLayer, title: "Gullys" }]);

 

 

 

 

            //Get feature data into the Details pane for each layer

            map.on("click", function (results) {

 

 

 

 

                var layerInfos = [

                    {

                        featureLayer: wellFeatureLayer,

                        showAttachments: false,

                        isEditable: true,

                        showDeleteButton: false,

                        fieldInfos:

                            [

                                { fieldName: "OBJECTID", tooltip: "The Object ID.", label: "Object ID:", isEditable: false },

                                { fieldName: "ITEM_UID", tooltip: "The Item UID.", label: "Item ID:", isEditable: false },

  { fieldName: "DEVICEUPDATEDDATE", tooltip: "Device Update Date", label: "Updated:", isEditable: false },

  { fieldName: "CREATIONDATE", tooltip: "Creation Date", label: "Created:", isEditable: false },

  { fieldName: "ACTIONTAKEN", tooltip: "Action Taken", label: "Action:", isEditable: false },

  { fieldName: "DEFECTDETAILS", tooltip: "Defect Details", label: "Defect:", isEditable: false },

  { fieldName: "DEFECTNOTES", tooltip: "Defect Notes", label: "Notes:", isEditable: false },

  { fieldName: "REASONNOTCLEANED", tooltip: "Reason not Cleaned", label: "Reason:", isEditable: false },

  { fieldName: "SILTLEVEL", tooltip: "Silt Level", label: "Silt Level:", isEditable: false },

  { fieldName: "SUMP_NAME", tooltip: "Sump Name", label: "Sump Name:", isEditable: false },

  { fieldName: "UPDATE_TYPE", tooltip: "Update Type", label: "Update Type:", isEditable: false },

  { fieldName: "Jetting", tooltip: "Jetting", label: "Jetting:", isEditable: false },

  { fieldName: "LASTUPDATELOGONID", tooltip: "Update LoginID", label: "Updated By:", isEditable: false },

  { fieldName: "CREATIONLOGONID", tooltip: "Created LoginID", label: "Created By:", isEditable: false },

                            ]

                    },

                    {

                        featureLayer: wellFeatureLayer1,

                        showAttachments: false,

                        isEditable: true,

                        showDeleteButton: false,

                        fieldInfos:

                            [

                                { fieldName: "OBJECTID", tooltip: "The Object ID.", label: "Object ID:", isEditable: false },

                                { fieldName: "ITEM_UID", tooltip: "The Item UID.", label: "Item ID:", isEditable: false },

  { fieldName: "DEVICEUPDATEDDATE", tooltip: "Device Update Date", label: "Updated:", isEditable: false },

  { fieldName: "CREATIONDATE", tooltip: "Creation Date", label: "Created:", isEditable: false },

  { fieldName: "ACTIONTAKEN", tooltip: "Action Taken", label: "Action:", isEditable: false },

  { fieldName: "DEFECTDETAILS", tooltip: "Defect Details", label: "Defect:", isEditable: false },

  { fieldName: "DEFECTNOTES", tooltip: "Defect Notes", label: "Notes:", isEditable: false },

  { fieldName: "REASONNOTCLEANED", tooltip: "Reason not Cleaned", label: "Reason:", isEditable: false },

  { fieldName: "SILTLEVEL", tooltip: "Silt Level", label: "Silt Level:", isEditable: false },

  { fieldName: "SUMP_NAME", tooltip: "Sump Name", label: "Sump Name:", isEditable: false },

  { fieldName: "UPDATE_TYPE", tooltip: "Update Type", label: "Update Type:", isEditable: false },

  { fieldName: "Jetting", tooltip: "Jetting", label: "Jetting:", isEditable: false },

  { fieldName: "LASTUPDATELOGONID", tooltip: "Update LoginID", label: "Updated By:", isEditable: false },

  { fieldName: "CREATIONLOGONID", tooltip: "Created LoginID", label: "Created By:", isEditable: false },

                            ]

                    },

                    {

                        featureLayer: wellFeatureLayer2,

                        showAttachments: false,

                        isEditable: true,

                        showDeleteButton: false,

                        fieldInfos:

                            [

                                { fieldName: "OBJECTID", tooltip: "The Object ID.", label: "Object ID:", isEditable: false },

                                { fieldName: "ITEM_UID", tooltip: "The Item UID.", label: "Item ID:", isEditable: false },

  { fieldName: "DEVICEUPDATEDDATE", tooltip: "Device Update Date", label: "Updated:", isEditable: false },

  { fieldName: "CREATIONDATE", tooltip: "Creation Date", label: "Created:", isEditable: false },

  { fieldName: "ACTIONTAKEN", tooltip: "Action Taken", label: "Action:", isEditable: false },

  { fieldName: "DEFECTDETAILS", tooltip: "Defect Details", label: "Defect:", isEditable: false },

  { fieldName: "DEFECTNOTES", tooltip: "Defect Notes", label: "Notes:", isEditable: false },

  { fieldName: "REASONNOTCLEANED", tooltip: "Reason not Cleaned", label: "Reason:", isEditable: false },

  { fieldName: "SILTLEVEL", tooltip: "Silt Level", label: "Silt Level:", isEditable: false },

  { fieldName: "SUMP_NAME", tooltip: "Sump Name", label: "Sump Name:", isEditable: false },

  { fieldName: "UPDATE_TYPE", tooltip: "Update Type", label: "Update Type:", isEditable: false },

  { fieldName: "Jetting", tooltip: "Jetting", label: "Jetting:", isEditable: false },

  { fieldName: "LASTUPDATELOGONID", tooltip: "Update LoginID", label: "Updated By:", isEditable: false },

  { fieldName: "CREATIONLOGONID", tooltip: "Created LoginID", label: "Created By:", isEditable: false },

                            ]

                    }];

 

 

 

 

                var attInspector = new AttributeInspector({

                    layerInfos: layerInfos,

                }, "attributesDiv");

 

 

 

 

            });

 

 

 

 

            var selectQuery = new Query();

 

 

 

 

            map.on("click", function (e) {

                dom.byId("details").innerHTML = "";

                // console.log(e.graphic);

                selectQuery.objectIds = [e.graphic.attributes.objectid];

                wellFeatureLayer.selectFeatures(selectQuery);

            });

        });

 

 

 

 

    </script>

</head>

 

 

 

 

<body class="soria">

    <!--TOPMOST LAYOUT CONTAINER-->

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

        <!--HEADER SECTION

        <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:75px;">

          Click on a well to select the well and select the related well log information for that well.

        </div>-->

        <!--CENTER SECTION-->

        <!--LEGEND CONTAINER-->

        <div id="rightPane"

             data-dojo-type="dijit/layout/ContentPane" class="roundedCorners" data-dojo-props="region:'right'" style="width:20%;margin:15px 15px 15px 0px;">

 

 

 

 

            <div data-dojo-type="dijit/layout/AccordionContainer">

                <div data-dojo-type="dijit/layout/ContentPane"

                     data-dojo-props="title:'Details', selected:true">

                    <span id="details">Click on a Gully to View Details</span>

 

 

 

 

                    <div id="attributesDiv"></div>

 

 

 

 

                </div>

                <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"

                     data-dojo-props="title:'Legend'">

                    <div id="legendDiv"></div>

                </div>

            </div>

        </div>

        <!--CENTER CONTAINER-->

        <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" class="roundedCorners" data-dojo-props="region:'center'" style="margin:15px;">

        </div>

        <!--bottom CONTAINER-->

        <div data-dojo-type="dijit/layout/ContentPane" class="roundedCorners" data-dojo-props="region:'bottom'" style="height:20%;width:100%;margin:0px 15px 15px 15px;">

            <table data-dojo-type="dojox/grid/DataGrid" sortinfo="-2" jsid="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'" style="height:20%; width:100%">

                <thead>

                    <tr>

                        <th field="AssetID" width="6%">Asset ID</th>

                        <th field="DeviceUpdate" width="14%">Device Update Date</th>

                        <th field="Operative" width="10%">Up Dated By</th>

                        <th field="AssetType" width="10%">Asset Type</th>

                        <th field="ActionTaken" width="14%">Action Taken</th>

                        <th field="DefectDetail" width="10%">Defect Details</th>

                        <th field="Jetting" width="5%">Jetting</th>

                        <th field="ReasonNotCleaned" width="15%">Reason Not Cleaned</th>

                        <th field="SiltLevel" width="6%">Silt Level</th>

                        <th field="SumpPresent" width="10%">Sump Present</th>

                    </tr>

                </thead>

            </table>

        </div>

    </div>

</body>

</html>

Outcomes