Dojo dgrid: (Pre) Select row in render
How do I set up dgrid and save it to determine if a row was already selected when the row was rendered?
For example, if my string data looks like this:
{
id: 1,
name: 'Item Name',
selected: true
}
My current code is to loop through the collection after the store is full, but I'm sure there must be a more efficient way to do this.
var items = [
{id: 1, name: 'Item 1', selected: true},
{id: 2, name: 'Item 2', selected: false}
];
require(
[
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dojo/store/Memory",
"dojo/_base/declare",
"dojo/_base/array"
],
function (OnDemandGrid, Selection, Memory, declare, array) {
var store = new Memory({
data: items,
idProperty: "id"
});
var grid = new declare([OnDemandGrid, Selection])({
selectionMode: "multiple",
columns: {
id: { label: "ID" },
name: { label: "Name" }
},
store: store
}, "MyGrid");
array.forEach(items, function (item) {
if (item.selected) {
grid.select(grid.row(item.id));
}
});
grid.startup();
});
}
);
source to share
Seems to Selection.js
do the same https://github.com/SitePen/dgrid/blob/master/Selection.js#L433 , but I got an idea how to make the selection part of the rendering process:
var grid = new declare([OnDemandGrid, Selection])({
selectionMode: "multiple",
store: store,
columns: {
id: {
label: "ID",
get: function(item) {
var grid = this.grid;
if (item.selected === true) {
grid.select(grid.row(item.id));
}
return item.id;
}
},
name: { label: "Name" }
},
"MyGrid"
);
See it in action: http://jsfiddle.net/phusick/stxZc/
source to share
I found this post and wanted to dedicate myself to this problem. I wanted to get the first row of data in the dgrid and that is where I found this post. But it helps me in my solution.
In the first column, I added a get function and was able to find and select the first record. Hope this helps anyone trying to get or select the first record in a dgrid.
var columns = [
{ label: "Name", field: '_item', x: null,
formatter: lang.hitch(this, this._nameFormatter),
get: lang.hitch(this, function(item){
console.log(item)
if(!this.x) {
this.x = item.id;
this.grid.select(item.id);
this.detailsPane.setDetails(item.id);
return item;
} else {
return item;
}
})
},
{ label: 'Email', field: 'email',
formatter: lang.hitch(this, this._emailFormatter)
},
{ label: "Phone", field: "phone" },
{ label: 'Address', field: 'address' },
{ label: 'City', field: 'city' },
{ label: 'State', field: 'state' },
{ label: 'Zip Code', field: 'zipcode'}
];
source to share