JSFiddle - React, Tailwind, and code Playground

by amiramix

HTML

<script src="http://amd.egoworx.com/package/dgrid-0.3.3.js"></script>
<script src="http://amd.egoworx.com/package/put-selector-0.3.2.js"></script>
<script src="http://amd.egoworx.com/package/xstyle-0.0.5.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<div class="claro">
  <div id="grid"></div>
  <p>
    <button onClick="alert(dijit.byId('id-0').get('value'))">Get value</button>
  </p>
</div>

CSS

.mySelect {
    border: 1px solid #b5bcc7;
    background-color: #ffffff;
 
    width: 100px;
    height: 17px;
 
    /* Make this position: relative so our arrow is positioned within */
    position: relative;
    padding: 0;
}
.mySelect .label {
    line-height: 17px;
    vertical-align: middle;
}
.mySelect .arrow {
    /* Position the arrow on the right-hand side */
    position: absolute;
    top: 0;
    right: 0;
 
    /* Use claro's arrow image */
    background-image: url("https://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/form/images/commonFormArrows.png");
    background-position: -35px 70%;
    background-repeat: no-repeat;
 
    /* 16x16 with a white border and a gray background */
    width: 16px;
    height: 16px;
    border: 1px solid #ffffff;
    border-top: none;
    background-color: #efefef;
}

.mySelect .dgrid {
    position: absolute;
    top: 17px;
    left: -1px;
    width: 100%;
    display: none;
}
.mySelect .opened {
    display: block;
}

JavaScript

require([
    "dojo/_base/declare",
    "dojo/ready",
    "dgrid/OnDemandGrid",
    "dgrid/Keyboard",
    "dojo/store/Memory",
    "dojo/dom",
    "dijit/form/ComboBox",
    "put-selector/put",
    "dojo/domReady!"
    ], function(declare, ready, OnDemandGrid, Keyboard, Memory, dom, ComboBox, put) {

    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 the Americas",
            id: "AA"},
        {
            name: "California",
            id: "CA"},
        {
            name: "Colorado",
            id: "CO"},
        {
            name: "Connecticut",
            id: "CT"},
        {
            name: "Delaware",
            id: "DE"}
        ]
    });

    var dataStore = new Memory({
        identifier: "id",
        data: [
            {
            id: 0,
            name: "OneOne",
            value: "OneTwo"},
        {
            id: 1,
            name: "TwoOne",
            value: "TwoTwo"}
        ]
    });

    var Grid = declare([OnDemandGrid, Keyboard]);

    var newGrid = new Grid({
        store: dataStore,
        columns: {
            name: {
                label: "Name"
            },
            value: {
                label: "Value",
                renderCell: function(object, value, td, options) {
                    put(td, "input#id-" + object.id);
                }
            }
        }
    }, "grid");

    ready(function() {
        var comboBox = new ComboBox({
            id: "id-0",
            value: "California",
        ...