Setup

Installation

Supporting Files

LimeGRID can interface with Bootstrap, JQuery and also Pikaday and Moment to provide date editing.

<head>

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

	<link href="limegrid.css" type="text/css" rel="stylesheet"/>
	<link href="limegridtheme-1.2.1.css" type="text/css" rel="stylesheet"/>
	<script language='javascript' src='limegrid-1.2.1.js'></script>

	<script src="https://cdn.jsdelivr.net/npm/moment@2.29.3/moment.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pikaday@1.8.2/css/pikaday.css">
	<script src="https://cdn.jsdelivr.net/npm/pikaday@1.8.2/pikaday.js"></script>

</head>

Data

Binding Data

Grids can be bound to an array of JSON objects or an array of arrays. Data can be fetched from a REST API, file or script.

			

var _listData = [
	{ Surname: 'Rojas-Sanchez', Forenames: 'Oscar', DOB: new Date(1980, 8, 3), Score: 44},
	{ Surname: 'Craig', Forenames: 'Anthony', DOB: new Date(1988, 11, 3), Score: 44},
	{ Surname: 'Devlin', Forenames: 'Brendan', DOB: new Date(1965, 2, 22), Score: 65},
	{ Surname: 'Boyd', Forenames: 'Sara', DOB: new Date(1990, 4, 13), Score: 66},
	{ Surname: 'de Bruin', Forenames: 'Pierre', DOB: new Date(1955, 12, 26), Score: 10},
	{ Surname: 'Collins', Forenames: 'Henry', DOB: new Date(1989, 8, 9), Score: 82, Flags: 1},
	{ Surname: 'Zuckerberg', Forenames: 'Dan', DOB: new Date(1974, 6, 1)},
	{ Surname: 'Lee', Forenames: 'Ken', DOB: new Date(1973, 3, 3)},
	{ Surname: 'Roberts', Forenames: 'John', DOB: new Date(1980, 8, 3)}
];
	
var _grid;

function TestGrid()
{
	let container = document.getElementById('grdTest');
	
	let list = [];
	
	list = list.concat(_listData);
	
	var grid = new LimeGrid({
	  data: list,
	  colHeaders: [
		'Forenames',
		'Surname',
		'Email',
		'Date of Birth',
		'Score',
		'Phone',
		'Staff No',
		'Active',
		''
	  ],
	  columns: [
		  {
			data: 'Forenames'
		  },
		  {
			data: 'Surname',
			bold: true
		  },
		  {
			data: 'Email'
		  },
		  {
			data: 'DOB',
			type: 'date'
		  },
		  {
			data: 'Score',
			type: 'progressbar',
			readOnly: true,
			max: 100
		  },
		  {
			data: 'PhoneNumber'
		  },
		  {
			data: 'StaffReference'
		  },
		  {
			data: 'Flags',
			type: 'checkedit',
			mask: 1,
			readOnly: false,
			//onChanged: WorkbooksOnPublishedChanged,
			align: 'center'
		  },
		  {
			  type: 'hyperlink',
			  className: 'iconbutton hidden-child',
			  align: 'right',
			  width: '60px',
			  readOnly: true,
			  link: "javascript:DeleteItem(\"{ID}\", {_index})",
			  value: "<img src='bingrey128.png' height='20px'/></a>"
		  }
		],
		deletedField: 'DateDeleted',
		showFilter: true,
		columnSorting: true,
		sortIndicator: true,
		showIndicator: true,
		rowSelect: true,
		showSelection: true,
		sortColumn: 'Surname',
		onRowClick: function(rowIndex, data, event)
		{
			//alert("You chose: " + data.Surname);
		}
	});
	
	grid.render(container);
	
	_grid = grid;
}



TestGrid();

Layout

Columns

Column data formats may be set on individual columns to give better data validation and user experience.

		columns: [
		  {
			data: 'Forenames'
		  },
		  {
			data: 'Surname',
			bold: true
		  },
		  {
			data: 'Email'
		  },
		  {
			data: 'DOB',
			type: 'date'
		  },
		  {
			data: 'Score',
			type: 'progressbar',
			readOnly: true,
			max: 100
		  }
			
Column Types
  • text
  • number
  • date - use with Pikaday and moment
  • datetime
  • time
  • image
  • thumbnail
  • checkedit
  • hyperlink
  • button
  • email
  • progressbar
  • custom

Cells of a column may be formatted with custom .html or by callback using .formatHTML.

Rows

Events

Click

onRowClick(rowIndex, item, event)
	var grid = new LimeGrid({
		data: list,
		colHeaders: [
			'Email'
		],
		columns: [
			{
				data: 'Email'
			}
		],
		onRowClick: function(rowIndex, data, event)
		{
			alert("You chose: " + data.Email);
		}
	};
	
	grid.render(container);
	
	
onClick(rowIndex, item, event)
	var grid = new LimeGrid({
		data: list,
		colHeaders: [
			'Email'
		],
		columns: [
			{
				data: 'Email'
				onClick: function(rowIndex, data, event)
				{
					alert("You chose: " + data.Email);
				}
			}
		],
	};
	
	grid.render(container);
	
	

Rows