Adding dgrids with variable widths to TabContainer

Question

I'm populating a TabContainer with grids (Dojo 1.8, dgrid) that are showing the results of a query for different datasets. Each tab is the result of a single dataset. The different datasets will have a varying number of fields, so I'm dynamically building each grid and adding it to a ContentPane, which gets added to the TabContainer.

My current problem is seting the width of the grids when they are built. The datasets could have from two fields to upwards of 100 fields to be shown in the grid. I've set a default width in CSS for the grid of 600px, but the grid will only show the first six fields of the dataset. If I set the width to "auto", it is only as wide as the TabContainer, removing the scroll bar and cutting off the data. Is it possible to set a width for each grid separately?

This is what the result looks like

This is the code for populating the TabContainer

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

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

function populateTC(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[i];
            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][i].feature);
            }

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

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


            dataGrid.renderArray(data);
            dataGrid.resize();

            dataGrid.on(".dgrid-row:click", gridSelect);

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

            cp.addChild(dataGrid);

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

Answer 1

I was able to use the AddCssRule to dynamically change the size of the grids

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

dataGrid.renderArray(data);

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

Here is a Fiddle that shows the result. Click on a colored polygon to show the different grids (although the content is sometimes being shoved into the header of the grid). Also, the tabs aren't being rendered correctly, but there should be 0, 224, and 227 (if you also clicked on a point).

Answer 2

The problem is not with the grid width, it's the column widths. They fit the container.

If you give a column a fixed width, you will get the desired effect.

You should be able to style .dgrid-cell or .dgrid-column-[index]

I've also had a need for more control depending on the column data. You can control the style by providing a column with its own renderHeaderCell and renderCell method as well. (style refers to dom-style)

renderHeaderCell: function(node) {
    style.set(node, 'width', '50px');
}

renderCell:  function(object, value, node) {
    style.set(node, 'width', '50px');
}