document.addEventListener("DOMContentLoaded", function() {
let grid = new FancyGrid({
emptyText: 'Drop items to display',
title: 'London Office',
renderTo: 'mainOffice',
theme: 'extra-gray',
width: 400,
height: 500,
data: data,
selModel: {
type: 'rows',
memory: true
},
trackOver: true,
defaults: {
type: 'string',
width: 100,
sortable: true,
resizable: true,
editable: true,
},
dropZone: function(el) {
let dropZoneEl = document.getElementById('my-drop-el');
if (el.id === 'my-drop-el') {
dropZoneEl.style.borderWidth = '2px';
return true;
}
dropZoneEl.style.borderWidth = '1px';
return false;
},
dropZoneFn: function(data) {
let dropZoneEl = document.getElementById('my-drop-el');
grid.remove(data);
grid.clearSelection();
dropZoneEl.style.borderWidth = '1px';
dropZoneEl.innerHTML = data.length;
},
columns: [{
type: 'rowdrag'
}, {
type: 'select'
}, {
index: 'id',
width: 40,
type: 'number'
}, {
title: 'Name',
render: function(o) {
o.value = o.data.name + ' ' + o.data.surname;
return o;
}
}, {
index: 'birthday',
title: 'Birthday',
type: 'date',
width: 100
}, {
index: 'country',
title: 'Country',
type: 'combo',
data: ['USA', 'England', 'Canada', 'Germany']
}, {
index: 'position',
title: 'Position',
width: 100
}, {
index: 'hour',
type: 'currency',
title: 'Hour rate',
width: 70
}, {
index: 'active',
type: 'checkbox',
title: 'Active?',
width: 60
}, {
title: 'email',
index: 'email',
width: 150
}]
});
});
var data = [{
id: 1,
name: 'Ted',
surname: 'Smith',
email: '[email protected]',
position: 'Java Developer',
birthday: '6/22/1953',
country: 'USA',
hour: 52,
active: true,
about: 'Likes to play on guitar.'
},
{
id: 2,
name: 'Ed',
surname: 'Johnson',
email: '[email protected]',
position: 'C/C++ Market Data Developer',
birthday: '9/12/1971',
country: 'England',
hour: 26,
active: true,
about: 'Proffesional persone.'
},
{
id: 3,
name: 'Sam',
surname: 'Williams',
email: '[email protected]',
position: 'Technical Analyst',
birthday: '9/2/1973',
country: 'USA',
hour: 40,
active: true,
about: 'Dreams about travel around the world.'
},
{
id: 4,
name: 'Alexander',
surname: 'Brown',
email: '[email protected]',
position: 'Project Manager',
country: 'USA',
birthday: '9/25/1991',
hour: 33,
active: true,
about: 'Has big family.'
},
{
id: 5,
name: 'Nicholas',
surname: 'Miller',
email: '[email protected]',
position: 'Senior Software Engineer',
country: 'Canada',
birthday: '8/24/1959',
hour: 50,
active: false,
about: 'Has country house where team spent holidays.'
},
{
id: 6,
name: 'Andrew',
surname: 'Thompson',
email: '[email protected]',
position: 'Agile Project Manager',
country: 'Germany',
birthday: '8/18/1978',
hour: 27,
active: true,
about: 'Encourages team.'
},
{
id: 7,
name: 'Ryan',
surname: 'Walker',
email: '[email protected]',
position: 'Application Support Engineer',
country: 'England',
birthday: '4/2/1981',
hour: 40,
active: true,
about: 'Intelligent and polite, works with VIP clients'
},
{
id: 8,
name: 'John',
surname: 'Scott',
email: '[email protected]',
position: 'Flex Developer',
country: 'USA',
birthday: '2/14/1960',
hour: 71,
active: true,
about: 'Cool at support.'
},
{
id: 9,
name: 'James',
surname: 'Phillips',
email: '[email protected]',
position: 'Senior C++/C# Developer',
country: 'USA',
birthday: '10/18/1991',
hour: 58,
active: true,
about: 'Works 24 hours per day.'
},
{
id: 10,
name: 'Brian',
surname: 'Edwards',
email: '[email protected]',
position: 'UNIX/C++ Developer',
country: 'USA',
birthday: '4/16/1963',
hour: 64,
active: false,
about: 'Dreams to built self car.'
},
{
id: 11,
name: 'Jack',
surname: 'Richardson',
email: '[email protected]',
position: 'Ruby Developer',
country: 'Germany',
birthday: '11/20/1982',
hour: 58,
active: true,
about: 'Helps in office.'
},
{
id: 12,
name: 'Alex',
surname: 'Howard',
email: '[email protected]',
position: 'CSS3/HTML5 Developer',
country: 'USA',
birthday: '7/22/1987',
hour: 66,
active: true,
about: 'Manages meetings.'
},
{
id: 13,
name: 'Carlos',
surname: 'Wood',
email: '[email protected]',
position: 'Node.js Developer',
country: 'USA',
birthday: '8/8/1988',
hour: 41,
active: true,
about: 'Like to present product on performances.'
},
{
id: 14,
name: 'Adrian',
surname: 'Russell',
email: '[email protected]',
position: 'Frontend Developer',
country: 'Canada',
birthday: '6/19/1969',
hour: 25,
active: true,
about: 'Dreams to buy plain.'
},
{
id: 15,
name: 'Jeremy',
surname: 'Hamilton',
email: '[email protected]',
position: 'Scala Developer',
country: 'USA',
birthday: '4/17/1950',
hour: 69,
active: true,
about: 'Dreams to go in cruis with all team.'
},
{
id: 16,
name: 'Ivan',
surname: 'Woods',
email: '[email protected]',
position: 'Objective C Developer',
country: 'USA',
birthday: '3/25/1964',
hour: 64,
active: false,
about: 'Likes to play hockey.'
},
{
id: 17,
name: 'Peter',
surname: 'West',
email: '[email protected]',
position: 'PHP/HTML Developer',
country: 'England',
birthday: '9/6/1977',
hour: 30,
active: true,
about: 'Just married.'
}
];
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>
<div style="position:relative">
<div id="mainOffice" style="width: 400px;float: left;"></div>
<div id="my-drop-el" style="border: 1px dashed gray; width: 150px; height: 150px; float: left;margin-left: 10px;"></div>
</div>