bootgrid sample

Bootgrid sample with input controls.

by Erik Bartlow

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.js"></script>
<div class="row">
    <div class="col-md-4">



        <table id="grid-data" class="table table-condensed">
            <thead>
                <tr>
                    <th class="command-actions text-left" data-column-id="commands" data-formatter="commands" data-sortable="false">&nbsp;</th>
                    <th class="text-left" data-column-id="SettingKey" data-identifier="true">Setting</th>
                    <th class="text-left" data-column-id="SettingValue">Current Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="command-actions"></td>
                    <td>AppSupportEmailGroup</td>
                    <td>1018</td>
                </tr>
                <tr>
                    <td class="command-actions"></td>
                    <td>Some Other Setting</td>
                    <td>DEF</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

body {
    padding: 20px 100px;
}

section {
    width: 1000px;
    margin: 0 auto;
}

.command-actions {
    width: 40px;
    padding: 5px;
    line-height: 1em;
}

.table-img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

h3 {
    text-align: center;
    margin-bottom: 50px;
}

.btn {
    margin: 0px 5px;
}

JavaScript

$(document).ready(function() {
    var grid = $("#grid-data").bootgrid({
        formatters: {
            "link": function(column, row) {
                return "<a href='" + row.imgsrc + "'>" + row.imgsrc + "</a>";
            },
            "commands": function(column, row) {
                return "<button type='button' class='btn btn-xs btn-default command-edit' data-row-id='1'><span class='fa fa-pencil'></span></button>";
            }
        }
    }).on("loaded.rs.jquery.bootgrid", function() {
        /* Executes after data is loaded and rendered */
        grid.find(".command-edit").on("click", function(e) {
            var editDialog = {
                title: "Edit Setting:  AppSupportEmailGroup",
                buttons: [{
                    label: "Cancel",
                    cssClass: ["btn-default", "btn-raised"].join(' '),
                    action: function(editDialog) {
                        editDialog.close();
                    }
                }, {
                    label: "Update",
                    cssClass: ["btn", "btn-success"].join(' '),
                    action: function(editDialog) {
                        // Save setting here.
                        editDialog.close();
                    }
                }],
                message: function(dialog) {

                    var $message = $('<div class="row"><div class="col-xs-1"></div><div class="col-xs-4">Current Value</div><div class="col-xs-6"><input type="text" value="1018" /></div><div class="col-xs-1"></div></div><div class="row"><div class="col-xs-1"></div><div class="col-xs-4">New Value</div><div class="col-xs-6"><input type="text" value="1018" /></div>');
                    $message.css({
                        width: "100%",
                        height: dialog.getData('height'),
                        border: "none"
                    });
                    return $message;
                }
            };
            //alert("You pressed edit on...