SCROLL issue in Dojo Enhanced Grid-programmatically

Question

I am facing issue with data displayed in Dojo enhanced grid. Grid containd two records(rows) but it is not displayed properly and also a horizontal scroll is coming which is scrollable beyond headers of the dojo grid.

I am creating a dojo enhanced grid programmatically as below:-

GRID Code:-

grid=  new dojox.grid.EnhancedGrid({
        id:"grid",
                              noDataMessage: noRecMsg,
                              escapeHTMLInData:false,
                              plugins: {
                              filter: {
                              closeFilterbarButton: false
                              },indirectSelection: true,
                              pagination: {
  pageSizes: ["25", "50", "100", "All"],
              description: true,
                               sizeSwitch: false,
              pageStepper: true,
                               gotoButton: false,
                              /*page step to be displayed*/
             maxPageStep: 3,
                      /*position of the pagination bar*/
            position: "top"
         }},
                              selectionMode: "single", 
                              autoWidth: true,
rowSelector: '20px'},
document.createElement('div'));
dojo.byId("gridDiv").appendChild(grid.domNode);
grid.startup();

Store and Layout code as:-
gridLayout = [];
gridLayout.push({
                                                            'field': gridField, 
                                                            'name': gridHeader,
                                                            'width': '120px'                  
                                                            });
grid.setStore(store);
grid.setStructure(gridLayout);

HTML Code:-

<div id="Det" data-dojo-type="dojox.widget.Portlet"         title=" Listing" dragRestriction="true" >
<table width="100%" height="50%" border="0">
<tr><td>
<div id=" gridDiv " ></div>
</td></tr></table>
</div>

I am trying to remove horizontal scroll and also to display rows without vertical scrolling. Please guide/ help in resolving this. Tried some options like (grid.resize(), autoHeight, autoWidth) but none worked yet.

Regards, Sagar

gasser gasser · Accepted Answer · 2014-11-25T11:50:58

enhanced grids have two main divs ("dojoxGridContent", "dojoxGridScrollbox") u can fined them using firebug once page rendered. below is part of how it is converted to html tags

<div role="presentation" dojoattachpoint="scrollboxNode" class="**dojoxGridScrollbox**" style="height: 461px; overflow: hidden;">
    <div role="presentation" hidefocus="hidefocus" dojoattachpoint="contentNode" class="**dojoxGridContent**" style="height:100%; overflow-y:auto;">

you will need to override the overflow attribute for "dojoxGridContent" deiv e.x overflow-y: auto (which will set the vertical scrolling to true and the horizontal to false)

dojo.query('.dojoxGridContent').attr('style','overflow-y:auto;');

another approach is to increase the height of the "dojoxGridContent" div to be using same syntax aboec.

SCROLL issue in Dojo Enhanced Grid-programmatically

1 Answers