document.addEventListener("DOMContentLoaded", function() {
new FancyForm({
renderTo: 'form',
width: 700,
height: 185,
items: [{
type: 'line',
defaults: {
type: 'string',
labelAlign: 'top',
width: 170
},
items: [{
label: 'Name',
emptyText: 'Search',
name: 'name',
events: [{
change: stringFilterFn
}]
}, {
label: 'Surname',
emptyText: 'Search',
name: 'surname',
events: [{
change: stringFilterFn
}]
}, {
label: 'Company',
emptyText: 'Search',
name: 'company',
events: [{
change: stringFilterFn
}]
}, {
label: 'Gendre',
emptyText: 'Gendre',
type: 'combo',
data: [{
index: 0,
genre: ''
}, {
index: 1,
genre: 'Man'
}, {
index: 2,
genre: 'Woman'
}],
displayKey: 'genre',
valueKey: 'index',
editable: false,
name: 'genre',
events: [{
change: function(field, value, oldValue) {
if (field.interval) {
clearInterval(field.interval);
}
field.interval = setTimeout(function() {
switch (value) {
case '0':
value = '';
break;
case '1':
value = 'man';
break;
case '2':
value = 'woman';
break;
}
var grid = FancyGrid.get('grid');
grid.addFilter(field.name, value);
}, 500);
}
}]
}]
}, {
type: 'line',
defaults: {
type: 'string',
labelAlign: 'top',
width: 170
},
style: {
"margin-top": '12px'
},
items: [{
label: 'Age from',
emptyText: 'Filter by age from',
name: 'age',
events: [{
change: function(field, value, oldValue) {
if (field.interval) {
clearInterval(field.interval);
}
field.interval = setTimeout(function() {
var grid = FancyGrid.get('grid');
grid.addFilter(field.name, value, '>');
}, 500);
}
}]
}, {
label: 'Age till',
emptyText: 'Filter by age till',
name: 'age',
events: [{
change: function(field, value, oldValue) {
if (field.interval) {
clearInterval(field.interval);
}
field.interval = setTimeout(function() {
var grid = FancyGrid.get('grid');
grid.addFilter(field.name, value, '<');
}, 500);
}
}]
}, {
label: 'Knownledge',
emptyText: 'Enter knownledge',
name: 'knownledge',
events: [{
change: stringFilterFn
}]
}, {
label: 'Position',
emptyText: 'Position',
name: 'position',
events: [{
change: stringFilterFn
}]
}]
}, {
type: 'string',
label: false,
width: 681,
emptyText: 'Search by all fields',
style: {
"margin-top": '22px',
"margin-left": '8px'
},
events: [{
change: function(field, value, oldValue) {
if (field.interval) {
clearInterval(field.interval);
}
field.interval = setTimeout(function() {
var grid = FancyGrid.get('grid');
grid.search(value);
}, 500);
}
}]
}]
});
new FancyGrid({
renderTo: 'grid',
width: 700,
height: 500,
data: data,
selModel: 'row',
trackOver: true,
filter: true,
searching: true,
defaults: {
type: 'string',
width: 100,
sortable: true,
resizable: true
},
columns: [{
index: 'id',
title: 'Id',
locked: true,
width: 50,
type: 'number'
}, {
index: 'company',
title: 'Company',
locked: true
}, {
index: 'name',
title: 'Name'
}, {
index: 'surname',
title: 'Sur Name'
}, {
index: 'age',
title: 'Age',
type: 'number',
width: 50
}, {
index: 'knownledge',
title: 'Knownledge',
rightLocked: true,
width: 100
}, {
index: 'position',
title: 'Position',
rightLocked: true,
width: 140
}]
});
});
var stringFilterFn = function(field, value, oldValue) {
if (field.interval) {
clearInterval(field.interval);
}
field.interval = setTimeout(function() {
var grid = FancyGrid.get('grid');
grid.addFilter(field.name, value);
}, 500);
};
var data = [{
"id": 1,
"name": "Ted",
"surname": "Smith",
"position": "Java Developer",
"company": "Electrical Systems",
"age": 30,
"knownledge": "Java, Ruby",
"genre": "man"
}, {
"id": 2,
"name": "Ed",
"surname": "Johnson",
"position": "C/C++ Market Data Developer",
"company": "Energy and Oil",
"age": 35,
"knownledge": "C++",
"genre": "man"
}, {
"id": 3,
"name": "Sam",
"surname": "Williams",
"position": "Technical Analyst",
"company": "Airbus",
"age": 38,
"knownledge": "",
"genre": "man"
}, {
"id": 4,
"name": "Alexander",
"surname": "Brown",
"position": "Project Manager",
"company": "Renault",
"age": 24,
"knownledge": "",
"genre": "man"
}, {
"id": 5,
"name": "Nicholas",
"surname": "Miller",
"position": "Senior Software Engineer",
"company": "Adobe",
"age": 33,
"knownledge": "Unix, C/C++",
"genre": "man"
}, {
"id": 6,
"name": "Andrew",
"surname": "Thompson",
"position": "Agile Project Manager",
"company": "Google",
"age": 28,
"knownledge": "",
"genre": "man"
}, {
"id": 7,
"name": "Ryan",
"surname": "Walker",
"position": "Application Support Engineer",
"company": "Siemens",
"age": 39,
"knownledge": "ActionScript",
"genre": "man"
}, {
"id": 8,
"name": "John",
"surname": "Scott",
"position": "Flex Developer",
"company": "Cargo",
"age": 45,
"knownledge": "Flex",
"genre": "man"
}, {
"id": 9,
"name": "James",
"surname": "Phillips",
"position": "Senior C++/C# Developer",
"company": "Pro bugs",
"age": 30,
"knownledge": "C/C++, Unix",
"genre": "man"
}, {
"id": 10,
"name": "Paula",
"surname": "Edwards",
"position": "UNIX/C++ Developer",
"company": "IT Consultant",
"age": 23,
"knownledge": "C/C++ Unix",
"genre": "woman"
}, {
"id": 11,
"name": "Jack",
"surname": "Richardson",
"position": "Ruby Developer",
"company": "Europe IT",
"age": 24,
"knownledge": "Ruby",
"genre": "man"
}, {
"id": 12,
"name": "Alex",
"surname": "Howard",
"position": "CSS3/HTML5 Developer",
"company": "Cisco",
"age": 27,
"knownledge": "CSS3/HTML5",
"genre": "man"
}, {
"id": 13,
"name": "Carlos",
"surname": "Wood",
"position": "Node.js Developer",
"company": "HP",
"age": 36,
"knownledge": "Node.js",
"genre": "man"
}, {
"id": 14,
"name": "Adrian",
"surname": "Russell",
"position": "Frontend Developer",
"company": "Micro Systems",
"age": 31,
"knownledge": "HTML, JavaScript",
"genre": "man"
}, {
"id": 15,
"name": "Jeremy",
"surname": "Hamilton",
"position": "Scala Developer",
"company": "Big Machines",
"age": 30,
"knownledge": "Scala",
"genre": "man"
}, {
"id": 16,
"name": "Ivan",
"surname": "Woods",
"position": "Objective C Developer",
"company": "",
"age": 24,
"knownledge": "Objective C",
"genre": "man"
}, {
"id": 17,
"name": "Peter",
"surname": "West",
"position": "PHP/HTML Developer",
"company": "Adobe",
"age": 26,
"knownledge": "PHP/HTML",
"genre": "man"
}, {
"id": 18,
"name": "Lorenzo",
"surname": "Tucker",
"position": "Architect",
"company": "Intel",
"age": 29,
"knownledge": "",
"genre": "man"
}, {
"id": 19,
"name": "Randy",
"surname": "Grant",
"position": "Engineer",
"company": "Bridges",
"age": 30,
"knownledge": "",
"genre": "man"
}, {
"id": 20,
"name": "Arthur",
"surname": "Gardner",
"position": "Analytic",
"company": "Google",
"age": 31,
"knownledge": "",
"genre": "man"
}, {
"id": 21,
"name": "Orlando",
"surname": "Ruiz",
"position": "Unit Testing Developer",
"company": "Apple",
"age": 32,
"knownledge": "",
"genre": "man"
}, {
"id": 22,
"name": "Ted",
"surname": "Smith",
"position": "Java Developer",
"company": "Electrical Systems",
"age": 30,
"knownledge": "Java, Ruby",
"genre": "man"
}, {
"id": 23,
"name": "Ed",
"surname": "Johnson",
"position": "C/C++ Market Data Developer",
"company": "Energy and Oil",
"age": 35,
"knownledge": "C++",
"genre": "man"
}, {
"id": 24,
"name": "Sam",
"surname": "Williams",
"position": "Technical Analyst",
"company": "Airbus",
"age": 38,
"knownledge": "",
"genre": "man"
}, {
"id": 25,
"name": "Alexander",
"surname": "Brown",
"position": "Project Manager",
"company": "Renault",
"age": 24,
"knownledge": "",
"genre": "man"
}, {
"id": 26,
"name": "Nicholas",
"surname": "Miller",
"position": "Senior Software Engineer",
"company": "Adobe",
"age": 33,
"knownledge": "Unix, C/C++",
"genre": "man"
}, {
"id": 27,
"name": "Andrew",
"surname": "Thompson",
"position": "Agile Project Manager",
"company": "Google",
"age": 28,
"knownledge": "",
"genre": "man"
}, {
"id": 28,
"name": "Ryan",
"surname": "Walker",
"position": "Application Support Engineer",
"company": "Siemens",
"age": 39,
"knownledge": "ActionScript",
"genre": "man"
}, {
"id": 29,
"name": "John",
"surname": "Scott",
"position": "Flex Developer",
"company": "Cargo",
"age": 45,
"knownledge": "Flex",
"genre": "man"
}, {
"id": 30,
"name": "James",
"surname": "Phillips",
"position": "Senior C++/C# Developer",
"company": "Pro bugs",
"age": 30,
"knownledge": "C/C++, Unix",
"genre": "man"
}, {
"id": 31,
"name": "Brian",
"surname": "Edwards",
"position": "UNIX/C++ Developer",
"company": "IT Consultant",
"age": 23,
"knownledge": "C/C++ Unix",
"genre": "man"
}, {
"id": 32,
"name": "Jack",
"surname": "Richardson",
"position": "Ruby Developer",
"company": "Europe IT",
"age": 24,
"knownledge": "Ruby",
"genre": "man"
}, {
"id": 33,
"name": "Alex",
"surname": "Howard",
"position": "CSS3/HTML5 Developer",
"company": "Cisco",
"age": 27,
"knownledge": "CSS3/HTML5",
"genre": "man"
}, {
"id": 34,
"name": "Carlos",
"surname": "Wood",
"position": "Node.js Developer",
"company": "HP",
"age": 36,
"knownledge": "Node.js",
"genre": "man"
}, {
"id": 35,
"name": "Adrian",
"surname": "Russell",
"position": "Frontend Developer",
"company": "Micro Systems",
"age": 31,
"knownledge": "HTML, JavaScript",
"genre": "man"
}, {
"id": 36,
"name": "Karla",
"surname": "Hamilton",
"position": "Scala Developer",
"company": "Big Machines",
"age": 30,
"knownledge": "Scala",
"genre": "woman"
}, {
"id": 37,
"name": "Ivan",
"surname": "Woods",
"position": "Objective C Developer",
"company": "",
"age": 24,
"knownledge": "Objective C",
"genre": "man"
}, {
"id": 38,
"name": "Peter",
"surname": "West",
"position": "PHP/HTML Developer",
"company": "Adobe",
"age": 26,
"knownledge": "PHP/HTML",
"genre": "man"
}, {
"id": 39,
"name": "Scott",
"surname": "Simpson",
"position": "Designer",
"company": "IBM",
"age": 29,
"knownledge": "Adobe PhotoShop",
"genre": "man"
}, {
"id": 40,
"name": "Lorenzo",
"surname": "Tucker",
"position": "Architect",
"company": "Intel",
"age": 29,
"knownledge": "",
"genre": "man"
}, {
"id": 41,
"name": "Randy",
"surname": "Grant",
"position": "Engineer",
"company": "Bridges",
"age": 30,
"knownledge": "",
"genre": "man"
}, {
"id": 42,
"name": "Arthur",
"surname": "Gardner",
"position": "Analytic",
"company": "Google",
"age": 31,
"knownledge": "",
"genre": "man"
}, {
"id": 43,
"name": "Orlando",
"surname": "Ruiz",
"position": "Unit Testing Developer",
"company": "Apple",
"age": 32,
"knownledge": "",
"genre": "man"
}, {
"id": 44,
"name": "Ted",
"surname": "Smith",
"position": "Java Developer",
"company": "Electrical Systems",
"age": 30,
"knownledge": "Java, Ruby",
"genre": "man"
}, {
"id": 45,
"name": "Ed",
"surname": "Johnson",
"position": "C/C++ Market Data Developer",
"company": "Energy and Oil",
"age": 35,
"knownledge": "C++",
"genre": "man"
}, {
"id": 46,
"name": "Sam",
"surname": "Williams",
"position": "Technical Analyst",
"company": "Airbus",
"age": 38,
"knownledge": "",
"genre": "man"
}, {
"id": 47,
"name": "Alexander",
"surname": "Brown",
"position": "Project Manager",
"company": "Renault",
"age": 24,
"knownledge": "",
"genre": "man"
}, {
"id": 48,
"name": "Nicholas",
"surname": "Miller",
"position": "Senior Software Engineer",
"company": "Adobe",
"age": 33,
"knownledge": "Unix, C/C++",
"genre": "man"
}, {
"id": 49,
"name": "Andrew",
"surname": "Thompson",
"position": "Agile Project Manager",
"company": "Google",
"age": 28,
"knownledge": "",
"genre": "man"
}, {
"id": 50,
"name": "Ryan",
"surname": "Walker",
"position": "Application Support Engineer",
"company": "Siemens",
"age": 39,
"knownledge": "ActionScript",
"genre": "man"
}, {
"id": 51,
"name": "John",
"surname": "Scott",
"position": "Flex Developer",
"company": "Cargo",
"age": 45,
"knownledge": "Flex",
"genre": "man"
}, {
"id": 52,
"name": "James",
"surname": "Phillips",
"position": "Senior C++/C# Developer",
"company": "Pro bugs",
"age": 30,
"knownledge": "C/C++, Unix",
"genre": "man"
}, {
"id": 53,
"name": "Brian",
"surname": "Edwards",
"position": "UNIX/C++ Developer",
"company": "IT Consultant",
"age": 23,
"knownledge": "C/C++ Unix",
"genre": "man"
}, {
"id": 54,
"name": "Jack",
"surname": "Richardson",
"position": "Ruby Developer",
"company": "Europe IT",
"age": 24,
"knownledge": "Ruby",
"genre": "man"
}, {
"id": 55,
"name": "Alex",
"surname": "Howard",
"position": "CSS3/HTML5 Developer",
"company": "Cisco",
"age": 27,
"knownledge": "CSS3/HTML5",
"genre": "man"
}, {
"id": 56,
"name": "Carlos",
"surname": "Wood",
"position": "Node.js Developer",
"company": "HP",
"age": 36,
"knownledge": "Node.js",
"genre": "man"
}, {
"id": 57,
"name": "Adrian",
"surname": "Russell",
"position": "Frontend Developer",
"company": "Micro Systems",
"age": 31,
"knownledge": "HTML, JavaScript",
"genre": "man"
}, {
"id": 58,
"name": "Jeremy",
"surname": "Hamilton",
"position": "Scala Developer",
"company": "Big Machines",
"age": 30,
"knownledge": "Scala",
"genre": "man"
}, {
"id": 59,
"name": "Ivan",
"surname": "Woods",
"position": "Objective C Developer",
"company": "",
"age": 24,
"knownledge": "Objective C",
"genre": "man"
}, {
"id": 60,
"name": "Peter",
"surname": "West",
"position": "PHP/HTML Developer",
"company": "Adobe",
"age": 26,
"knownledge": "PHP/HTML",
"genre": "man"
}, {
"id": 61,
"name": "Scott",
"surname": "Simpson",
"position": "Designer",
"company": "IBM",
"age": 29,
"knownledge": "Adobe PhotoShop",
"genre": "man"
}, {
"id": 62,
"name": "Lorenzo",
"surname": "Tucker",
"position": "Architect",
"company": "Intel",
"age": 29,
"knownledge": "",
"genre": "man"
}, {
"id": 63,
"name": "Randy",
"surname": "Grant",
"position": "Engineer",
"company": "Bridges",
"age": 30,
"knownledge": "",
"genre": "man"
}, {
"id": 64,
"name": "Arthur",
"surname": "Gardner",
"position": "Analytic",
"company": "Google",
"age": 31,
"knownledge": "",
"genre": "man"
}, {
"id": 65,
"name": "Orlando",
"surname": "Ruiz",
"position": "Unit Testing Developer",
"company": "Apple",
"age": 32,
"knownledge": "",
"genre": "man"
}, {
"id": 66,
"name": "Ted",
"surname": "Smith",
"position": "Java Developer",
"company": "Electrical Systems",
"age": 30,
"knownledge": "Java, Ruby",
"genre": "man"
}, {
"id": 67,
"name": "Ed",
"surname": "Johnson",
"position": "C/C++ Market Data Developer",
"company": "Energy and Oil",
"age": 35,
"knownledge": "C++",
"genre": "man"
}, {
"id": 68,
"name": "Sam",
"surname": "Williams",
"position": "Technical Analyst",
"company": "Airbus",
"age": 38,
"knownledge": "",
"genre": "man"
}, {
"id": 69,
"name": "Alexander",
"surname": "Brown",
"position": "Project Manager",
"company": "Renault",
"age": 24,
"knownledge": "",
"genre": "man"
}, {
"id": 70,
"name": "Nicholas",
"surname": "Miller",
"position": "Senior Software Engineer",
"company": "Adobe",
"age": 33,
"knownledge": "Unix, C/C++",
"genre": "man"
}, {
"id": 71,
"name": "Andrew",
"surname": "Thompson",
"position": "Agile Project Manager",
"company": "Google",
"age": 28,
"knownledge": "",
"genre": "man"
}, {
"id": 72,
"name": "Ryan",
"surname": "Walker",
"position": "Application Support Engineer",
"company": "Siemens",
"age": 39,
"knownledge": "ActionScript",
"genre": "man"
}, {
"id": 73,
"name": "John",
"surname": "Scott",
"position": "Flex Developer",
"company": "Cargo",
"age": 45,
"knownledge": "Flex",
"genre": "man"
}, {
"id": 74,
"name": "James",
"surname": "Phillips",
"position": "Senior C++/C# Developer",
"company": "Pro bugs",
"age": 30,
"knownledge": "C/C++, Unix",
"genre": "man"
}, {
"id": 75,
"name": "Brian",
"surname": "Edwards",
"position": "UNIX/C++ Developer",
"company": "IT Consultant",
"age": 23,
"knownledge": "C/C++ Unix",
"genre": "man"
}, {
"id": 76,
"name": "Jack",
"surname": "Richardson",
"position": "Ruby Developer",
"company": "Europe IT",
"age": 24,
"knownledge": "Ruby",
"genre": "man"
}, {
"id": 77,
"name": "Alex",
"surname": "Howard",
"position": "CSS3/HTML5 Developer",
"company": "Cisco",
"age": 27,
"knownledge": "CSS3/HTML5",
"genre": "man"
}, {
"id": 78,
"name": "Tammy",
"surname": "Wood",
"position": "Node.js Developer",
"company": "HP",
"age": 36,
"knownledge": "Node.js",
"genre": "woman"
}, {
"id": 79,
"name": "Adrian",
"surname": "Russell",
"position": "Frontend Developer",
"company": "Micro Systems",
"age": 31,
"knownledge": "HTML, JavaScript",
"genre": "man"
}, {
"id": 80,
"name": "Jeremy",
"surname": "Hamilton",
"position": "Scala Developer",
"company": "Big Machines",
"age": 30,
"knownledge": "Scala",
"genre": "man"
}, {
"id": 81,
"name": "Ivan",
"surname": "Woods",
"position": "Objective C Developer",
"company": "",
"age": 24,
"knownledge": "Objective C",
"genre": "man"
}, {
"id": 82,
"name": "Peter",
"surname": "West",
"position": "PHP/HTML Developer",
"company": "Adobe",
"age": 26,
"knownledge": "PHP/HTML",
"genre": "man"
}, {
"id": 83,
"name": "Scott",
"surname": "Simpson",
"position": "Designer",
"company": "IBM",
"age": 29,
"knownledge": "Adobe PhotoShop",
"genre": "man"
}, {
"id": 84,
"name": "Lorenzo",
"surname": "Tucker",
"position": "Architect",
"company": "Intel",
"age": 29,
"knownledge": "",
"genre": "man"
}, {
"id": 85,
"name": "Randy",
"surname": "Grant",
"position": "Engineer",
"company": "Bridges",
"age": 30,
"knownledge": "",
"genre": "man"
}, {
"id": 86,
"name": "Arthur",
"surname": "Gardner",
"position": "Analytic",
"company": "Google",
"age": 31,
"knownledge": "",
"genre": "man"
}, {
"id": 87,
"name": "Orlando",
"surname": "Ruiz",
"position": "Unit Testing Developer",
"company": "Apple",
"age": 32,
"knownledge": "",
"genre": "man"
}, {
"id": 88,
"name": "Ted",
"surname": "Smith",
"position": "Java Developer",
"company": "Electrical Systems",
"age": 30,
"knownledge": "Java, Ruby",
"genre": "man"
}, {
"id": 89,
"name": "Ed",
"surname": "Johnson",
"position": "C/C++ Market Data Developer",
"company": "Energy and Oil",
"age": 35,
"knownledge": "C++",
"genre": "man"
}, {
"id": 90,
"name": "Sam",
"surname": "Williams",
"position": "Technical Analyst",
"company": "Airbus",
"age": 38,
"knownledge": "",
"genre": "man"
}, {
"id": 91,
"name": "Alexander",
"surname": "Brown",
"position": "Project Manager",
"company": "Renault",
"age": 24,
"knownledge": "",
"genre": "man"
}, {
"id": 92,
"name": "Nicholas",
"surname": "Miller",
"position": "Senior Software Engineer",
"company": "Adobe",
"age": 33,
"knownledge": "Unix, C/C++",
"genre": "man"
}, {
"id": 93,
"name": "Ellisa",
"surname": "Thompson",
"position": "Agile Project Manager",
"company": "Google",
"age": 28,
"knownledge": "",
"genre": "woman"
}, {
"id": 94,
"name": "Ryan",
"surname": "Walker",
"position": "Application Support Engineer",
"company": "Siemens",
"age": 39,
"knownledge": "ActionScript",
"genre": "man"
}, {
"id": 95,
"name": "John",
"surname": "Scott",
"position": "Flex Developer",
"company": "Cargo",
"age": 45,
"knownledge": "Flex",
"genre": "man"
}, {
"id": 96,
"name": "James",
"surname": "Phillips",
"position": "Senior C++/C# Developer",
"company": "Pro bugs",
"age": 30,
"knownledge": "C/C++, Unix",
"genre": "man"
}, {
"id": 97,
"name": "Brian",
"surname": "Edwards",
"position": "UNIX/C++ Developer",
"company": "IT Consultant",
"age": 23,
"knownledge": "C/C++ Unix",
"genre": "man"
}, {
"id": 98,
"name": "Jack",
"surname": "Richardson",
"position": "Ruby Developer",
"company": "Europe IT",
"age": 24,
"knownledge": "Ruby",
"genre": "man"
}, {
"id": 99,
"name": "Alex",
"surname": "Howard",
"position": "CSS3/HTML5 Developer",
"company": "Cisco",
"age": 27,
"knownledge": "CSS3/HTML5",
"genre": "man"
}, {
"id": 100,
"name": "Carlos",
"surname": "Wood",
"position": "Node.js Developer",
"company": "HP",
"age": 36,
"knownledge": "Node.js",
"genre": "man"
}, {
"id": 101,
"name": "Adrian",
"surname": "Russell",
"position": "Frontend Developer",
"company": "Micro Systems",
"age": 31,
"knownledge": "HTML, JavaScript",
"genre": "man"
}, {
"id": 102,
"name": "Jeremy",
"surname": "Hamilton",
"position": "Scala Developer",
"company": "Big Machines",
"age": 30,
"knownledge": "Scala",
"genre": "man"
}, {
"id": 103,
"name": "Ivan",
"surname": "Woods",
"position": "Objective C Developer",
"company": "",
"age": 24,
"knownledge": "Objective C",
"genre": "man"
}, {
"id": 104,
"name": "Abbey",
"surname": "West",
"position": "PHP/HTML Developer",
"company": "Adobe",
"age": 26,
"knownledge": "PHP/HTML",
"genre": "woman"
}, {
"id": 105,
"name": "Scott",
"surname": "Simpson",
"position": "Designer",
"company": "IBM",
"age": 29,
"knownledge": "Adobe PhotoShop",
"genre": "man"
}, {
"id": 106,
"name": "Lorenzo",
"surname": "Tucker",
"position": "Architect",
"company": "Intel",
"age": 29,
"knownledge": "",
"genre": "man"
}, {
"id": 107,
"name": "Randy",
"surname": "Grant",
"position": "Engineer",
"company": "Bridges",
"age": 30,
"knownledge": "",
"genre": "man"
}, {
"id": 108,
"name": "Arthur",
"surname": "Gardner",
"position": "Analytic",
"company": "Google",
"age": 31,
"knownledge": "",
"genre": "man"
}];
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>
<div id="form"></div>
<div id="grid" style="margin-top: 20px;"></div>