Hello I Want To Bind Jqgrid Using Webmethod. But My Grid Is Blank Where I Am Wrong Please Help.

$(document).ready(function () {
        var pageIndex = 1;
        var pageCount;
        var minCarat = $("#carat-min").val();
        var maxCarat = $("#carat-max").val();
        debugger;
        $("#gvJQGrid").jqGrid({
            //url: 'http://192.168.108.33/Diamond/default.aspx?jqGridID=JQGrid1',
            url: 'SampleDefault.aspx/GetCustomers',
            data: JSON.stringify({ 'pageIndex': pageIndex, 'mincart': minCarat, 'maxcart': maxCarat }),
            contentType: "application/json; charset=utf-8",
            mtype: "GET",
            datatype: "json",
            page: 1,
            colNames: ['Images', 'Compare', 'Shape', 'Carat', 'Cut', 'Color', 'Clarity', 'Polish', 'Symmetry', 'Depth', 'Table', 'Floroscence',
                       'Price_Ct', 'Culet', 'Details'],
            colModel: [
                         {
                             name: 'Images',
                             align: 'center',
                             formatter: formatImage
                         },
                         {
                             name: 'checkbox',
                             align: 'center',
                             formatter: formatChkbox,

                         },
                         { name: 'Shape', align: 'center' },
                         { name: 'Carat', align: 'center'},
                         { name: 'Cut1', align: 'center' },
                         { name: 'Color1', align: 'center' },
                         { name: 'Clarity', align: 'center' },
                         { name: 'Polish1', align: 'center' },
                         { name: 'Symmetry1', align: 'center' },
                         { name: 'Depth1', align: 'center' },
                         { name: 'Table_1', align: 'center' },
                         { name: 'Floroscence1', align: 'center' },
                         { name: 'Price_Ct1', align: 'center' },
                         { name: 'Culet1', align: 'center' },
                         {
                             name: 'View',
                             align: 'center',
                             formatter: formatButton
                         }
            ],
            width: 840,
            height: 500,
            rowNum: 20,
            scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
            emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom
            pager: "#jqGridPager"
        });
    });

    function formatImage(cellValue, options, rowObject) {
        var imageHtml = "<img src='images/" + cellValue + "' originalValue='" + cellValue + "' />";
        return imageHtml;
    }

    function formatChkbox(cellValue, options, rowObject) {
        var imageHtml = "<input type=checkbox />";
        return imageHtml;
    }

    function formatButton(cellValue, options, rowObject) {
        var imageHtml = "<a href = # >View</a>";
        return imageHtml;
    }


    // The FormatFunction for CustomFormatter gets three parameters
    // cellValue - the original value of the cell
    // options - as set of options, e.g
    //   options.rowId - the primary key of the row
    //   options.colModel - colModel of the column
    // cellObject - the HMTL of the cell (td) holding the actual value
    function unformatImage(cellValue, options, cellObject) {
        return $(cellObject.html()).attr("originalValue");
    }