Displaying Date Correctly in Dojox Datagrid

ShaunGibbins2 · ‎06-17-2015

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>

<title>Gully History</title>

<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>

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,