JQGrid Building the dynamic sharepoint list data

Using SPServives load all the data into array Clientdata array
Reference this script file,
 <script src="/_layouts/SmartPoint/assets/scripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script>
Initially initialize the Clientdata array as i.e. var Clientdata  = [ ];

function GetClientList() {
    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "SOWClients",
        CAMLViewFields: "",
        completefunc: buildClientarray
    });
}
function buildClientarray(xData, status) {
    $(xData.responseXML).SPFilterNode("z:row").each(function () {     
        Clientdata.push({
            id: $(this).attr("ows_ID"),
            Name: $(this).attr("ows_Title"),
            CID: $(this).attr("ows_CID"),
            Acronym: $(this).attr("ows_acronym"),
            Description: $(this).attr("ows_Description")
        });
    });
}
Then load the grid as mentioned below,
Reference the two script files,

<script type="text/javascript" src="/_layouts/SmartPoint/assets/scripts/JQgrid4.4/grid.locale-en.js"></script>
<script type="text/javascript" src="/_layouts/SmartPoint/assets/scripts/JQgrid4.4/jquery.jqGrid.src.js"></script>
and reference one css file,
 <link href="/_layouts/SmartPoint/assets/css/admin/ui.jqgrid.css" rel="stylesheet" type="text/css" />



function ClientGriddisplay() {
    jQuery("#Clientgrid").jqGrid({
        data: Clientdata,
        datatype: "local",
        colNames: ['ID', 'CID', 'Name', 'Acronym', 'Description'],
        colModel: [
{ name: 'id', index: 'id', width: 100, hidden: true, resizable: false },
{ name: 'CID', index: 'CID', width: 100, hidden: true, resizable: false },
{ name: 'Name', index: 'Name', width: 95, resizable: false },
                { name: 'Acronym', index: 'Acronym', width: 95, resizable: false },
                { name: 'Description', index: 'Description', width: 195, align: "left", resizable: false }
],
        rowNum: 200,
        viewrecords: true,
        sortname: 'id',
        onSelectRow: function (id) {
            ClientListId = id;
            $('#ErrorDiv').hide();
            globalSyncCID= jQuery("#Clientgrid").jqGrid('getCell', id, 'CID');
            $('#txtClientName').val(jQuery("#Clientgrid").jqGrid('getCell', id, 'Name'));
            $('#txtAcronym').val(jQuery("#Clientgrid").jqGrid('getCell', id, 'Acronym'));
            $('#DescriptionID').val(jQuery("#Clientgrid").jqGrid('getCell', id, 'Description'));
        },
        width: 555,
        height: 280,
        caption: "Client"
    });
}

Reference the css file for jquery,
    <link href="/_layouts/SmartPoint/assets/css/admin/jquery-ui.css" rel="stylesheet" type="text/css" />
Reference the two js file for jquery,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>

In document.ready() function call these two methods,

$('#document').ready(function () { 
//To load the client data from the sharepoint list.
    GetClientList();
//To load the client data to the JQgrid
    ClientGriddisplay();
});