3

I have a dgrid displaying data in a table that contains many columns. The default layout of the dgrid causes all columns to be visible on the page, which means they are collapsed and it is unable to see the full header or data in each column.

Table with default layout

I would like to show all columns expanded to see all the data and header information contained within them. Then, I would need a horizontal scrollbar to scroll sideways to view all columns. I was able to do this by changing the default layout of dgrid-row-table from table-layout: fixed to table-layout: auto, but then the columns didn't line up.

Table with full columns that don't line up

Is there a way to use a dgrid/OnDemandGrid with many columns and a horizontal scroll?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Brian
  • 2,702
  • 5
  • 37
  • 71

2 Answers2

1

My solution doesn't use dgrid/OnDemandGrid but still work.

1/ put your grid in 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 the structure of your grid put the element "width" to "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" }
                  ];

(for example)

Rows will have a size large enough to show entirely their largest content and the div container will have scroll.

Hope it will help.

tufekoi
  • 929
  • 2
  • 14
  • 33
1

dGrid supports this out of the box. All you need to do is set a width for the dgrid and set a minimum for each column. If the width of the columns are greater than the width of the dgrid it will scroll horizontally:

JS Fiddle http://jsfiddle.net/e9jad/7/

 .dgrid-grid {
    width: 100%
 }
 .dgrid-cell {
    width: 400px;
 }

Keep in mind the hight of dgrid is set to 30em by default so you may want to change this or the scroll may be off the bottom of your control.

Also you can see examples in the dojo tests http://dojofoundation.org/packages/dgrid/js/dgrid/test/widths.html

David Wilton
  • 344
  • 2
  • 11
  • You mention the CSS docs in the fiddle -- can you include a link? I'm trying to get auto height on my dgrid and it's driving me crazy! – streetlight May 22 '14 at 19:08
  • 1
    @streetlight this case is about horizontal scrolling. For auto height see http://www.sitepen.com/blog/2012/05/03/css-styling-of-dgrid/ – David Wilton May 25 '14 at 23:56