Dgrid Checkbox Editor

by schlomm

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>
<button id="disableButton" data-dojo-type="dijit/form/Button" type="button">Disable</button>
<button id="enableButton" data-dojo-type="dijit/form/Button" type="button">Enable</button>

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
        }));
        ui.disableButton.on("click", function () {
            console.log("disable grid");
            ui.existingItemsGrid.set("disabled", true);
        });
        ui.enableButton.on("click", function () {
            console.log("enable grid");
            ui.existingItemsGrid.set("disabled", false);
        });
    });
});

//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/Editor", "dgrid/extensions/DijitRegistry", "dojo/domReady!"],

function (declare, OnDemandGrid, Keyboard, Selection, Editor, ColumnResizer, DijitRegistry) {
    //define grid and create
    var Grid = declare([OnDemandGrid, Keyboard, Selection, ColumnResizer, DijitRegistry, Editor]);
    ui.existingItemsGrid = new Grid({
        columns: {
            firstName: "First Name",
            lastName: "Last Name",
            iceCream: {
                editor: 'checkbox',
                label: ' ',
                autoSave: true,
                sortable: false
            }
        },
        selectionMode: "single",
        cellNavigation: false
    },...