<script src="/0_6/dist/combined/js/grid.js" type="text/javascript"></script>
    <link href="/0_6/dist/combined/css/grid.css" rel="stylesheet" type="text/css">
    <script src="/0_6/dist/combined/js/dialog.js" type="text/javascript"></script>
    <link href="/0_6/dist/combined/css/dialog.css" rel="stylesheet" type="text/css">
    <script src="/0_6/dist/combined/js/draggable.js" type="text/javascript"></script>
    <button id="btnAdd" type="button" class="btn btn-default">Add Row</button>
    <br><br>
    <table id="grid"></table>
    <div id="dialog" style="display:none">
        <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' }
    ];
    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);
        }
    }
    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() + 1, 'Name': $('#Name').val(), 'PlaceOfBirth': $('#PlaceOfBirth').val() });
        }
        dialog.close();
    }
    grid = $('#grid').grid({
        dataSource: data,
        columns: [
            { field: 'ID', width: 32 },
            { field: 'Name' },
            { field: 'PlaceOfBirth', title: 'Place Of Birth' },
            { width: 50, tmpl: '<a href="#">edit</a>', align: 'center', events: { 'click': Edit } },
            { width: 50, tmpl: '<a href="#">delete</a>', align: 'center', events: { 'click': Delete } }
        ]
    });
    $('#btnAdd').on('click', function () {
        $('#ID').val('');
        $('#Name').val('');
        $('#PlaceOfBirth').val('');
        $('#dialog').dialog('open');
    });
    $('#btnSave').on('click', Save);
    $('#btnCancel').on('click', dialog.cancel);
});