Dgrid Checkbox Editor
HTML
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<fieldset>
<legend>Requirement</legend>
<ul>
<li>List Requirements</li>
</ul>
</fieldset>
<div id="existingItemsGrid"></div>
CSS
.field-iceCream {
width: 30px;
text-align: center;
}
.field-iceCream input {
width: auto;
}
JavaScript
var ui = {};
require({
packages: [{
name: 'dstore',
location: '//cdn.rawgit.com/SitePen/dstore/v1.0.0'
}]
}, ["dojo/ready", "dstore/Memory"],
function (ready, Memory) {
ready(function () {
var people = [{
id: 1,
firstName: "Billy",
lastName: "Madison"
}, {
id: 2,
firstName: "Happy",
lastName: "Gilmore"
}]
ui.existingItemsGrid.set("collection", new Memory({
data: people
}));
});
});
//Setup dgrids
require({
packages: [{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v0.4.0'
}, {
name: 'xstyle',
location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
}, {
name: 'put-selector',
location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.6'
}]
}, ["dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Keyboard", "dgrid/Selection", "dgrid/extensions/ColumnResizer", "dgrid/Selector", "dgrid/extensions/DijitRegistry", "dojo/domReady!"],
function (declare, OnDemandGrid, Keyboard, Selection, Selector, ColumnResizer, DijitRegistry) {
//define grid and create
var Grid = declare([OnDemandGrid, Keyboard, Selection, ColumnResizer, DijitRegistry, Selector]);
ui.existingItemsGrid = new Grid({
columns: {
{ selector: 'checkbox' },
{ label: 'Column 2', sortable: false },
{ label: 'Column 3' }
},
selectionMode: "single",
cellNavigation: false
}, "existingItemsGrid");
});
//Parse widgets and setup ui variable for easy access
require(["dojo/parser", "dojo/ready", "dijit/registry", "dojo/_base/array"],
function (parser, ready, registry, array) {
ready(100, function () {
parser.parse().then(function () {
array.forEach(registry.toArray(), function (instance) {
ui[instance.id] = instance;
});
}).otherwise(function (e) {
...