cssdojodgrid

dgrid with horizontal scroll

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?

Solution

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