JavaScript
document.addEventListener("DOMContentLoaded", function() {
var grid = new FancyGrid({
theme: 'extra-gray',
renderTo: 'container',
width: 750,
height: 400,
data: data,
selModel: 'rows',
trackOver: true,
defaults: {
type: 'string',
width: 100
},
events: [{
init: function(grid) {
grid.addEvent('custom-event');
grid.on('custom-event', function(grid, params) {
//console.log(arguments);
alert(params.text);
});
setTimeout(() => {
grid.fire('custom-event', {
text: 'Good morning'
});
}, 3000);
}
}],
tbar: [{
type: 'button',
text: 'Click',
handler: function() {
grid.fire('custom-event', {
text: 'Good evening'
});
}
}],
columns: [{
index: 'id',
locked: true,
title: 'ID',
type: 'number',
editable: false,
width: 40
}, {
index: 'company',
locked: true,
title: 'Company'
}, {
text: 'Base Info',
columns: [{
index: 'name',
title: 'Name'
}, {
index: 'surname',
title: 'Sur Name'
}, {
index: 'age',
title: 'Age',
type: 'number'
}]
}, {
index: 'country',
title: 'Country',
type: 'combo',
width: 99,
data: ['USA', 'Canada', 'England']
}, {
index: 'married',
title: 'Married',
type: 'checkbox',
width: 60
}, {
index: 'email',
title: 'Email',
vtype: 'email',
width: 150
}]
});
});
var 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',
...