How to add dgrid/OnDemandGrid inside a Dojo digit?

[DavidChrest]

Does anybody know the trick to get a dgrid placed inside a dijit, such as a Tab Container or TitlePane?

This little code snippet did not work for me: | Dojo FAQ: Why doesn’t Dijit recognize my dgrid instances? | Blog | SitePen..

Any help would be greatly appreciated!

David

[TimWitt2]

David,

in this example I placed it in the bottom pane, does that help?

Find Street Example - JSFiddle

Tim

[DavidChrest]

Your example shows  "dojox/grid/DataGrid", Im asking about "dgrid/OnDemandGrid".

[TimWitt2]

Ahh, I see! Sorry about that.

[thejuskambi]

I dont understand, why you are having problem with placing a dgrid inside a dijit. I have done it in couple of application. The main thing is to add it in the code and not through html tags.

you can just have a placeholder div in the html (template) and then create the grid during startup or create method. Check out the CMV framework.

[KenBuja · Accepted solution]

In the application, the user can turn on layers and click on the visible features. For each layer turned on, a tab will be added to the TabContainer containing a dGrid of the returned features. You can see a version of this here

First, I create a TabContainer when initializing the application like this:

tc = new TabContainer({
    id: "tabs",
    doLayout: false,
    style: { "width": "95%", "height": "100%" }
}, domConstruct.create("div"));

This is the code for building the Tabs from the results of an IdentifyTask

function buildTabContainer(results) {
    if (tc.hasChildren()) {
        tc.destroyDescendants();
    }
    var combineResults = {};
    layerResultsGraphic.clear();

    for (var i = 0, len = results.length; i < len; i++) {
        var result = results;
        var feature = result;
        if (combineResults.hasOwnProperty(result.layerName)) {
            combineResults[result.layerName].push(result);
        } else {
            combineResults[result.layerName] = [result];
        }
        switch (feature.geometry.type) {
            case "point": case "multipoint":
                layerResultsGraphic.add(new Graphic(feature.geometry, symbolResultPoint, feature.attributes));
                break;
            case "polyline":
                layerResultsGraphic.add(new Graphic(feature.geometry, symbolResultPolyline, feature.attributes));
                break;
            case "polygon": case "extent":
                layerResultsGraphic.add(new Graphic(feature.geometry, symbolResultPolygon, feature.attributes));
                break;
        }
    }

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

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

            var data = arrayUtils.map(features, function (feature) {
                return lang.clone(feature.attributes);
            });
            var dataGrid = new (declare([Grid, Selection, DijitRegistry, ColumnHider]))({
                bufferRows: Infinity,
                columns: columns,
                selectionMode: "single",
                "class": "resultsGrid"
            });

            var gridWidth = "width: " + String(columns.length * 100) + "px";
            dataGrid.addCssRule("#" + dataGrid.id, gridWidth);

            dataGrid.on("show", function () {
                dataGrid.resize();
            });
            //dataGrid.on(mouseUtil.enterRow, gridEnter);
            dataGrid.on(mouseUtil.leaveRow, function () {
                map.graphics.clear();
            });
            var plural = "";
            if (combineResults[result].length !== 1) { plural = "s"; }
            var cp = new ContentPane({
                id: result,
                content: combineResults[result].length + " feature" + plural,
                title: combineResults[result][0].layerName,
                style: "overflow: auto"
            }).placeAt(registry.byId("tabs"));

            cp.addChild(dataGrid);
            cp.startup();
            dataGrid.renderArray(data);
        }
    }
    tc.startup();
    tc.resize();
    return true;
}

[DavidChrest]

Thanks so much Ken! Also, love your website! Very nice. Really helped inspire some ideas. Your explanation is the most straight-forward I've seen and I can understand it best. I'm a bit of a newbie so I was used to simply nesting dijits within dijits (like a set of RadioButtons inside a TitlePane).

David