Dojo dgrid: no highlight on selection in invisible part of the grid - dojo

Question

I have a problem with a selection in OnDemandGrid( dojo 1.12.1) and I need some help.
A part of my grid is hidden on creation and this makes the selection 'single' works weird, the selection is active only on visible part of the content. While I scroll I have no more the highlight on my row img1.
However if I apply a sort on a column, the content is refreshed and the whole row becomes selectable.
The example on this page works for EnhancedGrid in selectionMode: 'single' without bugs on a hidden part of a content after loading.
https://dojotoolkit.org/reference-guide/1.10/dojox/grid/EnhancedGrid/plugins/Selector.html, any ideas how to acheve it?
What could I do while creating OnDemandGrid to resolve the problem? I've tried to put a css parameter box-sizing: border-box, but it didn't help me.
There are some simular issues for enchancedgrid, but the solition isn't good for me, maybe it's because I'm using the OnDemandGrid (
dojo EnchancedGrid items do not select programmatically in invisible part of the view)
require([
...
'dojo/store/Memory',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dgrid/extensions/ColumnResizer',
'dgrid/extensions/DijitRegistry'
], function (Memory, OnDemandGrid, Selection, ColumnResizer, DijitRegistry ) {
var columNs = {First_Name: {label: 'First Name'},
Last_Name: {label: 'Last Name'},
hello: {label: 'hello'},
age: {label: 'age'},
size: {label: 'size'},
name: {label: 'name'},
code: {label: 'code'},
id: {label: 'id'},
mdp: {label: 'mdp'},
username: {label: 'username'},
grid: {label: 'grid'}
};
var store = new Memory({ data: createData() });
var CustomGrid = declare([OnDemandGrid, Selection, ColumnResizer, DijitRegistry]);
var grid = new CustomGrid({
selectionMode: 'single',
cellNavigation: false,
store: store,
columns: columNs
}, 'grid');
grid.startup();
function createData() {
var data = [];
var column;
var i;
var item;
for (i = 0; i < 50; i++) {
item = {};
for (column in { First_Name: 1, Last_Name: 1, hello: 1, age: 1, size: 1, name: 1, code: 1, id: 1, mdp: 1, username: 1, grid: 1 }) {
item.id = i;
item[column] = column + '_' + (i + 1);
}
data.push(item);
}
return data;
}
});
//css
.dgrid {
height: 25em !important;
width: 100%;
}
.dgrid .dgrid-scroller {
margin-top: 24px !important;
}
.dgrid-cell {
width: 70px !important;
}
.dgrid-column-set-scroller {
display: inline-block;
overflow-x: auto;
overflow-y: hidden;
}

Answer 1

I could not reproduce your problem. See on the fiddle here.
One difference in that I replaced dojo/store/Memory, which was giving me an error (if you don't get this error maybe you are using a dgrid version older that 0.4 ?), with dstore/Memory.
Then the fiddle is using dojo 1.12.2 (should make no difference with 1.12.1), and dgrid / dstore 1.1.0 (that could explain the difference if you are using a significantly older version). It also uses dijit's claro.css & dgrid's dgrid.css. See below (extracted from the jsfiddle) the part of your source code that I modified:
require({
packages: [
{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0'
},
{
name: 'dstore',
location: '//cdn.rawgit.com/SitePen/dstore/v1.1.0'
}
]
},[
"dojo/_base/declare",
'dstore/Memory',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dgrid/extensions/ColumnResizer',
'dgrid/extensions/DijitRegistry'
], function (declare, Memory, OnDemandGrid, Selection, ColumnResizer, DijitRegistry ) {