WCF/WF - WCF Service method returns data base records in json format but unable to bind jqgrid ?

My webmethod returns json format info. but jqgrid unable to bind. If any one resolve this issue please provide the solution.Here I have attached the my code:

View.cshtml:- 

<script type="text/javascript">
        $(function () {
            debugger;
            $("#grid_colnames").jqGrid({
                datatype: function (pdata) {
                    debugger;
                    $.ajax({
                        url: 'http://localhost/DemoWebService/ColumnsDataTypeService/FindByDataPageID/1',
                        data: JSON.stringify(pdata),
                        type: "GET",
                        dataType: "json",
                        contentType: "application/json",
                        async: false,
                        complete: function (jsondata, stat) {
                            debugger;
                            if (stat == "success".toString()) {
                                var thegrid = jQuery("#grid_colnames")[0];
                                thegrid.addJSONData(eval("(" + jsondata.responseText + ")"))
                            }
                        }
                    });
                },
                colNames: ['ColumnID', 'Column names of the datapage', 'DataPageColumnID', 'IsMandatory', 'DataTypeName', 'FK_LU_ColumnDataTypeID'],
                colModel: [

                    { name: 'ColumnID', index: 'ColumnID', width: 60, sorttype: "int", editable: true, hidden: true },
                    { name: 'ColumnName', index: 'ColumnName', width: 60, sorttype: "int", editable: true },
                    { name: 'DataPageColumnID', index: 'DataPageColumnID', width: 10, sorttype: "int", editable: true, hidden: true },
                    { name: 'IsMandatory', index: 'IsMandatory', width: 10, sorttype: "int", editable: true, hidden: true },
                    { name: 'DataTypeName', index: 'DataTypeName', width: 10, sorttype: "int", editable: true, hidden: true },
                    { name: 'FK_LU_ColumnDataTypeID', index: 'FK_LU_ColumnDataTypeID', width: 10, sorttype: "int", editable: true, hidden: true }
                ],
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#dataGrid_Pager',
                sortname: 'name',
                viewrecords: true,
                sortorder: "name"
            });
        });
    </script>

'Column names of the datapage'

I'm not a jqgrid guy but are you not defining the columns of the data it needs to be bind?  In your data set below, the column is defined as ColumnName not 'Column names of the datapage'.