document.addEventListener("DOMContentLoaded", function() { var grid = new FancyGrid({ title: 'Employee', renderTo: 'grid', width: 500, height: 500, data: data, selModel: 'row', trackOver: true, defaults: { type: 'string', width: 100, sortable: true, resizable: true, editable: true, ellipsis: true, vtype: 'notempty' }, events: [{ cellclick: function(grid, o) { form.set(o.data); } }], columns: [{ index: 'id', width: 40, type: 'number', filter: false }, { 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 comboData = [{ country: 'USA' }, { country: 'Canada' }, { country: 'England' }, { country: 'Germany' }]; var form = new FancyForm({ renderTo: 'form', title: 'User Data', width: 290, height: 500, defaults: { type: 'string' }, items: [{ name: 'id', type: 'hidden' }, { label: 'Name', emptyText: 'Name', name: 'name' }, { label: 'SurName', emptyText: 'SurName', name: 'surname' }, { label: 'E-mail', emptyText: 'E-mail', name: 'email', valid: { type: 'email', blank: false, blankText: 'Required', text: 'Incorect email' } }, { type: 'date', label: 'Birthday', name: 'birthday' }, { type: 'checkbox', label: 'Active', name: 'active', value: true }, { type: 'number', label: 'Hour rate', name: 'hour', min: 0 }, { type: 'string', label: 'Position', name: 'position' }, { type: 'combo', label: 'Country', name: 'country', data: comboData, displayKey: 'country', valueKey: 'country' }, { type: 'textarea', label: 'About', name: 'about' }], buttons: ['side', { text: 'Clear', handler: function() { form.clear(); } }, { text: 'Save', handler: function() { var values = form.get(); if (!values.id) { return; } grid.getById(values.id).set(values); grid.update(); } }] }); }); 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;height: 500px;"> <div id="grid" style="width: 500px;float: left;"></div> <div id="form" style="float: left;margin-left: 10px;"></div> </div>