dGrid content shoved up into the header?

[TracySchloss]

I have a dGrid that I'm populating from featureLayer.selectFeatures.  I'm trying to give the user a couple of options.  By default, the selected features will be in a dGrid that has been formated to more of a list look, using a row renderer.  Then I'd like to give the option to click a "view as table' button and see that same data in more of a traditional grid layout.  This is shown in a floating pane based on a button click. 

The data in my traditional grid layout is populating fine, but the contents of the grid are placed directly over the top of the grid headers. I wouldn't expect this is a default behavior.  I assume this is a style somwhere?  I can't just set .dgrid-content because it will impact my 'stacked' grid.

I'm also noticing that the content is way bigger than it needs to be, introducing scrollbars in a list that is plenty big enough for the 3 records I've selected.  I've had a hard time finding much documentation on the styling of any of the dojo components.

Does anyone have any suggestions?

[JonathanUihlein]

Between the textual overlap and the extra scrollbar, I'm thinking this issue is related to when you call startup on that second dgrid.

You may be calling startup on the dgrid too early (I ran into the same issue a few weeks ago).

Try calling startup on the grid after the main document parser has been run.

If that doesn't work, can you provide additional code, or recreate the issue in a JSFiddle?

[TracySchloss]

None of the examples I'm working from with dGrid include startup.  I'm not sure where that would happen the way I have this set up.  The grids only get defined if the user makes a selection.  I noticed this AM I was missing dgrid.css, and I thought that was the missing piece.  No go, it didn't fix my problem.

Here are the relevant functions. The variable userGeometry is defined by the user drawing a shape (polygon, extent or multiple point) with a drawing toolbar.

function queryFeaturesbyShape(userGeometry){
    map.graphics.clear();
    eezFeatureLayer.clearSelection();
    var clearGrid_bg = dojo.byId('resultsSelectGrid').innerHTML = "";
    var clearGridTable = dojo.byId('selectGridTable').innerHTML = "";
    var query = new esri.tasks.Query();
    query.outSpatialReference = {
        wkid: 102100
    };
    query.returnGeometry = true;
    query.outFields = ["*"];
    query.geometry = userGeometry;
    query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
    query.returnGeometry = true;
    fLayers = setFeatureLayers();
    var bg2010Vis = fLayers.indexOf('eezFeatureLayer');

    if (fLayers.indexOf('eezFeatureLayer') >= 0) {
        eezFeatureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW);
            var selectHandler = dojo.connect(eezFeatureLayer, "onSelectionComplete", populateBgGrid);
    }
}  
function populateBgGrid (results) {
    var data = [];
    if (dGridStacked) {
        dGridStacked.refresh();
    }

    if (dGridTable) {
        dGridTable.refresh();
    }

    data = dojo.map(results, function(feature){
    return {
        'censusid': feature.attributes['DE_MOEEZ.DEAPPMOEEZGISD.blockGroupCalculations.BlockGroupName'],
        'population': formatThousandSeparator(feature.attributes['DE_MOEEZ.DEAPPMOEEZGISD.blockGroupCalculations.Population']),
        'unemployment': formatPercentage(feature.attributes['DE_MOEEZ.DEAPPMOEEZGISD.blockGroupCalculations.Unemployment']),
        'countypoverty': formatPercentage(feature.attributes['DE_MOEEZ.DEAPPMOEEZGISD.blockGroupCalculations.CountyPoverty']),
        'statepoverty': formatPercentage(feature.attributes['DE_MOEEZ.DEAPPMOEEZGISD.blockGroupCalculations.StatePoverty']),
        'zonecrosspct': formatOverlap(feature.attributes['DE_MOEEZ.DEAPPMOEEZGISD.blockGroupCalculations.ZoneCrossPct'])
    };
   });
   dGridStacked = new dgrid.Grid({
        renderRow: renderRowFunction,
        showHeader: true
   }, "resultsSelectGrid");
    
    dGridStacked.renderArray(data);
    dGridStacked.sort('censusid');
    
 dGridTable = new dgrid.Grid({
        id:'dGridTable',
        showHeader: true,
        bufferRows: Infinity,
        columns: {
            "censusid": "Block Group",
            "population": "Population",
            "unemployment":  "Unemployment",
            "countypoverty": "County Poverty",
            "statepoverty": "State Poverty",
            "zonecrosspct": "Percent Overlap"
        }
    }, "selectGridTable");

    dGridTable.renderArray(data);
    dGridTable.sort('censusid');
      
    dGridStacked.on('.dgrid-row:click', function(event){
        eezFeatureLayer.clearSelection();
        var row = dGridStacked.row(event);
        var query = new esri.tasks.Query();
        var queryId = [row.data.censusid];
        query.where = "SD_GIS.OGI.CENSUS_BLOCKGRP_2010.GEOID10 = '" + queryId + "'";
        query.returnGeometry = true;
        query.outFields = ["*"];
        var deferred = eezFeatureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(features){
            if (features.length > 0) {
                var feature = features[0];
                var graphic = new esri.Graphic(feature.geometry, redFillSymbol);
                map.graphics.add(graphic);
            }
            else {
                console.log("No records by that ID");
            }
        });
        deferred.addErrback(function(error){
            console.log("Grid Select Error = " + error);
        });
    });
}
//data coming from the query needs to be formatted to look right in the grid
function formatThousandSeparator(checkNumber){
    checkNumber += '';
    x = checkNumber.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}
function formatPercentage (checkNumber) {
    var test1= checkNumber.toFixed(3);
    var test2 = test1 * 100;
    var formatPct = test2.toFixed(1) + "%";
    return formatPct;
}
function formatOverlap (checkNumber) {
    var test1 = checkNumber.toFixed(1);
    var formatPct = test1 + "%";
    return formatPct;
}
function renderRowFunction (obj,options) {
 // var template = '<div class="title">${0}</div><div class="subtitle"><div class="details">${1}</div> <div class="details"> ${2}<br> ${3}</div>';
   var template = '<div class="title">${0}</div><div class="details">Population: ${1}</div> <div class="details">Unemployment: ${2}</div><div class="details">County Poverty: ${3}</div><div class="details"> State Poverty: ${4}</div><div class="details"> Overlap Pct: ${5}</div>';
    return dojo.create("div",{
       innerHTML : dojo.string.substitute(template,[obj.censusid,obj.population,obj.unemployment,obj.countypoverty,obj.statepoverty,obj.zonecrosspct])
      });
}

[KenBuja · Accepted solution]

I've come across this issue also, but it's an intermittent problem. Here's a Fiddle that uses the dGrid that stores the results of the IndentifyTask on different visible layers of a service and put them into different tabs on a TabContainer. I had set this up for a post asking if anyone knew how to dynamically set the width of different grids in a TabContainer. The grids have variable heights, depending on how many rows are returned from each IndentifyTask. This was set in css using

.dgrid-grid {     height: auto;     width: 700px; }

I agree that the documentation of dGrid is not very good

[TracySchloss]

Thanks, this helps.  I don't quite get why I had to add a margin-top style to get this fixed, but that seems to be what it needed.

[RobertScheitlin__GISP]

I know this thread is old but I ran into this exact problem and grid.resize(); fixed it for me.