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

DataGrid hide?

BarryGuidry

I am compiling the sample DataGrid here to my web application, but wonder if it is possible to hide the DataGrid until a search is performed, and then a 'close' function on the DataGrid as well?

Find more posts tagged with

Accepted answers

All comments

BarryGuidry

I am now trying to zoom to searched graphics (below)

function showResults(results) { 
        //This function works with an array of FindResult that the task returns 
        map.graphics.clear(); 
        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,194,204,0.5])); 
 
        //Create Extent to use for view an area containing all the search results
        var SearchAreaExtent;
 
        //create array of attributes 
        var items = dojo.map(results,function(result){ 
          var graphic = result.feature; 
          graphic.setSymbol(symbol); 
          map.graphics.add(graphic);
          
    //Add Extent to Search Area Extent
    if (SearchAreaExtent) SearchAreaExtent = SearchAreaExtent.union(graphic.geometry.getExtent());
          else SearchAreaExtent = graphic.geometry.getExtent();
    
          return result.feature.attributes; 
    
        });

, but it currently doesn't recognize the map extent following resize of the map and datagrid with:

dojo.style(dojo.byId("map"), "height", "75%");

Is it possible to use 'onExtentChange' function on resizing the map as such?

BarryGuidry

OK, I got it figured out now, after reading the information about using "layoutPriority" here. Being that both my datagrid and footer information are both in the "bottom" region, I had to set the layoutPriority of the two so that the datagrid will draw above the footer (which was just the opposite, by default, without any layoutPriority properties). Then, upon the function (init) I hide the datagrid and manually resize the map's height (as a percentage).
Code 1:

esri.hide(datagrid); 
dojo.style(dojo.byId("map"), "height", "93%");

Then, upon a click of a Search button, I have it do just the opposite of the code above, displaying the datagrid and resizing the map again.
Code 2:

esri.show(datagrid); 
dojo.style(dojo.byId("map"), "height", "77%");

Then, after the user selects a row source in the datagrid I have it simply repeat "Code 1", above.

BarryGuidry

I think I can get some use from that. Thanks, Tracy. But, the remaining problem I have is a header div tag, a center div tag (the map), and a bottom div tag (a footer w/links), and a rightpane div tag (the legend). Is there another section I can use a div tag for the datagrid, to place between the map and footer (center & bottom panes)?

I would prefer a javascript event that would simply remove the datagrid <div> rather than hide it, and then re-add it with an 'onclick' event.

TracySchloss

I haven't quite got this working because I don't have the syntax right on the "open part of the grid.

I have my collapse function as

 function collapseList() {
  dojo.byId("rightPane").style.display = 'none';
        dojo.style(dojo.byId("mapDiv"), "width", "100%");
        dijit.byId("mapDiv").resize();
         map.resize();
    map.reposition();

}

This did both hide the pane where my grid was loaded as well as expand my map to fill the screen. Now all I have to do is find the opposite of .style.display = 'none' and find a better place to put my 'hide' and 'show' buttons. I'm thinking I want to style them with an image of << and >>.

BarryGuidry

OK, I can make the datagrid hidden when the map loads by using

esri.hide(MyContentPane);

then appears by inserting

esri.show(MyContentPane);

after the "on-click" event, and again hides when selecting the row source in the datagrid.

All I need to figure out now is how to have the map resize, as if the bottom ContentPane didn't even exist (as a <div> tag). Any idea how to modify the code to make the map resize when the browser is resized?

map.resize(map)

This (above) snippet does the job of resizing the map (center pane) after hiding the contentPane, but does not load the map data. Or, is there a better way to accomplish this?

BarryGuidry

You may want to have the datagrid inside a FloatingPane,
http://dojotoolkit.org/reference-guide/1.7/dojox/layout/FloatingPane.html

And you can always make any element hidden/visible,
Ex: dojo.byId('grid').style.visibility = 'visible';

Thanks Rama. Your second solution does hide the grid table, but I would also like to hide the entire contentPane (this a div tag in the html section), in which the datagrid resides, and have the map resize to shrink/grow, based on the search button selection.

RChintapalli

You may want to have the datagrid inside a FloatingPane,
http://dojotoolkit.org/reference-guide/1.7/dojox/layout/FloatingPane.html

And you can always make any element hidden/visible,
Ex: dojo.byId('grid').style.visibility = 'visible';

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.