nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Zoom to selected row of DataGrid in QueryBuilderWidget of FlexViewre1.3

Shimonchh

I am working on QueryBuilderWidget of FlexViewer 1.3.I want to zoom the selected row of DataGrid which is populated with the result of query.
Now when I write map.centerAt map doesn???t displayed but map point of corresponding DataGrid row is highlighted.While map.centerAt is working for another widgets.

if (map.scale > zoomScale)
map.scale = zoomScale;

map.centerAt(MapPoint(gr.geometry));
map.infoWindow.styleName = "myInfoWindow";
map.infoWindow.show(MapPoint(gr.geometry) );
map.infoWindowContent=vBoxData;

please suggest me some way to center the map at selected map point.

Find more posts tagged with

Accepted answers

All comments

RobertScheitlin__GISP

shimon31,

Not seeing all your code it is hard to say where you are going wrong. Here is some code to handle points, lines and polygons.

add this import:

import mx.events.ListEvent;

add these new functions:

private function findGraphicByAttribute(attributes:Object):Graphic
  {
    for each( var graphic:Graphic in mqGraphicsLayer.graphicProvider)
    {
      if ( graphic.attributes === attributes)
      {
        return graphic;
      }
    }   
    return null;
  }
  
  private function onItemClick(event:ListEvent):void
  {
   var gra:Graphic = findGraphicByAttribute(event.itemRenderer.data);
   var pt:MapPoint = null;
   var sIcon:String="";
   if (gra.geometry is MapPoint){
    pt = gra.geometry as MapPoint;
    if (map.scale > 5000)
     map.scale = 5000;
    map.centerAt(pt); 
   } else if (gra.geometry is Polygon) {
    pt = new MapPoint();    
    pt.x = (gra.geometry.extent.xmax + gra.geometry.extent.xmin) / 2
    pt.y = (gra.geometry.extent.ymax + gra.geometry.extent.ymin) / 2
    sIcon = ICON_URL + "i_info.png";
    map.extent = gra.geometry.extent;
   }  else if (gra.geometry is Polyline){
    var polyline:Polyline = gra.geometry as Polyline;
                pt = polyline.extent.center;
    sIcon = ICON_URL + "i_info.png";
    map.extent = gra.geometry.extent;
   }
   if (pt != null){
     var sContent:String = "";
     var obj:Object = gra.attributes
     var fld:String;
     var value:String;
     for (fld in obj)
         {
            value = obj[fld].toString();
            sContent = (sContent.length == 0)? fld  + " = " + value + "<br/>" : 
                    sContent +  fld + " = " + value + "<br/>";
               
         }     
     var infoData:Object = 
    {   
     icon : sIcon,
     content: sContent, 
     point: pt,
     link: ""      
    };
    this.showInfoWindow(infoData);      
    }
  }

Change the datagrid:

<mx:DataGrid id="QBData" width="100%" height="100%" itemClick="onItemClick(event)" />

Shimonchh

Thanks for your help sir.
But still the problem remian same.Actually when map is centered at corresponding point then infowindow is displayed at proper position but map is not displayed.I have tried your suggested code also.Map.centreAt is working with search widget but not working with QueryWidget.
Please suggest some another method.

RobertScheitlin__GISP

shimon31,

Lets check for for the simple stuff.

if (gra.geometry is MapPoint){
    pt = gra.geometry as MapPoint;
    if (map.scale > 5000)
     map.scale = 5000;
    map.centerAt(pt);

The scale of 5000 add one more zero like this:

if (gra.geometry is MapPoint){
    pt = gra.geometry as MapPoint;
    if (map.scale > 50000)
     map.scale = 50000;
    map.centerAt(pt);

It is probably that you basemaps are not able to draw down to that scale.

Shimonchh

map.scale=zoomscale works but when i write map.centerAt(pt) map disappeared but infowindow is displayed .
Is it possible to display infowindow without centering the map at pt.Actually i tried but it didn't work.
I very confused same code is working somewhere else but not here.Is there any prerequisite of map.centerAt function.

Shimonchh

When i try zoom to query result then again same problem occurs. when i write
map.extent = multiPoint.extent.expand again map doesn't displayed.Is there problem with map or with my code.

if (fset != null){
     switch(fset.geometryType)
            {
             case Geometry.MAPPOINT:
             {
              var multiPoint:Multipoint = new Multipoint();
              for each (var gra:Graphic in fset.features) {
               multiPoint.addPoint(MapPoint(gra.geometry));
              }
              if (multiPoint.points.length > 1){
               map.extent = multiPoint.extent.expand(1.5);
              }
        else{

         if (map.scale > zoomScale)
          map.scale = zoomScale;
         map.centerAt(multiPoint.points[0]);
        }

        break;
             }
             case Geometry.POLYLINE:
             {
                 break;
             }

             case Geometry.POLYGON:
             {
                 var unionExtent:Extent;
        var firstGra:Graphic = fset.features[0];
        unionExtent = Polygon(firstGra.geometry).extent;
        for each (var selectGra:Graphic in fset.features){
         unionExtent = unionExtent.union(Polygon(selectGra.geometry).extent);
        }
        map.extent = unionExtent.expand(1.5);
                 break;
             }
         }
    }

RobertScheitlin__GISP

Shimon31,

I still think that you are having a spatial reference issue try putting a trace statement in your for loop.

for each (var gra:Graphic in fset.features) {
multiPoint.addPoint(MapPoint(gra.geometry));
}
if (multiPoint.points.length > 1){
map.extent = multiPoint.extent.expand(1.5);
trace("Map SR: " + map.spatialReference.toString());
trace("Gra SR: " + gra.spatialReference.toString());
}
else{
trace("Map SR: " + map.spatialReference.toString());
trace("Gra SR: " + gra.spatialReference.toString());
if (map.scale > zoomScale)
map.scale = zoomScale;
map.centerAt(multiPoint.points[0]);
}

mgiles86

Hi Robert,
I am trying to use the code you provide in this thread to zoom to my points when i click on them in my datagrid. A problem exists in the findGraphicByAttribute() function: The if ( graphic.attributes === attributes) statement is never entered (because the attirbutes of the graphics in myGraphicsLayer never matches the attribute variable (event.itemRenderer.data sent from clickHandler(event:ListEvent)). Ive been trying to figure out why the attribute object would not match the attributes of the graphics within myGraphicsLayer and the only thing i can think of is that the attributes are not sent properly through the ListEvent. My datagrid uses dataProvider="{findTask.executeLastResult}". Could this be? Are there any other reasons why this could happen?

RobertScheitlin__GISP

M Giles,

I don't think that the attributes will ever match using the

dataProvider="{findTask.executeLastResult}"

That is just a shortcut way of getting data into a dataprovider and is not going to match with === equality to an graphics.attributes.

mgiles86

Can you briefly describe how I could load the datagrid so that i can zoom to and display popups...I have tried setting the dataProvider = fs where fs is an array populated from FindEvent.findResults but that doesnt work either - is this the same thing??

mgiles86

I modified my code to add graphics.attributes (where graphics are the graphics that i add to each point that my findtask returns) to an array called fs. Then i set [myDataGrid.dataProvider = fs]. This fixes the problem i have with the zoom to function however i have lost my location names in the datagrid. How can i send both the names and the objects themselves to the dataprovider??

RobertScheitlin__GISP

M Giles,

You will have to actually define your datagrid fields and not depend on the datagrid to build them for you.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.