Filling a dgrid with the results of an IdentifyTask

[KenBuja]

I'm building a data viewer application where a user can click on the map and see the attributes of all the features for the visible layers. This is a project I had originally built in Flex that I'm moving over to JavaScript. I would to put a dgrid into an InfoWindow that shows the results of an IdentifyTask for the visible layers in a map service. This would be similar to this sample, but using dgrids instead of tables.

I'm getting close, using this example from Derek Swingley, but I'm hitting a brick wall when it comes to creating the data store for the dgrid. While the dgrid sample shows how to do this using hardcoded field names, I have to do this dynamically. My application will be a template for several different projects, each with their own map service. Additionally, the map services may change over time, with new layers added or different fields being made visible.

[KellyHutchins · Accepted solution]

Here's a snippet showing how to do this with a query task. The approach would be similar with an identify except you might have to generate the columns using the layer's field property.

        var layer = results.layers[0].layer;         var q = new Query();         q.where = "1=1";         q.returnGeometry = false;          q.outFields = ["FID", "STATE_NAME","Number_Ent"]          layer.queryFeatures(q,function(queryResults){          //get the field info to build columns          var columns = dojo.map(queryResults.fields, function(field){           return {             field: field.name,             label: field.alias           }          });           //get all the attribute info          var data = array.map(queryResults.features, function(feature){             return  lang.clone(feature.attributes);           });             //create the grid           var grid = new Grid({            columns: columns          },"grid");           grid.renderArray(data);          }); 

[KenBuja]

Thanks, Kelly, that did the trick. Here's the code I that works. Now to get everything formatted to look good.

    function populateTC1(results, evt) {
        try {
            if (dijit.byId('tabs').hasChildren) {
                dijit.byId('tabs').destroyDescendants();
            }

            if (results.length == 0) {
                console.log('Nothing found.');
                return;
            }

            var combineResults = {};
            for (var i = 0, len = results.length; i < len; i++) {
                var result = results;
                var feature = result.feature;
                var lyrName = result.layerName.replace(' ', '');
                if (combineResults.hasOwnProperty(lyrName)) {
                    combineResults[lyrName].push(result);
                }
                else {
                    combineResults[lyrName] = [result];
                }
            }

            for (result in combineResults) {
                var columns = buildColumns(combineResults[result][0].feature);
                var features = [];

                for (i = 0, len = combineResults[result].length; i < len; i++) {
                    features.push(combineResults[result].feature);
                }

                var data = array.map(features, function (feature) {
                    return lang.clone(feature.attributes);
                });

                var dataGrid = new (declare([Grid, Selection]))({
                    id: "dgrid_" + combineResults[result][0].layerName,
                    bufferRows: Infinity,
                    columns: columns
                });

                dataGrid.renderArray(data);

                var cp = new ContentPane({
                    id: result,
                    //content: combineResults[result][0].layerName + '<br/>Found ' + combineResults[result].length,
                    content: dataGrid,
                    title: combineResults[result][0].layerId
                }).placeAt(dijit.byId('tabs'));
            }

            map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
        }
        catch (e) { console.log(e.message); }
    }

    function buildColumns(feature) {
        var attributes = feature.attributes;
        var columns = [];

        for (attribute in attributes) {
            var objects = {};
            objects.label = attribute;
            objects.field = attribute;
            columns.push(objects);
        }
        return columns;
    }

And this is what it looks like now

[ATTACH=CONFIG]24872[/ATTACH]