<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdn.rawgit.com/atatanasov/gijgo/master/dist/combined/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://cdn.rawgit.com/atatanasov/gijgo/master/dist/combined/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<div class="container-full">
<div class="row">
<div class="col-xs-8">
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="txtQuery" placeholder="Search...">
</div>
<button id="btnSearch" type="button" class="btn btn-default">Search</button>
<button id="btnClear" type="button" class="btn btn-default">Clear</button>
</form>
</div>
<div class="col-xs-4">
<button id="btnAdd" type="button" class="btn btn-default pull-right">Add New Record</button>
</div>
</div>
<div class="row" style="margin-top: 10px">
<div class="col-xs-12">
<table id="grid"></table>
</div>
</div>
</div>
<p>
Powered by <a href="http://gijgo.com/grid" target="_blank">jQuery Grid Bootstrap</a> from gijgo.com
</p>
<div id="dialog" style="hidden">
<input type="hidden" id="ID" />
<form>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control" id="Name">
</div>
<div class="form-group">
<label for="PlaceOfBirth">Place Of Birth</label>
<input type="text" class="form-control" id="PlaceOfBirth" />
</div>
<button type="button" id="btnSave" class="btn btn-default">Save</button>
<button type="button" id="btnCancel" class="btn btn-default">Cancel</button>
</form>
</div>
$(document).ready(function () {
var data, grid, dialog;
data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo Luís Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' },
{ 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany' },
{ 'ID': 5, 'Name': 'James Rodríguez', 'PlaceOfBirth': 'Cúcuta, Colombia' },
{ 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria' }
];
grid = $('#grid').grid({
dataSource: data,
uiLibrary: 'bootstrap',
columns: [
{ field: 'ID', width: 32 },
{ field: 'Name', sortable: true },
{ field: 'PlaceOfBirth', title: 'Place Of Birth', sortable: true },
{ title: '', field: 'Edit', width: 34, type: 'icon', icon: 'glyphicon-pencil', tooltip: 'Edit', events: { 'click': Edit } },
{ title: '', field: 'Delete', width: 34, type: 'icon', icon: 'glyphicon-remove', tooltip: 'Delete', events: { 'click': Delete } }
],
pager: { limit: 5 }
});
dialog = $('#dialog').dialog({
title: 'Add/Edit Record',
autoOpen: false,
resizable: false,
modal: true
});
function Edit(e) {
$('#ID').val(e.data.id);
$('#Name').val(e.data.record.Name);
$('#PlaceOfBirth').val(e.data.record.PlaceOfBirth);
$('#dialog').dialog('open');
}
function Delete(e) {
if (confirm('Are you sure?')) {
grid.removeRow(e.data.id - 1);
}
}
function Save() {
if ($('#ID').val()) {
var id = parseInt($('#ID').val());
grid.updateRow(id, { 'ID': id, 'Name': $('#Name').val(), 'PlaceOfBirth': $('#PlaceOfBirth').val() });
} else {
grid.addRow({ 'ID': grid.count(true) + 1, 'Name': $('#Name').val(), 'PlaceOfBirth': $('#PlaceOfBirth').val() });
}
dialog.close();
}
$('#btnAdd').on('click', function () {
$('#ID').val('');
$('#Name').val('');
$('#PlaceOfBirth').val('');
$('#dialog').dialog('open');
});
$('#btnSave').on('click', Save);
$('#btnCancel').on('click', function () {
dialog.close();
});
$('#btnSearch').on('click', function () {
var query, result;
query = $('#txtQuery').val();
result = $.grep(data, function (e) {
return e.Name.indexOf(query) > -1 || e.PlaceOfBirth.indexOf(query) > -1;
});
grid.render(result);
});
$('#btnClear').on('click', function () {
$('#txtQuery').val('');
grid.render(data);
});
});
