JavaScript
document.addEventListener("DOMContentLoaded", () => {
new FancyGrid({
title: 'Row edit',
renderTo: 'container',
width: 570,
height: 400,
data: data,
defaults: {
type: 'string',
width: 100,
editable: true,
sortable: true,
resizable: true,
ellipsis: true
},
clicksToEdit: 1,
rowEdit: true,
columns: [{
index: 'id',
title: 'ID',
type: 'number',
editable: false,
width: 40
}, {
index: 'company',
title: 'Company'
}, {
index: 'name',
title: 'Name'
}, {
index: 'surname',
title: 'Sur Name'
}, {
index: 'country',
title: 'Country',
type: 'combo',
data: ['USA', 'Canada', 'England']
}, {
index: 'age',
title: 'Age',
type: 'number',
spin: true,
width: 60,
vtype: {
before: ['notempty', 'notnan'],
type: 'range',
min: 20,
max: 70
}
}, {
index: 'married',
title: 'Married',
type: 'checkbox',
width: 60
}, {
index: 'position',
title: 'Position'
}]
});
});
const data = [{
id: 1,
name: 'Ted',
surname: 'Smith',
position: 'Java Developer',
email: 'ted.smith@gmail.com',
company: 'Electrical Systems',
age: 30,
married: true,
country: 'USA'
}, {
id: 2,
name: 'Ed',
surname: 'Johnson',
position: 'C/C++ Market Data Developer',
email: 'ed.johnson@gmail.com',
company: 'Energy and Oil',
age: 35,
married: true,
country: 'Canada'
}, {
id: 3,
name: 'Sam',
surname: 'Williams',
position: 'Technical Analyst',
email: 'sam.williams@gmail.com',
company: 'Airbus',
age: 38,
married: true,
country: 'England'
}, {
id: 4,
name: 'Alexander',
surname: 'Brown',
position: 'Project Manager',
email: 'alexander.brown@gmail.com',
company: 'Renault',
age: 24,
married: false,
country: 'England'
}, {
id: 5,
name: 'Nicholas',
surname:...