<script type="text/javascript" language="javascript">

    $(document).ready(function () {

        GetData();

    });

    var employees;

    function GetData() {       

        $.ajax({

            url: "Default.aspx/GetEmployees",

            type: "POST",

            dataType: "json",

            contentType: "application/json; charset=utf-8",

            success: function (data, textStatus, jqXHR) {

                alert(data.d);

                employees = JSON.parse(data.d);

                alert('employees = ' + employees[0].FirstName);

                RenderGrid();

            },

            error: function (xhr, ajaxOptions, thrownError) {

                alert('my error = ' + thrownError);

                alert('my error1 = ' + ajaxOptions);

                alert('my error2 = ' + xhr);

            }

        });

    }

    function RenderGrid() {

        alert('jq = ' + employees)

        jQuery("#divGrid").jqGrid({

            datatype: function (pdata) {

                getData(pdata);

            },

            colNames: ['First Name', 'Last Name', 'Role'],

            colModel: [

        { name: 'FirstName', index: 'FirstName', width: 100, align: "left" },

        { name: 'LastName', index: 'LastName', width: 100, align: "left" },

        { name: 'Role', index: 'Role', width: 150, align: "left" }

        ],

            datatype: "local",

            data: employees,

            height: "auto",

            gridview: true,

            hoverrows: true,

            authwidth: true          

        });

    }

</script>

I have a variable containing JSON objects of Employees.  Each employee has a first name, last name, and role.  all three properties are strings.  How do I bind a jqGrid to the JSON I described above?  I don't want to have a pager.  I tried doing the following but nothing besides the header bar (i.e. colun names is being desiplayed).  After function getData is called data.d does contain my JSON and   alert('employee First Name = ' + employees[0].FirstName); is outputting the apropriate first name.  But the grid does not bind the data correctly.  What am I missing?  Thanks.

<script type="text/javascript" language="javascript">
function getData(pdata) {
var employees;
         $.ajax({
            url: "Default.aspx/GetEmployees",
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data, textStatus, jqXHR) {
                alert(data.d);                
                employees = JSON.parse(data.d);
                alert('employee First Name = ' + employees[0].FirstName);
                var thegrid = $("#divGrid")[0];
                thegrid.addJSONData(data.d);                

            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('my error = ' + thrownError);
                alert('my error1 = ' + ajaxOptions);
                alert('my error2 = ' + xhr);
            }
        });
}

    $(document).ready(function () {

  jQuery("#divGrid").jqGrid({
             datatype: function(pdata) {
                    getData(pdata);
            },
//                datatype: 'jsonstring',
//                datastr: GetJSON(),

            colNames: ['First Name', 'Last Name', 'Role'],
            colModel: [
        { name: 'FirstName', index: 'FirstName', width: 90 },
        { name: 'LastName', index: 'LastName', width: 100 },
        { name: 'Role', index: 'Role', width: 80, align: "right" }
        ],
            rowNum: 10,
            rowList: [10, 20, 30],
            //pager: '#pager2',
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",            
            caption: "JSON Example"
        });
        //jQuery("#divGrid").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });

    });

</script>