Vertical scroll bar for dojo enhanced grid

Dojo enhanced grid

by bRIMOs

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
<div id="mydatagrid" style="height:200px"></div>

CSS

#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;
}

JavaScript

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"]
          },
 ...