jqGrid Style 1

by LijoCheeran

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css">
<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/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.min.js"></script>
<div style="float:left;">
    <div id="divGrid" style="width: 680px; min-height: 50px; float: left;">
        <table id="list2"></table>
    </div>
</div>

CSS

.toolbar-button {
    background-color: silver;
    background-image: none;
    color: darkblue;
}
.toolbar-button:hover {
    background-color: green;
    color: yellow;
}

JavaScript

function getCurrentPractice ()
{
    return "Test";
}

var htmlButtonElement = '<button id="btnAddProvider" type="button" class="btn btn-info toolbar-button" title="Add Provider" style="float:left;">'+
    '<span id="spanAddProvider" class="glyphicon glyphicon-plus" style="pointer-events: none;"></span>'+
    '</button>';


function getGridCaption() {
    return "<div style='font-size:15px; font-weight:bold; display:inline; padding-left:10px;'><span class='glyphicon glyphicon-check' style='margin-right:3px;font-size:14px;'></span>" + getCurrentPractice() + " " + "</div>" +
        "<div style='float:right; padding-right:20px; padding-bottom:10px; display:inline;>" +
        "<div style='float:right;width:550px;  padding-bottom:20px;'>" +
        "<div class='btn-group' style='float:right; padding-top:1px;'> " +
        htmlButtonElement+
        "</div>" +
        "<input type='text' class='form-control' id='filter' placeholder='Search'  style='width:250px; height:30px; float:right; ' />" +
        " </div>" +
        "</div><div class='ui-helper-clearfix'></div>";
}


function launchAddUserPopup()
{
    alert("Hello");
}

$(function () {

    $(document.body).on('click', '#btnAddProvider', function () {
        launchAddUserPopup();
        event.preventDefault();
    });

    ////Grid
    var myData = [
        { "Practice": "Test1", "ProviderID": 1, "IsPartner": true, "IsActive": true },
        { "Practice": "Test2", "ProviderID": 2, "IsPartner": true, "IsActive": true }
    ]

    var currentPractice = "P";
    var grid = $("#list2");
    grid.jqGrid({
        datatype: 'local',
        data: myData,
        additionalProperties: ["IsActive", "IsPartner"],
        //additionalProperties is needed since the name is different
        postData:
        {
            practiceName: function () { return currentPractice }
        },
        colModel: [
            { name: 'Practice', width: 220 },
            { name: 'ProviderID', width: 320 }
        ],
       ...