Development Tips & Tricks : Dojo

Showing posts with label Dojo. Show all posts

Wednesday, September 18, 2019

Dojo grid events and stores

Example

gridBlog.on("RowClick", function(evt){
var idx = evt.rowIndex,
rowData = gridBlog.getItem(idx);
console.log(rowData.col1);
}, true);

Complete events list

Available stores in Dojo

ItemFileWriteStore vs Memory?

The dojo/store API is intended to be the next step forward, replacing dojo/data. Therefore, dojo/store is recommended from a best/modern practices point of view.

However, assuming you're talking about dojox/grid, that component only knows how to consume dojo/data stores. That leaves you with two options:

Use dojo/data/ItemFileWriteStore
Use dojo/store/Memory wrapped in dojo/data/ObjectStore (which wraps a dojo/store with dojo/data APIs so that consumers of old stores can work with it)
Another thing worth considering is that dojo/store/Memory doesn't support directly pulling data in from a URL, while dojo/data/ItemFileWriteStore does.
If you're intending to load your data from another URL, you can still use dojo/store/Memory, but you'd have to XHR the data yourself first.

For more information about DOJO GUI
https://ux.mailchimp.com/patterns/forms#radio

New Grid in dojo has name GridX
for more information visit

https://xcellerant.wordpress.com/2014/12/10/gridx-in-xpages-16-advanced-searching-with-the-filterbar-module/

https://oria.github.io/gridx/demos/test_grid.html

https://github.com/oria/gridx/wiki/How-to-add-bars-to-gridx%3F-%5Bv1.1%5D

Tuesday, September 17, 2019

Dojo Dialog

Dojo Enahnced Grid with pagination, search, edit data, two way binding edit data with json object

Search Invoice
Search ItemName

CODE

<html>
<head>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/claroGrid.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />

<script src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config='async: 1, isDebug: 1, parseOnLoad: 1'></script>

</head>
<body class="claro">
<table>
<tr>
<td>Search Invoice</td><td><input data-dojo-type="dijit/form/TextBox" id="filterText1" type="text"></td>
</tr>
<tr>
<td>Search ItemName </td><td> <input data-dojo-type="dijit/form/TextBox" id="filterText2" type="text"></td>
</tr>
<tr>
<td colspan=2>
<button data-dojo-type="dijit/form/Button" onclick="filterGrid()">Search</button>
<button data-dojo-type="dijit/form/Button" onclick="resetFilter()">Clear</button>
</td>
</tr>
</table>

<div style="width: 90%; margin: 10px; height: 450px; min-height: 450px; border: 1px solid #333333;overflow: auto">
<div id="div1" style="height: 445px;width:100%">
</div>
</div>

<br>
<button onclick="alert(JSON.stringify(data))">show current json data</button>

<script>
// load requirements for declarative widgets in page content
require(["dijit/form/TextBox","dijit/form/Button", "dojo/parser", "dojo/domReady!"]);
</script>

<script>
window.getData=function()
{

window.data = [
{ id: 1, col1: "986976", col2: "234", col3: "PC", col4: 234, col5: "Unit", col6: 456, col7: "EGP £" },
{ id: 2, col1: "986976", col2: "354", col3: "Processor", col4: 123, col5: "Unit", col6: 567, col7: "EGP £" },
{ id: 3, col1: "986976", col2: "564", col3: "RAM", col4: 567, col5: "Unit", col6: 234, col7: "EGP £" },
{ id: 4, col1: "986976", col2: "567", col3: "IC", col4: 43, col5: "Unit", col6: 789, col7: "EGP £" },
{ id: 5, col1: "986976", col2: "345", col3: "Mother Board", col4: 766, col5: "Unit", col6: 123, col7: "EGP £" },
{ id: 6, col1: "986976", col2: "24234", col3: "Server", col4: 2334, col5: "Unit", col6: 8797, col7: "EGP £" },
{ id: 7, col1: "3234", col2: "098", col3: "Case", col4: 876, col5: "Unit", col6: 456456, col7: "EGP £" },
{ id: 8, col1: "2342345", col2: "9867", col3: "Mouse", col4: 987, col5: "Unit", col6: 234345, col7: "EGP £" },
{ id: 9, col1: "234535", col2: "876", col3: "Pad", col4: 34, col5: "Unit", col6: 23423, col7: "EGP £" },
{ id: 10, col1: "3242", col2: "8686", col3: "Keyboard", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 11, col1: "234234", col2: "8686", col3: "MAC PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 12, col1: "23423", col2: "8686", col3: "IBM Z Server", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 13, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 14, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 15, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 16, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 17, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 18, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 19, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 20, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 21, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 22, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 23, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 24, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 25, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 26, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" }

];

return data;
}

