Gui control OmniGrid/ActiveGrid

Requirements: Mootools 1.4.4

Version: omnigrid 2.0

Author of base omnigrid: Marko Santić, Omnisdata Ltd.

Email: marko@omnistadata.com

WWW: http://www.omnisdata.com/omnigrid

 

 

Author of the ActiveGrid: Marcin Załęczny.

Email: mzaleczny@gmail.com

WWW: http://progmar.net.pl/omnigrid

Download

Description:
Omnigrid and Activegrid are gui controls for displaying table oriented data. Omnigrid - original version - was enhanced by me and gain some additional functionality. These are:

  • Dividing control into three classes: BaseGrid, OmniGrid and ActiveGrid. OmniGrid Class is identical to its parent version and works exactly the same. Details are on its author webapge: http://www.omnisdata.com/omnigrid
  • Active cell mode. It makes available much the same functionality as for example Excel's Grid.
  • Extra cell types. Now cells can hold gui contols like checkbox-es and selects.

Demonstration

OmniGrid

ActiveGrid

Usage description

Html code:
 <head>
	...
	<script type="text/javascript" src="/js/mootools-1.4.4.js"></script>
	<script type="text/javascript" src="/js/mootools-1.4.0.1-more.js"></script>

	<link type="text/css" href="/js/omnigrid/omnigrid.css" rel="stylesheet" media="screen" />
	<script type="text/javascript" src="/js/omnigrid/omnigrid.js"></script>
	...
</head>
<body>
	...
	<div id="grid"></div>
	...
</body>
Javascript code:
 window.addEvent("domready", function(){							
	cmu = [
		{
			header: "String",
			dataIndex: 'column_1',
			dataType:'string',
			editable:true,
			width:100
		},
		{
			header: "Integer",
			dataIndex: 'column_2',
			dataType:'integer',
			editable:true,
			width:60
		},
		{
			header: "Number .02",
			dataIndex: 'column_3',
			dataType:'number',
			editable:true,
			width:100
		},
		{
			header: "Number .04",
			dataIndex: 'column_4',
			dataType:'number',
			decimalPlaces:4,
			editable:true,
			width:100
		},
		{
			header: "Chk",
			dataIndex: 'column_5',
			dataType:'checkbox',
			editable:true,
			width:100,
			labelT:'Yes',
			labelF:'No'
		},
		{
			header: "Chkd",
			dataIndex: 'column_6',
			dataType:'checkbox',
			editable:false,
			width:100
		},
		{
			header: "Boolean",
			dataIndex: 'column_7',
			dataType:'boolean',
			editable:true,
			width:100
		},
		{
			header: "Select",
			dataIndex: 'column_8',
			dataType:'select',
			options: ['option 1', 'option 2', 'option 3', 'option 4', 'option 5'],
			editable:true,
			width:100
		}
	];
	
	var rowCount = 20;
	var rows = new Array();
	var d;
	for (i = 0; i < rowCount; i++) {
		d = new Array();
		d.push('Data ' + i + 'x' + rowCount);
		d.push(i);
		d.push(i + 0.01);
		d.push((i + 0.02).toFixed(4));
		d.push(Math.ceil(Math.random()*100)%2);
		d.push(Math.ceil(Math.random()*100)%2);
		d.push(Math.ceil(Math.random()*100)%2);
		d.push(cmu[7].options[Math.ceil(Math.random()*100)%5]);

		var item = new Object;
		for (var j = 0; j < cmu.length; j++) {
			item[cmu[j].dataIndex] = d[j];
		}
		rows.push(item);
	}
	
	var data = {"page":1,"total":rowCount,"data":rows}
	
	datagrid = new ActiveGrid('grid', {
		width:850,
		height:300,
		columnModel: cmu,
		buttons : null,
		withactivecell:true,
		url: null,
		pagination:false,
		serverSort:false,
		showHeader: true,
		alternaterows: true,
		sortHeader:false,
		resizeColumns:true,
		multipleSelection:false,
		editable: true
	}, data);
});

Parameters description

ActiveGrid gui control we instantiate in code much te same way as OmniGrid control. The differences are in column model cmu:

Here is description of mentioned parameters: