javascript - What is causing my weird graphical glitch with my dojo GridX? -

javascript - What is causing my weird graphical glitch with my dojo GridX? -

i dealing odd glitch display of gridx rows. when grid info updated after initial info load, entire gridx doesn't display, found if move mouse around rows triggers rest (hidden rows) pop out , displayed. see screenshots:

edit: seems discovered when mouse enters header, when pops out. how solve issue?

after mouse moves on grid in random motions:

code:

require([ //require resources. "dojo/dom", "dojo/store/memory", "dijit/form/button", "gridx/core/model/cache/sync", "gridx/grid", "gridx/modules/cellwidget", "dojo/domready!" ], function(dom, memory, button, cache, grid){ //use dojo/store/memory here store = new memory({ data: [ { id: 1, feedname: 'feed4', startstop: 0, pause: '', config: ''}, { id: 2, feedname: 'feed5', startstop: 0, pause: '', config: ''} ] }); // todo: don't know for: //we using memory store, synchronous. var cacheclass = "gridx/core/model/cache/sync"; var construction = [ { id: 'feedname', field: 'feedname', name: 'feed name', width: '110px' }, { id: 'startstop', field: 'startstop', name: 'start/stop', width: '61px', widgetsincell: true, navigable: true, alloweventbubble: true, decorator: function(){ //generate cell widget template string homecoming [ '<div style="text-align: center"><button data-dojo-type="dijit.form.button" ', 'onclick="onstartstopbuttonclick();" ', 'data-dojo-attach-point="btn" ', 'class="startstopbuttonplay" ', 'data-dojo-props="iconclass:\'startstopbuttonplayicon\'" ', '></button></div>' ].join(''); }, setcellvalue: function(data){ //"this" cell widget this.btn.set('label', data); } }, { id: 'pause', field: 'pause', name: 'pause', width: '61px', widgetsincell: true, navigable: true, alloweventbubble: true, decorator: function(){ //generate cell widget template string homecoming [ '<div style="text-align: center"><button data-dojo-type="dijit/form/button" ', 'onclick="onpausebuttonclick();" ', 'data-dojo-attach-point="btn2" ', 'class="pausebutton" ', 'data-dojo-props="iconclass:\'pauseicon\'" ', '></button></div>' ].join(''); }, setcellvalue: function(data){ //"this" cell widget this.btn2.set('label2', data); } }, { id: 'config', field: 'config', name: 'config', width: '61px', widgetsincell: true, navigable: true, alloweventbubble: true, decorator: function(){ //generate cell widget template string homecoming [ '<div style="text-align: center"><button data-dojo-type="dijit/form/button" ', 'onclick="onconfigbuttonclick();" ', 'data-dojo-attach-point="btn3" ', 'class="configbutton" ', 'data-dojo-props="iconclass:\'configicon\'" ', '></button></div>' ].join(''); }, setcellvalue: function(griddata, storedata, cellwidget){ //"this" cell widget cellwidget.btn3.set('label3', data); } } ]; //create grid widget. grid = grid({ id: 'grid', cacheclass: cache, store: store, structure: structure, autoheight: true, columnwidthautoresize: false }); //put dom tree. grid.placeat('compactwidgetgrid'); //start up. grid.startup(); updategriddata(memory, store); }); function updategriddata(memory, store){ grid.model.clearcache(); newstore = new memory({ // todo: replace info here actual feed info received picte server! data: [ { id: 1, feedname: 'testingthis1', startstop: 0, pause: '', config: ''}, { id: 2, feedname: 'testingthis2', startstop: 0, pause: '', config: ''}, { id: 3, feedname: 'testingthis3', startstop: 0, pause: '', config: ''}, { id: 4, feedname: 'testingthis4', startstop: 0, pause: '', config: ''}, { id: 5, feedname: 'testingthis5', startstop: 0, pause: '', config: ''}, { id: 6, feedname: 'testingthis6', startstop: 0, pause: '', config: ''}, { id: 7, feedname: 'testingthis7', startstop: 0, pause: '', config: ''} ] }); // reset store grid.setstore(newstore); // update grid info grid.model.store.setdata(newstore); // refresh gridx grid.body.refresh(); }

removing autoheight: true, solved problem.

javascript dojo dojo.gridx