JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<link rel="stylesheet" href="ttp://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<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">
<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 function queries for all items
    // and provides callbacks to use for completion of data retrieval or reporting of errors.
    ready(function(){
        // Function to perform a fetch on the datastore when a button is clicked
        function updateAll(){
            // Callback for processing a returned list of items.
            function gotAll(items, request){
        ...