Vertical scroll bar for dojo enhanced grid

Question

Required scroll bar to be display on the grid on first load...It is working in chrome, but not in IE...

For this, I require an event when data loaded to the grid is complete.

I tried 'onFetchComplete' event, it is called multiple times because it uses lazy load approach...

Also made changes to the css of 'dojoxGridContent' class to apply overflow-y: scroll...

But is is not working...

Can anyone help me on this issue.

Source Code:

var mygrid = new EnhancedGrid({
    id: "grid",
    store: gridStore, //Data store passed as input
    structure: gridStructure, //Column structure passed as input
    autoHeight: true,
    autoWidth: true,
    initialWidth: width,
    canSort : true,
    plugins: {
        filter: {
          //Filter operation
          isServerSide: true,
          disabledConditions : {"anycolumn" : ["equal","less","lessEqual","larger","largerEqual","contains","startsWith","endsWith","equalTo","notContains","notEqualTo","notStartsWith","notEndsWith"]},
          setupFilterQuery: function(commands, request){
              if(commands.filter && commands.enable){
                  //filter operation
                }
              }
            }
}, dojo.byId("mydatagrid"));   


mygrid.startup();

 #grid {
    height: 20em;
}

<div id="container" class="claro">
    <div id="mydatagrid" style="height:200px"></div>
</div>

Thanks

score 0 · Answer 1 · answered Aug 21 '17 at 09:35

In the Grid option you've just to assign a value (number of rows to show) to the autoHeight attribute option , by example autoHeight: 10 will show a range of 10 rows (with scroll)

You can check this working Fiddle

or see below snippet (problem of blocked filter iFrame )

require(["dojox/grid/EnhancedGrid", 
         "dojo/data/ItemFileWriteStore",
         "dojox/grid/enhanced/plugins/Filter",
         "dojo/parser", 
         "dojo/on", 
         'dojo/domReady!'], 
  function(EnhancedGrid, ItemFileWriteStore, Filter, parser, on) {
    var data = {
      identifier: 'id',
      items: []
    };

    var data_list = [{
        col1: "normal",
        col2: false,
        col3: 'But are not followed by two hexadecimal',
        col4: 29.91
      },
      {
        col1: "important",
        col2: false,
        col3: 'Because a % sign always indicates',
        col4: 9.33
      },
      {
        col1: "important",
        col2: false,
        col3: 'Signs can be selectively',
        col4: 19.34
      }
    ];

    var rows = 60;

    for (var i = 0, l = data_list.length; i < rows; i++) {
      data.items.push(dojo.mixin({
        id: i + 1
      }, data_list[i % l]));
    }


    var gridStore = new ItemFileWriteStore({
      data: data
    });

    var gridStructure = [
      [{
          'name': 'Column 1',
          'field': 'id'
        },
        {
          'name': 'Column 2',
          'field': 'col2'
        },
        {
          'name': 'Column 3',
          'field': 'col3',
          'width': '230px'
        },
        {
          'name': 'Column 4',
          'field': 'col4',
          'width': '230px'
        }
      ]
    ];
    
    var mygrid = new EnhancedGrid({
      id: "grid",
      store: gridStore, //Data store passed as input
      structure: gridStructure, //Column structure passed as input
      autoHeight: 10,
      autoWidth: true,
      initialWidth: 100,
      canSort: true,
      plugins: {
        filter: {
          //Filter operation
          isServerSide: true,
          disabledConditions: {
            "anycolumn": ["equal", "less", "lessEqual", "larger", "largerEqual", "contains", "startsWith", "endsWith", "equalTo", "notContains", "notEqualTo", "notStartsWith", "notEndsWith"]
          },
          setupFilterQuery: function(commands, request) {
            if (commands.filter && commands.enable) {
              //filter operation
            }
          }
        }
      }
    },"mydatagrid");


    mygrid.startup();  
                  

         
  }
);

#grid {
    height: 20em;
}
html, body {
    height: 100%;
    padding: 0; 
    margin: 0;
    font-family: Lucida Sans,Lucida Grande,Arial !important;
    font-size: 13px !important;
    background: white;
    color: #333;
}

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" rel="stylesheet"/>

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>


<div id="container" class="claro">
    <div id="mydatagrid" style="height:200px"></div>
</div>

Vertical scroll bar for dojo enhanced grid

1 Answers1