OnDemandGrid displays an overlapped row.

[MuralidharMoka]

I am Trying to display data in a Grid using "OnDemandGrid". I am using Webappbuilder 2.10.

The data displays perfectly. but the first row  overlaps with the header. How do I fix this.

Here is the code.

Also attached all the code.

Widget.js

define(['dojo/_base/declare',
    'jimu/BaseWidget',
    'dojo/_base/lang',
    'dojo/Deferred',
    'dgrid1/OnDemandList',
    'dgrid1/OnDemandGrid',
    'dgrid1/Grid',
    'dgrid1/Selection',
    "dojo/store/Memory",
    'dstore/RequestMemory',
    "dgrid1/extensions/ColumnHider",
    "dstore/legacy/StoreAdapter"
  ],
  function(declare,
           BaseWidget,
           lang,
           Deferred,
           OnDemandList,
           OnDemandGrid,
           Grid,
           Selection,
           Memory,
           RequestMemory,
           ColumnHider,
           StoreAdapter) {
    //To create a widget, you need to derive from BaseWidget.
    return declare([BaseWidget], {

      baseClass: 'jimu-widget-listview',
      //methods to communication with app container:
      postCreate: function() {
        this.inherited(arguments);
        console.log('ListView::postCreate');
        this.createOnDemandGrid();
      },
      startup: function() {
        this.inherited(arguments);
      },
      createOnDemandGrid:function(){
        var  dataStore = new StoreAdapter({
            objectStore: new Memory({
              idProperty: "objectId"
            })
        });
        var columns=[
                       { field: "objectId",
                         label: "__OBJECTID",
                         sortable: true,
                         hidden: true
                       },
                      { field: "firstName",
                        label: "FIRST_NAME",
                        sortable: true
                      },
                      { field: "lastName",
                        label: "LAST_NAME",
                        sortable: true
                      }
                     ];
       var grid = new(OnDemandGrid.createSubclass([Selection, ColumnHider]))({
          columns: columns
        }, this.grid);

        grid.on("dgrid-select", this.selectFeatureFromGrid);
        dataStore.objectStore.data =[
          {objectId:1,firstName:'Muralidhar',lastName:"Moka"},
          {objectId:2,firstName:'Muralidhar',lastName:"Moka"},
          {objectId:3,firstName:'Muralidhar',lastName:"Moka"},
          {objectId:4,firstName:'Muralidhar',lastName:"Moka"},
          {objectId:5,firstName:'Muralidhar',lastName:"Moka"}
          ];
        grid.set("collection", dataStore);
        grid.startup();
      },
      selectFeatureFromGrid:function(){
        debugger;
      },
     });

  });

widget.html

<div>
  <div data-dojo-attach-point="grid"></div>

</div>

[RobertScheitlin__GISP]

Add these three css rules to your style.css to fix your issue:

.dgrid-scroller {
  margin-top: 15px !important;
}
.dgrid-header-row{
  right: 0 !important;
}
.dgrid {
  height: 28em !important;
}‍‍‍‍‍‍‍‍‍