working example of poc

by rajeevprasanna

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 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>
    <!--<button onclick='showFilterBar()'>Show Filter Bar</button>-->
</body>

CSS

.dojoxGrid table {
    margin: 0;
}

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",
    formatter: validateNumber
}, {
    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",
    formatter: validateNumber
}];


function validateNumber(num) {
    // Check if string is digits only.
    var reg = new RegExp('^[0-9]{1,12}$');
   ...