CODEWITHSUNDEEP
dojodgrid
Naci
Naci

Reputation: 231

dgrid header and contents overlapping

I am working on a templated widget to display a dgrid. It seems to be working fine except that the the header and content are overlapping. Here is my Plnkr code. Some people suggested creating a custom grid mixing with DijitRegistry, which in my case causes the following error:

Tried to register widget with id==dijit__TemplatedMixin_0 but that id is already registered.

In addition I tried resize() method in two events as some people suggested, but that didn't help either.

Here is my code:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css" />
</head>
<body class="claro">
  <div id="myContainer"></div>
  <script type="text/javascript">
    var dojoConfig = {
      async: true,
      parseOnLoad: true
    };
  </script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>
  <script type="text/javascript">
    require({
    packages: [
        {
            name: 'dgrid',
            location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
        },
        {
            name: 'xstyle',
            location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
        },
        {
            name: 'put-selector',
            location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
        }, 
        {
            name: 'myApp',
            location: window.location.href.replace(/\/$/, "")
      }
    ]
}, ["dojo/dom", "dojo/_base/array", "myApp/SimpleTemplatedGridWidget", "dojo/domReady!"], function(dom, arrayUtil, MyWidget) {
      var widget = new MyWidget().placeAt(dom.byId('myContainer'));
    });
  </script>
</body>
</html>

SimpleTempletedGridWidget.js

define([
     "dgrid/extensions/DijitRegistry",
     "dojo/_base/declare",
     "dgrid/OnDemandGrid",
     "dijit/_WidgetBase",
     "dijit/_TemplatedMixin",
     "dojo/text!./SimpleTemplate.html"
],
function (DijitRegistry, declare, Grid, _WidgetBase, _TemplatedMixin, template) {
    return declare([_WidgetBase, _TemplatedMixin], {
        templateString: template, //need to add
        data : [
            { first: 'Bob', last: 'Barker', age: 89 },
            { first: 'Vanna', last: 'White', age: 55 },
            { first: 'Pat', last: 'Sajak', age: 65 }
        ],

        columns : {
            first: 'First Name',
            last: 'Last Name',
            age: 'Age'
        },

        postCreate: function() {
          //myGrid = new (declare([Grid, DijitRegistry]))({
          //Including DijitRegistry in the custom grid as above causes the following error:
          //Tried to register widget with id==dijit__TemplatedMixin_0 but that id 
          //is already registered
            myGrid = new (declare([Grid]))({
                columns: this.columns,
                idProperty: "id"
            }, this.AttachGrid);
            myGrid.renderArray(this.data);
            myGrid.startup();
            //Resize does not fix it
            myGrid.resize();
        },

        //People talk about using resizing the grid in onShow event,
        //but it looks like this event does not fire
        //source: https://github.com/SitePen/dgrid/issues/249
        onShow: function(){
          this.inherited(arguments);
          this.myGrid.resize();
          console.log("Shown!");
        }
    });
});

SimpleTemplate.html

<div data-dojo-attach-point='AttachGrid'></div>

Upvotes: 0

Views: 1087

Answers (1)

pgianna
pgianna

Reputation: 725

You need to call resize() after you place your grid (not in postCreate()). You can do this manually by adding a resize() function in your grid widget:

    postCreate: function() {
        this.myGrid = new (declare([Grid]))({
            columns: this.columns,
            idProperty: "id"
        }, this.AttachGrid);
        this.myGrid.renderArray(this.data);
        this.myGrid.startup();
    },

    resize: function() {
        this.myGrid.resize();
    }

And in index.html:

  var widget = new MyWidget().placeAt(dom.byId('myContainer'));
  widget.resize();

Here is a fork of your code: plnkr

Still I don't know what causes the error with DijitRegistry.

Upvotes: 3

Related Questions