checkbox - How do I add a dojo ComboBox to my DataGrid using a formatter? -
how add dojo combobox datagrid using formatter? thought i've been reading should able add dojo combobox datagrid formatter have done dojo checkbox (and dojo button on html page created). cannot find example of this. using dojo 1.10.0.
here existing code doesn't load because wrong formattercombobox formatter:
<!doctype html> <html > <head> <title>test widget</title> <link rel="stylesheet" type="text/css" href="dojo-release-1.10.0/dijit/themes/claro/claro.css" /> <link rel="stylesheet" type="text/css" href="css/dojomod.css" /> <link rel="stylesheet" href="dojo-release-1.10.0/dojo/resources/dojo.css" /> <link rel="stylesheet" href="dojo-release-1.10.0/dojox/grid/resources/clarogrid.css" /> <script>dojoconfig = {async: true, parseonload: false}</script> <script src="dojo-release-1.10.0/dojo/dojo.js"></script> <script> require(['dojox/grid/datagrid', 'dojo/data/itemfilereadstore', 'dijit/form/checkbox', 'dojo/domready!'], function(datagrid, itemfilereadstore, checkbox){ function formatter(){ var w = new checkbox({ label: "use input", onclick: function() { alert("checkbox - checked! (or unchecked!)"); } }); w._destroyonremove=true; return w; function formattercombobox(){ var combobox = new combobox({ label: "combo", onclick: function() { alert("checkbox - checked! (or unchecked!)"); } }); combobox._destroyonremove=true; return combobox; } } var layout = [ {name: 'feed', field: 'feed'}, {name: 'mission', field: 'mission', width: 6.5, styles: 'text-align: center; height: 21px;'}, {name: 'mission override', field: 'missionoverride', width: 6.5, formatter: formatter, /*custom format, add checkbox. */ styles: 'text-align: center;' }, {name: 'opmode', field: 'opmode', width: 6.5, styles: 'text-align: center; height: 21px;'}, {name: 'opmode override', field: 'opmodeoverride', width: 6.5, formatter: formatter, /*custom format, add checkbox. */ styles: 'text-align: center; height: 21px;' }, {name: 'platform', field: 'platform', width: 6.5, styles: 'text-align: center; height: 21px;'}, {name: 'tail number', field: 'tailnumber', width: 6.5, styles: 'text-align: center; height: 21px;' }, {name: 'producer org', field: 'producerorg', width: 6.5, styles: 'text-align: center; height: 21px;' }, ]; var store = new itemfilereadstore({ data: { identifier: "feed", items: [ {feed: '1. feed1', mission: 'mission1', override: '', mode: '', override: '', platform: '', number: '236', org: 'sa'}, {feed: '2. feed2', mission: 'mission2', override: '', mode: '', override: '', platform: '', number: '980', org: 'sa'}, {feed: '3. feed3', mission: 'mission3', override: '', mode: '', override: '', platform: '', number: '731', org: 'sa'}, {feed: '4. feed4', mission: 'mission4', override: '', mode: '', override: '', platform: '', number: '415', org: 'sa'}, {feed: '5. feed5', mission: 'mission5', override: '', mode: '', override: '', platform: '', number: '899', org: 'sa'}, ] } }); require([ "dojo/store/memory", "dijit/form/combobox", "dojo/domready!" ], function(memory, combobox){ var statestore = new memory({ data: [ {name:"alabama", id:"al"}, {name:"alaska", id:"ak"}, {name:"american samoa", id:"as"}, {name:"arizona", id:"az"}, {name:"arkansas", id:"ar"}, {name:"armed forces europe", id:"ae"}, {name:"armed forces pacific", id:"ap"}, {name:"armed forces americas", id:"aa"}, {name:"california", id:"ca"}, {name:"colorado", id:"co"}, {name:"connecticut", id:"ct"}, {name:"delaware", id:"de"} ] }); var combobox = new combobox({ id: "stateselect", name: "state", value: "california", store: statestore, searchattr: "name" }, "stateselect").startup(); }); var grid = new datagrid({ id: 'grid', store: store, structure: layout, autowidth: true, autoheight: true }); grid.placeat('gridcontainer'); grid.startup(); }); </script> </head> <body class="claro"> <div id="gridcontainer" style="width: 100%; height: 200px;"></div> </body> </html>
<script> require(['dojox/grid/datagrid', 'dojo/data/itemfilereadstore', 'dijit/form/checkbox', "dijit/form/combobox", 'dojo/domready!'], function (datagrid, itemfilereadstore, checkbox, combobox) { function formatter() { var w = new checkbox({ label: "use input", onclick: function () { alert("checkbox - checked! (or unchecked!)"); } }); w._destroyonremove = true; return w; } function formattercombobox() { var combobox = new combobox({ label: "combo", onclick: function () { alert("checkbox - checked! (or unchecked!)"); } }); combobox._destroyonremove = true; return combobox; } var layout = [ {name: 'feed', field: 'feed'}, {name: 'mission', field: 'mission', width: 6.5, styles: 'text-align: center; height: 21px;'}, {name: 'mission override', field: 'missionoverride', width: 6.5, formatter: formatter, /*custom format, add checkbox. */ styles: 'text-align: center;' }, {name: 'opmode', field: 'opmode', width: 6.5, styles: 'text-align: center; height: 21px;'}, {name: 'opmode override', field: 'opmodeoverride', width: 6.5, formatter: formatter, /*custom format, add checkbox. */ styles: 'text-align: center; height: 21px;' }, {name: 'platform', field: 'platform', width: 6.5, formatter: formattercombobox, styles: 'text-align: center; height: 21px;'}, {name: 'tail number', field: 'tailnumber', width: 6.5, styles: 'text-align: center; height: 21px;' }, {name: 'producer org', field: 'producerorg', width: 6.5, formatter: formattercombobox, styles: 'text-align: center; height: 21px;' }, ]; var store = new itemfilereadstore({ data: { identifier: "feed", items: [ {feed: '1. feed1', mission: 'mission1', override: '', mode: '', override: '', platform: '', number: '236', org: 'sa'}, {feed: '2. feed2', mission: 'mission2', override: '', mode: '', override: '', platform: '', number: '980', org: 'sa'}, {feed: '3. feed3', mission: 'mission3', override: '', mode: '', override: '', platform: '', number: '731', org: 'sa'}, {feed: '4. feed4', mission: 'mission4', override: '', mode: '', override: '', platform: '', number: '415', org: 'sa'}, {feed: '5. feed5', mission: 'mission5', override: '', mode: '', override: '', platform: '', number: '899', org: 'sa'}, ] } }); require([ "dojo/store/memory", "dijit/form/combobox", "dojo/domready!" ], function (memory, combobox) { var statestore = new memory({ data: [ {name: "alabama", id: "al"}, {name: "alaska", id: "ak"}, {name: "american samoa", id: "as"}, {name: "arizona", id: "az"}, {name: "arkansas", id: "ar"}, {name: "armed forces europe", id: "ae"}, {name: "armed forces pacific", id: "ap"}, {name: "armed forces americas", id: "aa"}, {name: "california", id: "ca"}, {name: "colorado", id: "co"}, {name: "connecticut", id: "ct"}, {name: "delaware", id: "de"} ] }); var combobox = new combobox({ id: "stateselect", name: "state", value: "california", store: statestore, searchattr: "name" }, "stateselect").startup(); }); var grid = new datagrid({ id: 'grid', store: store, structure: layout, autowidth: true, autoheight: true }); grid.placeat('gridcontainer'); grid.startup(); }); </script> 
Comments
Post a Comment