jQuery Grid Plugin - jqGrid

The data gets returned successfully if i make a seperate  $.ajax() call and assign to grid, but path included is displaying blank grid.

I have been struggling for a while :- 

script :-

jQuery("#list1").jqGrid({        
        datatype: "json",
        mtype: 'POST',
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        url: "SearchResults.asmx/Search",
       
        colNames: ['From', 'To', 'Subject', 'Sent'],
        colModel: [
        { name: 'from', index: 'from', align: 'left' },
        { name: 'to', index: 'to', align: 'left' },
        { name: 'subject', index: 'subject', align: 'left' },
        { name: 'sent', index: 'sent', align: 'left', sorttype: "date"}],
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        pager: '#pager3',
        sortname: 'id',
        viewrecords: true,
        sortorder: "asc",
        loadonce: true,
        caption: 'Search Results',
        imgpath: '../App_Themes/Orange/images',
        loadError : function(xhr,status,error){
            alert('error');
            alert(status);
            alert(error);
        },
        loadComplete: function (data) {
            alert('loaded');
            alert(data);
        }
        });

c# code

 JQGridData gData = new JQGridData();
            gData.total = "1";
            gData.page = "1";
            gData.records = results.LongLength.ToString();
            gData.rows = new JQGridDataRow[results.LongLength];
            for (int i = 0; i < results.LongLength; i++)
            {
                SearchResult sr = results[i] as SearchResult;
                gData.rows[i] = new JQGridDataRow();
                gData.rows[i].id = sr.From;
                gData.rows[i].cell = new string[4];
                gData.rows[i].cell[0] = sr.From;
                gData.rows[i].cell[1] = sr.ToNames;
                gData.rows[i].cell[2] = sr.Subject;
                gData.rows[i].cell[3] = sr.Sent.ToShortDateString();
            }

Can some help ?