Dgrid with horizontal scrolling
I have a dgrid displaying data in a table that contains many columns. The default layout for dgrid forces all columns to be visible on the page, which means they are collapsed and it cannot see the full header or data in every column.
I would like to show all expanded columns in order to see all the data and header information they contain. Then I would need a horizontal scrollbar to scroll sideways to see all columns. I was able to do this by changing the default layout dgrid-row-table
from table-layout: fixed
to table-layout: auto
, but then the columns didn't line up.
Is there a way to use it dgrid/OnDemandGrid
with many columns and horizontal scrolling?
source to share
My solution doesn't use dgrid / OnDemandGrid, but still works.
1 / put your mesh in a container like this:
<div id="container">
<div id="grid" style="width:100%;height:100%"></div>
</div>
2 / set width, height and scroll in your css:
#container{
height: 200px;
width: 800px;
overflow: auto;
}
3 / in your grid structure, the "width" element is "auto":
var gridLayout = [
{
defaultCell: { width: 8, editable: false, type: cells._Widget, styles: 'text-align: right;' },
cells: [
{ name: "ID" , field: "id" , width: "auto" },
{ name: "Reg." , field: "reg" , width: "auto", editable: true },
{ name: "Type" , field: "type" , width: "auto" }
];
(eg)
The rows will be sized large enough to fully display their largest content, and the div will be scrolling.
Hope this helps.
source to share
dGrid supports this out of the box. All you have to do is set the width for the dgrid and set the minimum for each column. If the columns are wider than the dgrid, it will scroll horizontally:
JS Fiddle http://jsfiddle.net/e9jad/7/
.dgrid-grid {
width: 100%
}
.dgrid-cell {
width: 400px;
}
Remember the dgrid height is set to 30em by default, so you can change that or the scroll can be at the bottom of your control.
Also you can see sample dojo tests http://dojofoundation.org/packages/dgrid/js/dgrid/test/widths.html
source to share