I created a jqgrid using webmethod but i am struggling with how to perform add,delete,and search operations and creating subgrid

        $(document).ready(function () {
            $("#btn").click(function () {
                $("#datagrid").GridUnload();
                gridLoad();
            });
        });

//next script

        function gridLoad() {

            $("#datagrid").jqGrid({
                url: 'Default.aspx/ConvertDataTabletoString',
                datatype: 'json',
                mtype: 'POST',

                serializeGridData: function (postData) {
                    postData.fromdate = $('#fromdate').val();
                    postData.todate = $('#todate').val();
                    postData.project = $('#DropDownList1').val();
                    postData.dailnum = $('#Text3').val();
                    postData.wwid = $('#Text1').val() ;
                    postData.extension = $('#Text2').val();
                    postData.sites = $('#Text4').val();
                    // return JSON.stringify(postData);
                    return JSON.stringify(postData);
                },

                ajaxGridOptions: { contentType: "application/json" },
                loadonce: true,
                colNames: ['Call Type', 'Total No of Calls', 'Total Call Duration', 'Total Cost(INR)'],
                colModel: [
                             { name: 'calltype', index: 'toc', key: true, sortable: true, sorttype: 'int', width: '317', align: 'center' },

                              { name: 'TotalNoofCalls', index: 'TotalNoofCalls', width: '297', align: 'center' },
                              { name: 'TotalCallDuration', index: 'TotalCallDuration', width: '270', align: 'center', formatoptions: { srcformat: 'ISO860Long', newformat: 'G:H:S'} },
                              { name: 'Cost', index: 'price', width: '297', align: 'center' }
                          ],
                pagerpos: 'center',
                pager: '#navGrid',
                rowNum: 20,
                rownumbers: true,
                rowList: [20, 50, 100],
                width: 900,
                viewrecords: true,
                toppager: true,
                gridview: true,
                jsonReader: {
                    page: function (obj) { return 1; },
                    total: function (obj) { return 1; },
                    records: function (obj) { return obj.d.length; },
                    root: function (obj) { return obj.d; },
                    repeatitems: false,
                    id: "0"
                },

                footerrow: true,



                    loadComplete: function (clr) {


                        var costSum = $('#datagrid').jqGrid('getCol', 'Cost', false, 'sum');
                        costSum = costSum.toFixed(2);

                        var totalCalls = $('#datagrid').jqGrid('getCol', 'TotalNoofCalls', false, 'sum');
                        var duration = $('#datagrid').jqGrid('getCol', 'TotalCallDuration', false, 'sum');


                        $('#datagrid').jqGrid('footerData', 'set', { 'TotalNoofCalls': " TotalCalls: " + totalCalls, 'Cost': "TotalCost: " + costSum, 'TotalCallDuration': "TotalDuration:" + duration });


                    },




                caption: 'Admin Summary'
            });

            $('#datagrid').jqGrid('navGrid', '#navGrid',
                   {
                       edit: true,
                       add: true,
                       del: true,
                       search: true,
                       searchtext: "Search",
                       addtext: "Add",
                       edittext: "Edit",
                       deltext: "Delete",
                       cloneToTop: true

                   });
                   $("#datagrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });




                   // Export to excel
                   jQuery('#datagrid').jqGrid('navButtonAdd', '#datagrid_toppager', { caption: "EXCEL", title: 'Export to EXCEL', onCli