|
POST
|
I'm getting stuck with the issue that not all the rows are fully available until you do some scrolling. Even though I have a row that's been selected by it's ID, its element is null, so I'm never going to get past if (diveGrid.row(id).element !== null)
... View more
08-04-2015
12:33 PM
|
0
|
2
|
2071
|
|
POST
|
My map contains a featureLayer and an OnDemandGrid. The grid appears in a side panel and it's tied to an extent-change listener so that it only lists the features in the current map extent. The grid has a click event that zooms and opens an infoWindow when the user selects a row. I'd like to have a click on my featureLayer also tie back to my grid. I'd like the grid to scroll to the row corresponding to the feature the user just clicked on. The ID on the row is the OBJECTID of the feature, so there is a common piece of information. Here is a link to an example: featureLayer_grid - JSFiddle Can I do this?
... View more
08-04-2015
11:58 AM
|
0
|
6
|
4018
|
|
POST
|
Since I'm used to dGrid and Memory for my store, I changed this up. It works for me now with no breakpoints. <!DOCTYPE html>
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href=
"http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<link type="text/css" rel="stylesheet" href=
"http://js.arcgis.com/3.14/esri/css/esri.css">
<link type="text/css" rel="stylesheet" href=
"http://js.arcgis.com/3.14/dojox/grid/resources/Grid.css">
<link type="text/css" rel="stylesheet" href=
"http://js.arcgis.com/3.14/dojox/grid/resources/claroGrid.css">
<link type="text/css" rel="stylesheet" href=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript" src=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<title></title>
<style type="text/css">
#myModal {
height: 80%;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var dojoConfig = {
parseOnLoad: true,
isDebug: true,
locale: 'en-us',
extraLocale: ['ja-jp']
};
</script>
<!-- This will not work if you set the html lang https://community.esri.com/thread/81475 -->
<script type="text/javascript" src="http://js.arcgis.com/3.14/">
</script>
<style type="text/css">
.modal-body, #grid {
height: 500px;
}
</style>
</head>
<body class="claro">
<label id="lblOwnerAddress" for="ownerAddress">Owner's
Address</label> <input type="text" id="ownerAddress" name=
"ownerAddress" value="111 S Main">
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">×</button>
<h4 class="modal-title">Modal
Header</h4>
</div>
<div class="modal-body">
<div id="gridDiv"></div>
</div>
<div class="modal-footer">
<button type="button" class=
"btn btn-default" data-dismiss=
"modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var items;
require([
"dojo/on",
"dojo/_base/array",
"esri/tasks/locator",
"dojox/grid/DataGrid",
"dgrid/OnDemandGrid",
'dojo/store/Memory',
"dojo/data/ItemFileReadStore",
"dijit/registry", "dojo/parser",
"dijit/layout/ContentPane",
"dojo/domReady!"
],
function (on, arrayUtils, Locator, DataGrid, dGrid, Memory, ItemFileReadStore, registry, parser) {
parser.parse();
on(document.getElementById('ownerAddress'), 'focusout', checkAddress);
var locator = new Locator("http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer");
var grid = new dGrid({
id: 'addrGrid',
selectionMode: 'single',
columns: { addess:'Candidate'},
loadingMessage: 'Loading data...'
}, "gridDiv");
grid.startup();
function checkAddress() {
var node = document.getElementById('ownerAddress');
// according to your service it takes Single Line
var params = {
"Single Line Input": node.value
};
on (locator, 'address-to-locations-complete', populateModal);
locator.addressToLocations(params);
}
function populateModal(addressCandidates){
if (grid) {
grid.refresh();
}
if (addressCandidates.addresses.length > 1) {
items = arrayUtils.map(addressCandidates.addresses, function (result,idx) {
return {
'id':idx,
'address':result.address
} ;
});
}
var currentMemory = new Memory({
data: items,
idProperty: 'id'
});
grid.set('store', currentMemory);
$("#myModal").modal("show");
grid.on("rowclick", onRowClickHandler);
}
function onRowClickHandler(evt) {
console.log(evt);
var clickedAddress = evt.grid.getItem(evt.rowIndex).address;
console.log(clickedAddress);
alert(clickedAddress);
}
});
</script>
</body>
</html>
... View more
07-31-2015
02:49 PM
|
2
|
1
|
3757
|
|
POST
|
I tried changing it around to have a listener as on (locator, 'address-to-locations-complete', populateModal); thinking that it wasn't having enough time to get all the candidates before it tried to populate the store, but that didn't help. Is there a reason you aren't using the Search widget and just defining your own locator as the source? It should handle the list of candidates for you.
... View more
07-31-2015
01:30 PM
|
0
|
3
|
3757
|
|
POST
|
I had several sets, but it seems like you can replicate. I set one for items, store and for the line grid.setStore(store). Doing that the modal is populating.
... View more
07-31-2015
01:07 PM
|
2
|
1
|
3757
|
|
POST
|
I had a breakpoint set and once I went it after typing that last message, I resumed the code and it worked. Maybe you have a situation where you need to have it set up as some sort of deferred.
... View more
07-31-2015
12:59 PM
|
2
|
3
|
4079
|
|
POST
|
I've been using dGrid for a while, so I might be wrong about this, but you might need to have an identifier in your data. That could be a problem, since there's not one built into your AddressCandidates.
... View more
07-31-2015
12:56 PM
|
0
|
0
|
4079
|
|
POST
|
What is var adresses = addressCandidates.map(function { return x.address; }); ? This doesn't make sense to me. Every time I've had problems populating my grid, it turns out there is something not formatted correctly in the data I'm trying to use. I'm not sure you can use the addressCandidates as-is. You may have to lift just the address out of the list instead of using the whole object.
... View more
07-31-2015
12:44 PM
|
0
|
3
|
4079
|
|
POST
|
I don't think you're way off base. I was thinking as well that since the boot-strap map was already set up to resize on window resize that I could take advantage of that somehow. It's one of the reasons I started looking at it in the first place. I'm not a programmer, more I know enough to be dangerous, but I'll try this and see if it helps.
... View more
07-31-2015
06:15 AM
|
0
|
1
|
2536
|
|
POST
|
Yes. I don't much care where it sits, but once the users makes a few choices and the provider list gets populated, that's when they're likely to start scrolling. I could shorten all the div tags up, but there's a lot of information, and it would mean they were scrolling that much more!
... View more
07-30-2015
02:38 PM
|
0
|
3
|
2536
|
|
POST
|
Clear as mud from the documentation, but now it works, thanks!
... View more
07-30-2015
02:15 PM
|
0
|
0
|
2827
|
|
POST
|
By setting the layerDefinitions to an empty array, I don't see how I'm limiting anything. Here's my link: Auto Complete Find Example In this example the where clause for definitionExpression on the featureLayer limits the features to hospitals. If I use the typeahead for something like Green I would expect to see Greene County Medical Center, but not all the other names that also come up. It's not restricting the returned values to only Hospitals. If I specify an actual where clause var whereClause = "(ID_PROV_TYPE_FK = '01' AND ID_SPECIALTY_FK = '80') OR (ID_PROV_TYPE_FK = '02' AND ID_SPECIALTY_FK = '80') OR (ID_PROV_TYPE_FK = '05' AND ID_SPECIALTY_FK = '80')"; and set my find parameters to it: params.layerDefinitions = whereClause; Then I get an error saying "Invalid "layerDefs' is specified.
... View more
07-30-2015
01:55 PM
|
0
|
2
|
2827
|
|
POST
|
I don't have an error, but it doesn't do anything either. The where clause limits providers to nursing homes that provide adult day care. That's not a long list, but I should still be able to type some combination of characters and expect to get a few choices. I thought my where clause was too restrictive, so I tried a where clause that returns all hospitals. Still, there is never anything that appears in my list. According to the help, the syntax includes a number, which I assume is the layer id. Maybe I'm making a new array just for this? < String[] > layerDefinitions Array of layer definition expressions that allows you to filter the features of individual layers. Layer definitions with semicolons or colons are supported if using a map service published using ArcGIS Server 10. Sample: findParams.layerDefinitions[2] = "POP1999 > 75000";
//The following syntax is supported when using a map service published with ArcGIS Server 10.
findParams.layerDefinitions[0] = "REQ_TIME like '07:%'";
... View more
07-30-2015
01:06 PM
|
0
|
4
|
2827
|
|
POST
|
I think still illustrates my problem: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Auto Complete Find Example</title>
<link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.11/esri/css/esri.css">
<link rel="stylesheet" href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Example found at http://odoe.net/blog/dojo-bootstrap-with-arcgis-javascript-api/
I made my example 4/29/2015
Tracy Schloss
-->
<style type="text/css">
#map {
height: 800px;
}
#autocomplete {
position: fixed;
z-index: 99;
left: 75px;
top: 20px;
background-color: #fff;
padding: 10px;
border: 1px solid #e3e3e3;
}
#btnClear{
padding: 4px;
position:relative;
top: 0px;
}
</style>
<script type="text/javascript">
var dojoConfig = {
packages: [{
name: "bootstrap",
location: "//rawgit.com/xsokev/Dojo-Bootstrap/master"
}]
};
</script>
<script src="http://js.arcgis.com/3.11/"></script>
</head>
<body>
<script type=text/javascript>
require([
'esri/map','esri/InfoTemplate',
'dojo/query','dojo/on','dojo/dom',
'bootstrap/Typeahead',
'esri/tasks/FindParameters',
'esri/tasks/FindTask',
'esri/layers/FeatureLayer',
'esri/graphicsUtils',
'dojo/domReady!'
], function(
Map, InfoTemplate, query, on, dom, Typeahead,
FindParameters, FindTask,
FeatureLayer,
graphicsUtils
) {
var pathName = "https://ogitest.oa.mo.gov";
// var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer';
var url = pathName + '/arcgis/rest/services/DSS/medProvider/MapServer';
var graphicsExtent = graphicsUtils.graphicsExtent;
var whereClause = "(ID_PROV_TYPE_FK = '10' AND ID_SPECIALTY_FK = '80') OR (ID_PROV_TYPE_FK = '10' AND ID_SPECIALTY_FK = 'VC') OR (ID_PROV_TYPE_FK = '11' AND ID_SPECIALTY_FK = '80') OR (ID_PROV_TYPE_FK = '29' AND ID_SPECIALTY_FK = '50')";
var infoTemplate = new InfoTemplate("Provider Information");
infoTemplate.setContent(setInfoContent);
var asFeatures = function asFeatures(data) {
return [data.feature];
};
var asGeom = function asGeom(data){
return [data.feature.geometry];
}
var findResult = function findResult(results, item) {
return results.filter(function(x) {
return x.value === item;
}).shift();
};
/*
var setExtent = function setExtent(map, features) {
return map.setExtent(features);
};
*/
var centerZoom = function centerZoom(map,features){
return map.centerAndZoom(features[0], 15);
}
var map = new Map('map', {
center: [-92.593, 38.5],
zoom: 7,
basemap: 'topo'
});
var featureLayer = new FeatureLayer(url+"/0", {
id:'featureLayer',
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ['*'],
infoTemplate: infoTemplate
});
featureLayer.setDefinitionExpression(whereClause);
map.addLayer(featureLayer);
map.on('load', function() {
var findTask = new FindTask(url);
var params = new FindParameters();
params.returnGeometry = true;
params.outSpatialReference = map.spatialReference;
params.layerIds = [0];
params.searchFields = ['NA_PROVIDER'];
var results;
var node = document.getElementById('search');
query(node).typeahead({
minLength:4,
items:10,
source: function(q, process) {
params.searchText = q;
var def = featureLayer.getDefinitionExpression();
if (def) {
params.layerDefinitions[0] = def; //this is the line that errors
}
findTask.execute(params).then(function(x) {
results = x;
process(x.map(function(a) {
return a.value;
}));
});
},
updater: function(x) {
var geom = asGeom(findResult(results, x));
var feat = asFeatures(findResult(results, x));
centerZoom(map, geom);
map.infoWindow.setTitle('Find Provider Result');
// map.infoWindow.setFeatures(feat);
map.infoWindow.setContent(setInfoContent(feat[0]));
map.infoWindow.show(geom[0]);
/*
setExtent(
map,
graphicsExtent(
asFeatures(findResult(results, x))
));
*/
return x;
}
});
});
//defines content of provider info tag
function setInfoContent(graphic){
var formatString = "";
var addrTest = graphic.attributes.AD_LINE1;
var addr2Test = graphic.attributes.AD_LINE2;
var provCode = graphic.attributes.ID_PROV_TYPE_FK;
var specCode = graphic.attributes.ID_SPECIALTY_FK;
var phoneTest = phoneFormatter(graphic.attributes.PH_NUMBER);
formatString = "<b>" + graphic.attributes.NA_PROVIDER + "</b>";
if (addrTest.length > 1) {
formatString += "<br>" + addrTest;
}
if (addr2Test.length > 1) {
formatString += "<br>" + addr2Test;
}
formatString += "<br>" + graphic.attributes.AD_CITY + ", " + graphic.attributes.AD_STATE + " " + graphic.attributes.AD_ZIP_CODE +
"<br>" +
phoneTest
return formatString;
}
//used by setInfoContent and queryHandler_populateProviders
function phoneFormatter(input){
var area = input.substr(0, 3);
var pre = input.substr(3, 3);
var suf = input.substr(6, 4);
return "(" + area + ") " + pre + "-" + suf;
}
on (dom.byId('btnClear'), 'click' ,function () {
dom.byId('search').value = "";
});
})
</script>
<div id="map">
<div id="autocomplete">
<label>Search For Provider:</label><br/>
<input id="search" type="text" class="span4"></input>
<button id="btnClear" type="button" class="glyphicon glyphicon-remove" style="float:right; "></button>
</div>
<div>
</div>
</div>
</body>
</html>
... View more
07-30-2015
11:56 AM
|
0
|
6
|
2827
|
|
POST
|
I am using a bootstrap map and bootstrap styling in my project. It seems to handle a browser resize much better than a typical esri/Map . I have several tools in my sidebar, most that contain grids. Once the grids are populated, the divs expand to accommodate my data. Since they are now longer, the user must scroll to see all content. Once the user has scrolled down the sidebar, they are noticing that the map looks cut off. The act of expanding the side panel divs isn't something that triggers the map to resize. I added map.resize() in the function that populates the grids, but that doesn't do it. If you resize the browser at any point, it does fill it, but I would like to do this programatically, at the point my grids are populated. This project is getting too complex to post in the thread or jsFiddle, but here's a link: Medicaid Provider Search
... View more
07-30-2015
09:50 AM
|
0
|
6
|
5415
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 06-02-2017 02:38 PM | |
| 2 | 03-18-2022 10:14 AM | |
| 2 | 02-18-2016 06:28 AM | |
| 1 | 03-18-2024 07:29 AM | |
| 4 | 08-02-2023 06:08 AM |
| Online Status |
Offline
|
| Date Last Visited |
02-25-2025
01:56 PM
|