JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/grid/resources/nihiloGrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<body class="claro">
    <div data-dojo-type="dojo/data/ItemFileWriteStore" data-dojo-props="data:geoData" data-dojo-id="geoStore" columnreordering="true"></div> <b>Set the population to assign to all items</b>

    <br />
    <div id="grid" data-dojo-type="dojox/grid/DataGrid" data-dojo-props="store:geoStore,
          structure:layoutGeo,
          query:{},
          queryOptions:{'deep':true},
          rowsPerPage:40"></div>
    <div style="display:inline-block;">
        <div id="Add" data-dojo-type="dijit/form/Button" data-dojo-id="Add">Add</div>
        <div data-dojo-type="dijit/form/Button" data-dojo-id="Remove">Remove</div>
        <div>
            <button onclick='showFilterBar()'>Show Filter Bar</button>
        </div>
    </div>
    <br>
    <div style="display:inline-block;">
        <div id="chartDiv" style="width: 400px; height: 250px;"></div>
        <br />
        <div id="peiDiv" style="width: 400px; height: 250px;"></div>
    </div>
</body>

CSS

.dojoxGrid table {
    margin: 0;
}

JavaScript

var geoData = {
    identifier: 'Id',
    label: 'Id',
    items: [{
        Id: '1',
        Name: 'Africa',
        Age: 10,
        Gender: 'Male',
        Area: "Java",
        Experience: 1
    }, {
        Id: '2',
        Name: 'Asia1',
        Age: 45,
        Gender: 'Male',
        Area: "C",
        Experience: 3
    }, {
        Id: '3',
        Name: 'Asia2',
        Age: 35,
        Gender: 'Male',
        Area: "Java",
        Experience: 2
    }, {
        Id: '4',
        Name: 'Asia3',
        Age: 23,
        Gender: 'Male',
        Area: "C",
        Experience: 1
    }, {
        Id: '5',
        Name: 'Asia4',
        Age: 78,
        Gender: 'Male',
        Area: "Perl",
        Experience: 4
    }]
};

var layoutGeo = [
    [{
        field: "Id",
        name: "Id",
        width: 10
    }, {
        field: "Name",
        name: "Name",
        width: 10,
        editable: true
    }, {
        field: "Age",
        name: "Age",
        width: 10,
        editable: true
    }, {
        field: "Gender",
        name: "Gender",
        width: 10,
        editable: true,
        type: "dojox.grid.cells.Select",
        options: ["Male", "Female"]
    }, {
        field: "Area",
        name: "Area",
        width: 10,
        editable: true
    }, {
        field: "Experience",
        name: "Experience",
        width: 10,
        editable: true
    }]
];

require(["dojo/ready", "dojo/on", "dojo/data/ItemFileWriteStore", "dijit/form/Button", "dijit/form/TextBox", "dijit/form/NumberTextBox", "dojox/grid/DataGrid", "dojo/parser", "dojox/charting/DataChart", "dojox/charting/themes/Claro", "dojox/charting/widget/Chart2D", "dojox/charting/plot2d/Pie", "dojox/charting/Chart", "dojo/domReady!", "dojox/grid/enhanced/plugins/Filter", "dojox/grid/EnhancedGrid"], function (ready, on) {
    // This function performs some basic dojo initialization. In this case it connects the button
    // onClick to a function which invokes the fetch(). The fetch...