var grid;
window.startGrid= function(Obj){
require([
"dojox/grid/cells",
"dojox/grid/cells/dijit",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/date/locale",
"dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/Pagination",
"dojo/domReady!"
], function(cells, cellsDijit, Memory, ObjectStore, locale,EnhancedGrid,Pagination){

gridLayout = [{
defaultCell: { width: 8, editable: true, type: cells._Widget, styles: 'text-align: right;' },
cells: [
{ name: 'Id', field: 'id', editable: false },
{ name: 'Invoice ', field: 'col1', styles: '', width: 10 },
{ name: 'Code ', field: 'col2', styles: '', width: 10 },
{ name: 'ItemName ', field: 'col3', styles: '', width: 10 },
{ name: 'Count', field: 'col4', styles: '', width: 10 },
{ name: 'Unit', field: 'col5', styles: '', width: 10 },
{ name: 'Price', field: 'col6', styles: '', width: 10 },
{ name: 'Currency', styles: 'text-align: center;', field: 'col7', width: 10, type: cells.ComboBox, options: ["EGP £","US $","‎EURO €"]}
]
}];

data = getData();
var objectStore = new Memory({data:data});

// global var "test_store"
test_store = new ObjectStore({objectStore: objectStore});

grid = new EnhancedGrid({
store: test_store,
structure: gridLayout,
escapeHTMLInData: false,
"class": "grid"

, plugins: {
pagination: {
pageSizes: ["10", "25", "50", "100"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 5,
position: "bottom"
}
}

}, document.createElement('div'));

Obj.appendChild(grid.domNode);

grid.startup();
grid._lastScrollTop=grid.scrollTop;
grid._refresh();

grid.on("RowClick", function(evt){
var idx = evt.rowIndex,
rowData = grid.getItem(idx);
console.log(rowData.col1);
}, true);

});
}

startGrid(document.getElementById("div1"));

function filterGrid() {
grid.filter({col1: document.getElementById('filterText1').value+'*',col3:document.getElementById('filterText2').value+'*'});
}
function resetFilter() {
grid.filter({col1: '*',col3: '*'});
document.getElementById('filterText1').value='';
document.getElementById('filterText2').value='';
}
</script>
</body>
</html>

Dojo CSS

Demo

Number validation:

currency validation:

Time validation:

textBox:

Date validation:

No space Example:

You can set dojo form CSS using "data-dojo-type"
for example:

data-dojo-type="dijit/form/TextBox"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-type="dijit/form/Button"
data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-type="dijit/form/NumberTextBox"
data-dojo-type="dijit/form/CurrencyTextBox"
data-dojo-type="dijit/form/TimeTextBox"

and here are the effect!

<html>
<head>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" />

<script src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config='async: 1, isDebug: 1, parseOnLoad: 1'></script>

</head>

<body class="claro">

<div>
<label for="number">Age:</label>
<input id="number" type="text" value="54" required="true" data-dojo-type="dijit/form/NumberTextBox">
</div>

<div>
<label for="currency">Annual Salary:</label>
<input id="currency" value="54775.53" required="true" data-dojo-type="dijit/form/CurrencyTextBox" data-dojo-props="
constraints: {fractional: true},
currency: 'USD',
invalidMessage: 'Invalid amount. Cents are mandatory.'">

</div>

<div>
<label for="time">Start Time:</label>
<input id="time" required="true" data-dojo-type="dijit/form/TimeTextBox" data-dojo-props="
constraints: {
timePattern: 'HH:mm:ss',
clickableIncrement: 'T00:15:00',
visibleIncrement: 'T00:15:00',
visibleRange: 'T01:00:00'
},
invalidMessage: 'Invalid time.'">
</div>

<div>
<label for="textBox"> textBox:</label>
<input type="text" id="textBox" name="textBox" data-dojo-type="dijit/form/TextBox" />
</div>

<div>
<label for="dateTextBox">Date Example:</label>
<input type="text" id="dateTextBox" name="dateTextBox" data-dojo-type="dijit/form/DateTextBox" />
</div>

<div>
<label for="Example">Number Example:</label>
<input type="text" id="Example" required="true" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:'[\\w]+', invalidMessage:'Invalid Non-Space Text.'" />
</div>

<div>
<button data-dojo-type="dijit/form/Button" onclick="alert()">Search</button>
</div>

<script>
// load requirements for declarative widgets in page content

require(["dijit/form/NumberTextBox", "dijit/form/CurrencyTextBox", "dijit/form/TimeTextBox", "dijit/form/TextBox", "dijit/form/DateTextBox", "dijit/form/Button", "dojo/parser", "dojo/domReady!"]);
</script>

</body>
</html>

Sunday, September 15, 2019

DOJO Grid two ways binding between json object and Grid

Dojo Grid Code

<html>
<head>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css" />

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/claroGrid.css" />

<script src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config='async: 1, isDebug: 1, parseOnLoad: 1'></script>
</head>
<body class="claro">
<input type=button name=btn1 id=btn1 value='View Data' onclick="startGrid(this.nextSibling)" ><div id=div1 style="background-color:#eeeeee;height:500px;overflow:scroll"> </div>
<br>
<button onclick="alert(JSON.stringify(data))">current json data</button>

<script>
window.getData=function()
{

window.data = [
{ id: 1, col1: "986976", col2: "234", col3: "PC", col4: 234, col5: "Unit", col6: 456, col7: "EGP £" },
{ id: 2, col1: "986976", col2: "354", col3: "Processor", col4: 123, col5: "Unit", col6: 567, col7: "EGP £" },
{ id: 3, col1: "986976", col2: "564", col3: "RAM", col4: 567, col5: "Unit", col6: 234, col7: "EGP £" },
{ id: 4, col1: "986976", col2: "567", col3: "IC", col4: 43, col5: "Unit", col6: 789, col7: "EGP £" },
{ id: 5, col1: "986976", col2: "345", col3: "Mother Board", col4: 766, col5: "Unit", col6: 123, col7: "EGP £" },
{ id: 6, col1: "986976", col2: "24234", col3: "Server", col4: 2334, col5: "Unit", col6: 8797, col7: "EGP £" },
{ id: 7, col1: "3234", col2: "098", col3: "Case", col4: 876, col5: "Unit", col6: 456456, col7: "EGP £" },
{ id: 8, col1: "2342345", col2: "9867", col3: "Mouse", col4: 987, col5: "Unit", col6: 234345, col7: "EGP £" },
{ id: 9, col1: "234535", col2: "876", col3: "Pad", col4: 34, col5: "Unit", col6: 23423, col7: "EGP £" },
{ id: 10, col1: "3242", col2: "8686", col3: "Keyboard", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 11, col1: "234234", col2: "8686", col3: "MAC PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 12, col1: "23423", col2: "8686", col3: "IBM Z Server", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 13, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 14, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 15, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 16, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 17, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 18, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 19, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 20, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 21, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 22, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 23, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 24, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 25, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 26, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" }

];

return data;
}

window.startGrid= function(Obj){
require([
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojox/grid/cells/dijit",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/date/locale",
"dojo/domReady!"
], function(DataGrid, cells, cellsDijit, Memory, ObjectStore, locale){
var grid;

gridLayout = [{
defaultCell: { width: 8, editable: true, type: cells._Widget, styles: 'text-align: right;' },
cells: [
{ name: 'Id', field: 'id', editable: false },
{ name: 'Invoce ', field: 'col1', styles: '', width: 10 },
{ name: 'Code ', field: 'col2', styles: '', width: 10 },
{ name: 'ItemName ', field: 'col3', styles: '', width: 10 },
{ name: 'Count', field: 'col4', styles: '', width: 10 },
{ name: 'Unit', field: 'col5', styles: '', width: 10 },
{ name: 'Price', field: 'col6', styles: '', width: 10 },
{ name: 'Currency', styles: 'text-align: center;', field: 'col7', width: 10, type: cells.ComboBox, options: ["EGP £","US $","‎EURO €"]}
]
}];

data = getData();
var objectStore = new Memory({data:data});

// global var "test_store"
test_store = new ObjectStore({objectStore: objectStore});

grid = new DataGrid({
store: test_store,
structure: gridLayout,
escapeHTMLInData: false,
"class": "grid"
}, document.createElement('div'));

Obj.appendChild(grid.domNode);

grid.startup();
grid._lastScrollTop=grid.scrollTop;
grid._refresh();

});
}
</script>
</body>
</html>

DOJO CSS

https://download.dojotoolkit.org/release-1.9.1/dojo-release-1.9.1/dijit/themes/themeTester.html?theme=soria

Topics