JQGRID EXAMPLE

by bizamajig

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/dark-hive/jquery-ui.css">
<script src="http://datejs.googlecode.com/files/date.js"></script>
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/i18n/grid.locale-en.js"></script>
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/jquery.jqGrid.min.js"></script>
<html>
    <head>
        <title>Events</title>
    </head>    
    <body class="ui-widget-content">
        
        <h3>Events - jQgrid Version</h3>
        <div id="jqgrid">
            <table id="grid"></table>
            <div id="pager"></div>
        </div>
        
        <p>Note: This table uses jQgrid plugin to provide advanced grid features. Data should be retrieved via AJAX calls, though jQgrid is quite flexible with data sources. This demo uses local data - krams</p>
        
        <div id="dialog" title="Feature not supported" style="display:none">
            <p>That feature is not supported.</p>
        </div>
    </body>
</html>

CSS

/* Contents of ui.jqgrid.css 
------------------------------*/
/*Grid*/
.ui-jqgrid {position: relative; font-size:11px;}
.ui-jqgrid .ui-jqgrid-view {position: relative;left:0px; top: 0px; padding: .0em;}
/* caption*/
.ui-jqgrid .ui-jqgrid-titlebar {padding: .3em .2em .2em .3em; position: relative; border-left: 0px none;border-right: 0px none; border-top: 0px none;}
.ui-jqgrid .ui-jqgrid-title { float: left; margin: .1em 0 .2em; }
.ui-jqgrid .ui-jqgrid-titlebar-close { position: absolute;top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height:18px;}.ui-jqgrid .ui-jqgrid-titlebar-close span { display: block; margin: 1px; }
.ui-jqgrid .ui-jqgrid-titlebar-close:hover { padding: 0; }
/* header*/
.ui-jqgrid .ui-jqgrid-hdiv {position: relative; margin: 0em;padding: 0em; overflow-x: hidden; overflow-y: auto; border-left: 0px none !important; border-top : 0px none !important; border-right : 0px none !important;}
.ui-jqgrid .ui-jqgrid-hbox {float: left; padding-right: 20px; overflow: hidden;}
.ui-jqgrid .ui-jqgrid-htable {table-layout:fixed;margin:0em;}
.ui-jqgrid .ui-jqgrid-htable th {height:22px;padding: 0 2px 0 2px;}
.ui-jqgrid .ui-jqgrid-htable th div {overflow: hidden; position:relative; height:17px;}
.ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {overflow: hidden;white-space: nowrap;text-align:center;border-top : 0px none;border-bottom : 0px none;}
.ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr {border-left : 0px none;}
.ui-th-rtl, .ui-jqgrid .ui-jqgrid-htable th.ui-th-rtl {border-right : 0px none;}
.ui-jqgrid .ui-th-div-ie {white-space: nowrap; zoom :1; height:17px;}
.ui-jqgrid .ui-jqgrid-resize {height:20px !important;position: relative; cursor :e-resize;display: inline;overflow: hidden;}
.ui-jqgrid .ui-grid-ico-sort {overflow:hidden;position:absolute;display:inline; cursor: pointer !important;}
.ui-jqgrid .ui-icon-asc {margin-top:-3px; height:12px;}
.ui-jqgrid .ui-icon-desc {margin-top:3px;height:12px;}
.ui-jqgrid .ui-i-asc...

JavaScript

// Showcases jQgrid table

var localdata = [{
            "name": "Birthday",
            "id": 1,
            "date": 1284393600000,
            "description": "John's 20th",
            "participants": 30},
        {
            "name": "New Year",
            "id": 2,
            "date": 1294329600000,
            "description": "2011 New Year",
            "participants": 50},
        {
            "name": "Christmas",
            "id": 3,
            "date": 1324742400000,
            "description": "Once per year",
            "participants": 100}
        ];

// Prepare jQgrid
$("#grid").jqGrid({
    url: '/jqgrid/event/getall',
    datatype: 'local',
    data: localdata,
    mtype: 'POST',
    colNames: ['Id',
              'Name',
              'Description',
              'Participants',
              'Date'],
    colModel: [
        {
        name: 'id',
        index: 'id',
        width: 55,
        editable: false},
    {
        name: 'name',
        index: 'name',
        width: 90,
        editable: true},
    {
        name: 'description',
        index: 'description',
        width: 90,
        editable: true},
    {
        name: 'participants',
        index: 'participants',
        editable: true},
    {
        name: 'date',
        index: 'date',
        width: 90,
        editable: false,
        formatter: 'date',
        formatoptions: {
            newformat: 'd/M/Y'
        },
        editable: true}
    ],
    rowNum: 10,
    rowList: [10, 20, 30],
    autowidth: false,
    width: 600,
    rownumbers: true,
    pager: '#pager',
    sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    caption: "Events",
    emptyrecords: "Empty records",
    loadonce: false,
    jsonReader: {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        cell: "cell",
        id: "id"
    }
});

$("#grid").jqGrid('navGrid', '#pager', {
    edit: false,
    add: false,
   ...