Zoom to records latitude and longitude in enhanced datagrid

deleted-user-Pi5x1UjkS2PY · ‎10-10-2014

I've looked at all of the examples and I've tried two different ways to zoom to a record in a data grid but I am failing.

*Choice one is to do it as a zoom button in the table but I can not seem to get find the row index! See bolded lines below. .

</th>

<th field="WebLon_X" width="100px">WebLon_X</th>

<th field="WebLat_Y" width="150px">WebLat_Y</th>

</tr></thead>

</table>

     function makeZoomButton(id){
        var zBtn = "<div data-dojo-type='dijit.form.Button'><img src='assets/images/GenericSearch32.png'";
        zBtn = zBtn + " width='18' height='18'";
        zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>";
        return zBtn;
      }

function zoomRow(evt){

// var lon= gridStores.getItem(evt.rowIndex).WebLon_X;

// var lat= gridStores.getItem(evt.rowIndex).WebLat_Y;

var lon = gridStores.store.getValue(gridStores.getItem(evt.rowIndex), "WebLon_X");

var lat= gridStores.store.getValue(gridStores.getItem(evt.rowIndex), "WebLat_Y");

//--This works if I know row number/index !!!!!

//var lon = gridStores.store.getValue(gridStores.getItem(3), "WebLon_X");

//var lat= gridStores.store.getValue(gridStores.getItem(3), "WebLat_Y");

alert("Current Row Index = " + currentRowIndex);

var lon = gridStores.store.getValue(gridStores.getItem(currentRowIndex), "WebLon_X");

map.centerAndZoom(new esri.geometry.Point( lon, lat, map.spatialReference),12);
}

------------------------------------------------------------------------------------------------------------------------

*Choice two was to try and to this on a double click but not sure how well that will work with tablet devices. I can get cell value but when I use it my zoom does not work ;-( I am guess formatting because if I hard code it everything seems to work fine.

function onRowDblClickHandler(evt){
if (confirm('Do you wish to zoom to this record?')) {

var items = gridStores.selection.getSelected();
if (items.length) {
    dojo.forEach(items, function(selectedItem) {
        lon = gridStores.store.getValues(selectedItem, "WebLon_X");
        lat = gridStores.store.getValues(selectedItem, "WebLat_Y");

        //var lon = -12838746.49378;
        //var lat = 4321278.26719;

alert("lon = " + lon + "   lat = " + lat);
map.centerAndZoom(new esri.geometry.Point("" +lon+ "", "" + lat + "", map.spatialReference),12);

}
// --- end
}
}

RobertScheitlin__GISP · ‎10-13-2014

Michael,

Your post first option is not working because you are working off the click event of the button and as it stands it does not know the rowIndex. It would know the rowIndex if the event it was working off of was the rowclick event. In your last post are you saying when you un-comment the var lon = gridStores.store.getValues(selectedItem, "WebLon_X"); then you actually get the proper value in the alert? If so then the issue maybe that the value you are getting is a string and you need to parse it to a float.

lon = parseFloat(gridStores.store.getValues(selectedItem, "WebLon_X"));

View solution in original post

TimWitt2 · ‎10-10-2014

Michael,

this is what jake posted earlier, maybe this will help: Edit fiddle - JSFiddle

Tim

deleted-user-Pi5x1UjkS2PY · ‎10-10-2014

Thanks for the quick response. I'm looking through that example which is pretty interesting but much of that has to do with graphics. It is also I'm just not up to speed enough in JavaScript to tweak that code to what I need as well.

deleted-user-Pi5x1UjkS2PY · ‎10-13-2014

When I hard code the values everything works fine but when I grab them out of the table they look the same in my alert box but do not work. Augh. Any ideas why?

<th field="WebLon_X" width="100px" datatype="string">WebLon_X</th>

<th field="WebLat_Y" width="150px" datatype="string">WebLat_Y</th>

if (confirm('Do you wish to zoom to this record?')) {
var items = gridStores.selection.getSelected();
if (items.length) {
dojo.forEach(items, function(selectedItem) {

// This works when hard coded
var lon = -8266572.952;
var lat = 4995971.321;

// Why is this not working. I am getting the same exact values in my alert box?

// var lon = gridStores.store.getValues(selectedItem, "WebLon_X");

//var lat = gridStores.store.getValues(selectedItem, "WebLat_Y");

alert("lon = " + lon + " lat = " + lat);

map.centerAndZoom(new esri.geometry.Point( lon, lat , map.spatialReference), 12);

})
}

RobertScheitlin__GISP · ‎10-13-2014

Michael,

Your post first option is not working because you are working off the click event of the button and as it stands it does not know the rowIndex. It would know the rowIndex if the event it was working off of was the rowclick event. In your last post are you saying when you un-comment the var lon = gridStores.store.getValues(selectedItem, "WebLon_X"); then you actually get the proper value in the alert? If so then the issue maybe that the value you are getting is a string and you need to parse it to a float.

lon = parseFloat(gridStores.store.getValues(selectedItem, "WebLon_X"));

deleted-user-Pi5x1UjkS2PY · ‎10-13-2014

I'm passing on the id to this function. Can I use that to get the rowindex or can I pass the rowindex instead of the id? Would be really nice to be able to use the zoom button for the row.

</th>

function makeZoomButton(id){

var zBtn = "<div data-dojo-type='dijit.form.Button'><img src='assets/images/GenericSearch32.png'";

zBtn = zBtn + " width='18' height='18'";

zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>";

return zBtn;

}

function zoomRow(evt){

alert("FID for Selected Row = " + evt);

}

RobertScheitlin__GISP · ‎10-13-2014

Michael,

The way I would do it, (based on my limited knowledge of working with a grid or enhanced grid) is instead of adding an actual button just add an image using the GenericSearch32.png and then use the grid.on("rowclick", onRowClickHandler); instead so that you can get the actual rowclick event and then use the evt.grid.getItem(evt.rowIndex).WebLon_X;

deleted-user-Pi5x1UjkS2PY · ‎10-13-2014

Thanks Robert:

I got the rowclick working thanks to your help.

I was kind of hoping to get the search icon to work as I just thought that was a more user friendly way to go with this.

Thanks for your help and have a great day.

Michael

KenBuja · ‎10-14-2014

This example uses an icon on the web (which appears to be down right now) in a grid where the user can click to zoom.