JQGrid is not binding.. : The Official Microsoft ASP.NET Forums

Reply

inderjeetsin...

Member

105 Points

166 Posts

JQGrid is not binding..

Aug 01, 2011 08:16 AM|LINK

hello friends, i am trying to bind JQGrid, all set to well but data is not binding in the grid,

here is my javascript

<script src="JavaScript/Jquery.js" type="text/javascript"></script>
    <script src="JavaScript/grid.locale-en.js" type="text/javascript"></script>
    <script src="JavaScript/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="JavaScript/json2-min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">

        $(document).ready(function () {

            var grid = $("#productGridView");

            $("#productGridView").jqGrid({
                // setup custom parameter names to pass to server
                prmNames: {
                    search: "isSearch",
                    nd: null,
                    rows: "numRows",
                    page: "page",
                    sort: "sortField",
                    order: "sortOrder"
                },
                // add by default to avoid webmethod parameter conflicts
                postData: { searchString: '', searchField: '', searchOper: '' },
                // setup ajax call to webmethod
                datatype: function (postdata) {
                    //$(".loading").show(); // make sure we can see loader text
                    $.ajax({
                        url: 'dummyService.asmx/GetData',
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        //data: JSON.stringify(postdata),
                        data: "{}",
                        dataType: "json",
                        success: function (data, st) {
                            if (st == "success") {
                                grid = $("#productGridView")[0];
                                var objJSON = eval("(function(){return " + data.d + ";})()");
                                //alert(objJSON.Head[0].id);
                                grid.addJSONData(objJSON.Head[0]);
                            }
                        },
                        error: function () {
                            alert("Error with AJAX callback");
                        }
                    });
                },
                // this is what jqGrid is looking for in json callback
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "totalpages",
                    records: "totalrecords",
                    cell: "cell",
                    id: "id", //index of the column with the PK in it
                    userdata: "userdata",
                    repeatitems: true
                },
                colNames: ['Id', 'Amount', 'Share'],
                colModel: [
            { name: 'id', index: 'id', width: 55, search: false },
            { name: 'fname', index: 'fname', width: 200, searchoptions: { sopt: ['eq', 'ne', 'cn']} },
            { name: 'lname', index: 'lname', width: 200, searchoptions: { sopt: ['eq', 'ne', 'cn']} }
        ],
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: jQuery("#pageNavigation"),
                sortname: "fname",
                sortorder: "asc",
                viewrecords: true,
                caption: "Grid Title Here",
                gridComplete: function () {
                    //$(".loading").hide();
                }
            }).jqGrid('navGrid', '#pageNavigation', { edit: false, add: false, del: false },
    {}, // default settings for edit
    {}, // add
    {}, // delete
    {closeOnEscape: true, closeAfterSearch: true }, //search
    {}
)
        });

    </script>

This is the JSON data Coming from Websevice

{"d":"{ \"Head\":[ { \"id\":\"000:\\J2\",\"fname\":\"500.00\",\"lname\":\"500.00\"}, { \"id\":\"000:\\J4\",\"fname\":\"100.00\",\"lname\":\"0.00\"}, { \"id\":\"000:\\J:\",\"fname\":\"50.00\",\"lname\":\"0.00\"}, { \"id\":\"000:\\J\u003c\",\"fname\":\"60.00\",\"lname\":\"30.00\"}, { \"id\":\"000:\\JM\",\"fname\":\"60.00\",\"lname\":\"30.00\"} ]}"}