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 enter image description here

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

score 0 · Answer 1 · answered Jun 18 '13 at 13:12

0

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

answered Jun 18 '13 at 13:12

Kryptic

1,922
2
21
29

Setting the grid width didn't fix it. I had already cell the .dgrid-cell style to 100px and changed it to 50px. I have a few more columns showing, but the grid is still 600px wide. – kenbuja Jun 18 '13 at 13:57
Interesting, I just have no width style on the grid and a fixed width on .dgrid-cell and it renders correctly. I'll dig a little more to see if I'm doing anything differently though. – Kryptic Jun 18 '13 at 14:59

score 0 · Accepted Answer · answered Jul 25 '13 at 20:28

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).

Adding dgrids with variable widths to TabContainer

2 Answers2