document.addEventListener("DOMContentLoaded", function() {
Fancy.defineControl('expand-controller', {
controls: [{
event: 'cellclick',
selector: '.expand-el',
handler: 'onClickExpandEl'
}],
onClickExpandEl: function(grid, o) {
var item = o.data;
if (!grid.editForm) {
grid.editForm = new FancyForm({
title: {
text: item.name + ' ' + item.surname,
tools: [{
text: 'Close',
handler: function() {
this.hide();
}
}]
},
theme: 'extra-gray',
window: true,
modal: true,
draggable: true,
width: 300,
height: 250,
defaults: {
type: 'string'
},
items: [{
label: 'Name',
name: 'name',
value: item.name
}, {
label: 'Sur Name',
name: 'surname',
value: item.surname
}, {
label: 'Company',
name: 'company',
value: item.company
}, {
label: 'Age',
name: 'age',
value: item.age,
spin: true,
type: 'number',
min: 0,
max: 100
}, {
name: 'id',
value: item.id,
type: 'hidden'
}],
buttons: ['side', {
text: 'Close',
handler: function() {
this.hide();
}
}, {
text: 'Save',
handler: function() {
grid.setById(this.get('id'), this.get());
grid.update();
this.hide();
}
}],
events: [{
init: function() {
this.show();
}
}]
});
} else {
grid.editForm.set(item);
grid.editForm.setTitle(item.name + ' ' + item.surname);
grid.editForm.show();
}
}
});
var grid = new FancyGrid({
controllers: ['expand-controller'],
title: 'Controller that opens edit form',
renderTo: 'container',
width: 800,
height: 400,
data: data,
selModel: 'row',
theme: 'extra-gray',
trackOver: true,
columnLines: false,
defaults: {
type: 'string',
width: 100,
sortable: true,
resizable: true
},
columns: [{
type: 'order',
draggable: false,
width: 30
}, {
cls: 'expand-column',
width: 25,
draggable: false,
render: function(o) {
o.value = [
'<div class="expand-container"><div class="expand-el"></div></div>'
].join('');
return o;
}
}, {
index: 'company',
title: 'Company'
}, {
index: 'name',
title: 'Name',
render: function(o) {
o.value = '<div>' + o.value + '</div>';
return o;
}
}, {
index: 'surname',
exportable: false,
title: 'Sur Name'
}, {
index: 'age',
title: 'Age',
type: 'number'
}, {
index: 'position',
title: 'Position',
width: 100
}]
});
});
var data = [{
id: 1,
name: 'Ted',
surname: 'Smith',
position: 'Java Developer',
email: '[email protected]',
company: 'Electrical Systems',
age: 30,
married: true,
country: 'USA'
}, {
id: 2,
name: 'Ed',
surname: 'Johnson',
position: 'C/C++ Market Data Developer',
email: '[email protected]',
company: 'Energy and Oil',
age: 35,
married: true,
country: 'Canada'
}, {
id: 3,
name: 'Sam',
surname: 'Williams',
position: 'Technical Analyst',
email: '[email protected]',
company: 'Airbus',
age: 38,
married: true,
country: 'England'
}, {
id: 4,
name: 'Alexander',
surname: 'Brown',
position: 'Project Manager',
email: '[email protected]',
company: 'Renault',
age: 24,
married: false,
country: 'England'
}, {
id: 5,
name: 'Nicholas',
surname: 'Miller',
position: 'Senior Software Engineer',
email: '[email protected]',
company: 'Adobe',
age: 33,
married: true,
country: 'Canada'
}, {
id: 6,
name: 'Andrew',
surname: 'Thompson',
position: 'Agile Project Manager',
email: '[email protected]',
company: 'Google',
age: 28,
married: true,
country: 'USA'
}, {
id: 7,
name: 'Ryan',
surname: 'Walker',
position: 'Application Support Engineer',
email: '[email protected]',
company: 'Siemens',
age: 39,
married: true,
country: 'Canada'
}, {
id: 8,
name: 'John',
surname: 'Scott',
position: 'Flex Developer',
email: '[email protected]',
company: 'Cargo',
age: 45,
knownledge: 'Flex',
married: true,
country: 'England'
}, {
id: 9,
name: 'James',
surname: 'Phillips',
position: 'Senior C++/C# Developer',
email: '[email protected]',
company: 'Pro bugs',
age: 30,
married: false,
country: 'Canada'
}, {
id: 10,
name: 'Brian',
surname: 'Edwards',
position: 'UNIX/C++ Developer',
email: '[email protected]',
company: 'IT Consultant',
age: 23,
married: true,
country: 'England'
}, {
id: 11,
name: 'Jack',
surname: 'Richardson',
position: 'Ruby Developer',
email: '[email protected]',
company: 'Europe IT',
age: 24,
married: true,
country: 'Canada'
}, {
id: 12,
name: 'Alex',
surname: 'Howard',
position: 'CSS3/HTML5 Developer',
email: '[email protected]',
company: 'Cisco',
age: 27,
married: true,
country: 'Canada'
}, {
id: 13,
name: 'Carlos',
surname: 'Wood',
position: 'Node.js Developer',
email: '[email protected]',
company: 'HP',
age: 36,
married: true,
country: 'Canada'
}, {
id: 14,
name: 'Adrian',
surname: 'Russell',
position: 'Frontend Developer',
email: '[email protected]',
company: 'Micro Systems',
age: 31,
married: true,
country: 'England'
}, {
id: 15,
name: 'Jeremy',
surname: 'Hamilton',
position: 'Scala Developer',
email: '[email protected]',
company: 'Big Machines',
age: 30,
married: true,
country: 'England'
}, {
id: 16,
name: 'Ivan',
surname: 'Woods',
position: 'Objective C Developer',
email: '[email protected]',
company: '',
age: 24,
married: false,
country: 'USA'
}, {
id: 17,
name: 'Peter',
surname: 'West',
position: 'PHP/HTML Developer',
email: '[email protected]',
company: 'Adobe',
age: 26,
married: true,
country: 'England'
}, {
id: 18,
name: 'Scott',
surname: 'Simpson',
position: 'Designer',
email: '[email protected]',
company: 'IBM',
age: 29,
married: true,
country: 'Canada'
}, {
id: 19,
name: 'Lorenzo',
surname: 'Tucker',
position: 'Architect',
email: '[email protected]',
company: 'Intel',
age: 29,
married: true,
country: 'England'
}, {
id: 20,
name: 'Randy',
surname: 'Grant',
position: 'Engineer',
email: '[email protected]',
company: 'Bridges',
age: 30,
married: false,
country: 'Canada'
}, {
id: 21,
name: 'Arthur',
surname: 'Gardner',
position: 'Analytic',
email: '[email protected]',
company: 'Google',
age: 31,
married: true,
country: 'England'
}, {
id: 22,
name: 'Orlando',
surname: 'Ruiz',
position: 'Unit Testing Developer',
email: '[email protected]',
company: 'Apple',
age: 32,
married: true,
country: 'Canada'
}];
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>
<div id="container"></div>
.expand-column .fancy-grid-cell-inner {
margin-left: 3px;
}
.expand-el {
display: inline-block;
width: 12px;
height: 12px;
line-height: 18px;
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20class%3D%22icon%22%20style%3D%22shape-rendering%3A%20geometricPrecision%3B%22%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%232d7ff9%22%20d%3D%22M4.77546101%2C10.4553613%20L1.81474478%2C10.8783208%20C1.25439084%2C10.9583713%200.87938524%2C10.5736845%200.958225649%2C10.0218016%20L1.38118511%2C7.06108542%20C1.45982823%2C6.51058357%201.83916177%2C6.38790899%202.22968611%2C6.77843328%20L2.93679297%2C7.48554006%20L4.10581974%2C6.3165134%20C4.49903533%2C5.92329779%205.12937282%2C5.9261252%205.51989706%2C6.31664944%20C5.91314397%2C6.70989635%205.91048225%2C7.3402777%205.52003317%2C7.73072683%20L4.35100654%2C8.89975362%20L5.05811323%2C9.6068604%20C5.45136014%2C10.0001074%205.32208977%2C10.3772715%204.77546101%2C10.4553613%20Z%20M7.10137856%2C1.3810729%20L10.0620948%2C0.958113443%20C10.6224487%2C0.87806288%2010.9974543%2C1.26274971%2010.9186139%2C1.81463257%20L10.4956545%2C4.7753488%20C10.4170113%2C5.32585066%2010.0376778%2C5.44852523%209.64715346%2C5.05800094%20L8.94004659%2C4.35089416%20L7.45430822%2C5.83663252%20C7.06109263%2C6.22984813%206.43075515%2C6.22702073%206.0402309%2C5.83649648%20C5.64698399%2C5.44324957%205.64964572%2C4.81286823%206.04009479%2C4.42241909%20L7.52583303%2C2.9366806%20L6.81872633%2C2.22957382%20C6.42547942%2C1.83632686%206.5547498%2C1.45916273%207.10137856%2C1.3810729%20Z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
background-repeat: no-repeat;
color: #2d7ff9;
position: relative;
top: 4px;
left: 4px;
}
.expand-container {
display: inline-block;
opacity: 0;
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
top: 2px;
cursor: pointer;
}
.expand-container:hover {
color: #2750ae;
background-color: #d0f0fd;
}
.fancy-grid-cell-selected .expand-container {
opacity: 1;
}
.fancy-theme-extra-gray .fancy-grid-cell.fancy-grid-cell-selected {
background-color: #F8F8F8;
}
.fancy-grid-cell-over .expand-container {
opacity: 1;
}
.fancy-grid-cell-over {
background-color: initial !important;
}
.expand-column .fancy-grid-cell-inner {
margin-right: 0px !important;
margin-top: 2px !important;
height: 25px;
}
.fancy-theme-extra-gray.fancy-panel-draggable {
border-radius: 4px;
}