I have a dgrid (OnDemandGrid, DGridSelection) within a dijit ContentPane (within a BorderContainer) that displays over a map. The grid contains a header row (labels) and the content rows are data from a FeatureLayer. As the map is moved, the server is queried and the data updates and refreshes:
![TimDietz_0-1664914807769.png TimDietz_0-1664914807769.png](https://community.esri.com/t5/image/serverpage/image-id/52860i5E21FBCDEC5AD79E/image-size/medium?v=v2&px=400)
Note that despite the scrollbar, the header and content columns are aligned.
However, I now need to display two similar grids, so I've wrapped the ContentPane within a TabContainer. Everything functions as I need it to, except the content column widths no longer match the header column widths:
![TimDietz_1-1664915188086.png TimDietz_1-1664915188086.png](https://community.esri.com/t5/image/serverpage/image-id/52862iAB510C6FBD9856AB/image-size/medium?v=v2&px=400)
I have use the debugger to modify the CSS in every way I can think of, but I've hit a wall. If anyone has any advice, I'd really appreciate it.
(This is coded within a class method in TypeScript):
const DataGrid = declare([OnDemandGrid, DGridSelection]);
private dataGrid: any;
private dataGridTabContainer: TabContainer;
// columns and store are parameters passed to the method.
columns: { field: string; label: string }[];
store: Memory; // from 'dstore/Memory'
this.dataGrid = new DataGrid(
{
columns,
bufferRows: Infinity,
selectionMode: 'single',
collection: store,
},
'dataGrid'
);
this.dataGrid.startup();
this.dataGridTabContainer = new TabContainer({
style: "height: 100%; width: 100%;"
}, "dataGridTC");
// Note only one tab for now to simplify troubleshooting.
var cp1 = new ContentPane({
title: "Sites",
content: this.dataGrid // Add the grid to the pane
});
this.dataGridTabContainer.addChild(cp1);
this.dataGridTabContainer.startup();