JSFiddle - React, Tailwind, and code Playground

by rajeevprasanna

HTML

<body class="claro">

<div id="gridContainer" style="width: 100%; height: 400px;"></div>
<div data-dojo-type="dijit/form/Button" data-dojo-id="addBtn">Add</div> 
<div data-dojo-type="dijit/form/Button" data-dojo-id="delBtn">Delete</div> 

<div id="chartDiv" style="width: 500px; height: 400px;"></div>
<div id="peiDiv" style="width: 500px; height: 400px;"></div>
</body>

CSS

@import "http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/resources/dojo.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/document.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

JavaScript

dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.charting.DataChart");
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.Claro");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.action2d.MoveSlice");

var data = {
    identifier: 'id',
    label: 'id',
    items: []
};

var data_list = [
        { "Name":"Africa", "Age": 10,  "Gender":"Male", "Area" : "Java", "Experience": 1},
        { "Name":"Asia1",  "Age": 45,  "Gender":"Male", "Area" : "Pel", 	 "Experience": 3},
        { "Name":"Asia2",  "Age": 35,  "Gender":"Male", "Area" : "Java", "Experience":2},
	{ "Name":"Asia3",  "Age": 23,  "Gender":"Male", "Area" : "C",    "Experience":1},  
	{ "Name":"Asia4",  "Age": 78,  "Gender":"Male", "Area" : "C++", "Experience":4}
];

var i, len;
for(i=0, len = data_list.length; i < len; ++i){
    data.items.push(dojo.mixin({'id': i + 1 }, data_list[i % len]));
}

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

// In case you've close the filter bar, here's a way to bring it up.
function showFilterBar(){
    dijit.byId('grid').showFilterBar(true);
}



dojo.ready(function(){

    var store = new dojo.data.ItemFileWriteStore({data: data});

    var grid = new dojox.grid.EnhancedGrid({
        id: 'grid',
        store: store,
        structure: layout,
        plugins: {
            filter:...