Dojo- Editable grid

Dojo- Editable grid

by Lavakumar T

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="https://dojotoolkit.org/documentation/tutorials/1.10/_common/demo.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/claroGrid.css">
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<div id="grid"></div>

JavaScript

require([
		"dojox/grid/DataGrid",
		"dojox/grid/cells",
		"dojox/grid/cells/dijit",
		"dojo/store/Memory",
		"dojo/data/ObjectStore",
		"dojo/date/locale",
		"dojo/currency",
		"dijit/form/DateTextBox",
		"dijit/form/CurrencyTextBox",
		"dijit/form/HorizontalSlider",
		"dojo/domReady!"
	], function(DataGrid, cells, cellsDijit, Memory, ObjectStore, locale, currency,
				DateTextBox, CurrencyTextBox, HorizontalSlider){
		var grid;
		function formatCurrency(inDatum){
			return isNaN(inDatum) ? '...' : currency.format(inDatum, this.constraint);
		}
		function formatDate(inDatum){
			return locale.format(new Date(inDatum), this.constraint);
		}
		gridLayout = [{
			defaultCell: { width: 8, editable: true, type: cells._Widget, styles: 'text-align: right;'  },
			cells: [
				{ name: 'Id', field: 'id', editable: false /* Can't edit ID's of dojo/data items */ },
				{ name: 'Date', field: 'col8', width: 10, editable: true,
					widgetClass: DateTextBox,
					formatter: formatDate,
					constraint: {formatLength: 'long', selector: "date"}},
				{ name: 'Priority', styles: 'text-align: center;', field: 'col1', width: 10,
					type: cells.ComboBox,
					options: ["normal","note","important"]},
				{ name: 'Mark', field: 'col2', width: 5, styles: 'text-align: center;',
					type: cells.CheckBox},
				{ name: 'Status', field: 'col3',
					styles: 'text-align: center;',
					type: cells.Select,
					options: ["new", "read", "replied"] },
				{ name: 'Message', field: 'col4', styles: '', width: 10 },
				{ name: 'Amount', field: 'col5', formatter: formatCurrency, constraint: {currency: 'EUR'},
					widgetClass: CurrencyTextBox },
				{ name: 'Amount', field: 'col5', formatter: formatCurrency, constraint: {currency: 'EUR'},
					widgetClass: HorizontalSlider, width: 10}
			]
		}];

		var data = [
			{ id: 0, col1: "normal", col2: false, col3: "new", col4: 'But are not followed by two hexadecimal', col5: 29.91, col6: 10, col7: false, col8: new Date() },
			{ id: 1, col1:...