working jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>

JavaScript

var jsonString = [{
    "KEY.ServiceId": "123",
        "KEY.ServiceDefinition": "My Definition",
        "KEY.Upload": "0 (B)",
        "KEY.Download": "0 (B)"
}];
$('#grid').jqGrid({
    datatype: 'local',
    data: jsonString,
    colNames: ['KEY.ServiceId',
        'KEY.ServiceDefinition',
        'KEY.Upload	',
        'KEY.Download'],
    colModel: [{
        name: 'KEY.ServiceId',
        index: 'KEY.ServiceId',
        width: 135,
        sortable: false
    }, {
        name: 'KEY.ServiceDefinition',
        index: 'KEY.ServiceDefinition',
        width: 175,
        sortable: false
    }, {
        name: 'KEY.Upload',
        index: 'KEY.Upload',
        width: 110,
        sortable: false
    }, {
        name: 'KEY.Download',
        index: 'KEY.Download',
        width: 110,
        sortable: false
    }],
    height: '138',
    scrollOffset: 0,
    loadComplete: function (loadData) {
        if (loadData == null || loadData.rows == null || loadData.rows.length == null || loadData.rows.length <= 5) {
            $('#' + id + 'Grid').setGridHeight("auto");
        }
    },
    loadui: 'disable',
    altRows: true,
    viewrecords: true,
});