It was just the problem with the index property of colModel,Index was suppose to be 'pid' instead of 'ID'.    🙂

So  you just have to provide

loadonce = true

& rowTotal

to make client side sorting & paging work & also the sorttype for the columns.

{"page":1,"total":0,"records":2,"rows":[{"id":1,"cell":["1","Basic","Basic Free Package","0","yes","Edit"]},{"id":2,"cell":["2","Gold","Gold","1000","yes","Edit"]}]}

I want to implement sorting on client side.

I have included loadonce true & also tried things that I found on web but none of them working for me.

Here is my code

  <script type="text/javascript">

        var lastrow;

        $(function () {
            $("#UsersGrid").jqGrid({
                url: '../jqGridHandler.ashx?pname=mp',
                datatype: 'json',
                height: 'auto',
                rowTotal: 100,
                mtype: "GET",
                colNames: ['ID', 'Name', 'Description', 'Price', 'IsActive', 'Edit'],
                colModel: [
                        { name: 'pid', index: 'ID', align: 'center', width: 50, sortable: true, sorttype: "int" },
                        { name: 'name', width: 160, align: 'center', sortable: true, sorttype: "Text" },
                        { name: 'description', width: 250, align: 'center', sortable: true, sorttype: "Text" },
                        { name: 'price', width: 90, align: 'center', sortable: true, sorttype: "int" },
                        { name: 'isActive', width: 50, align: 'center', sortable: false },
                        { name: 'Edit', width: 50, align: 'center', sortable: false, edittype: 'select', formatter: 'showlink', formatoptions: { baseLinkUrl: 'CreatePackage.aspx', addParam: '&menuindex=1', idName: 'pid'} }                       
                    ],
                multiselect: false,

                onSelectRow: function (id) {
                    if (id && id !== lastrow) {
                        jQuery('#UsersGrid').restoreRow(lastrow);
                        //jQuery('#UsersGrid').editRow(id, true);
                        lastrow = id;
                    }
                },
                loadComplete: function () {
                    $("#UsersGrid").setGridParam({ datatype: 'json' });
                },
                onPaging : function(which_button) {
                    $("#UsersGrid").setGridParam({ datatype: 'json' });
                },
                rowNum: 9,
                rowList: [5, 10, 20, 30],
                pager: '#UsersGridPager',
                jsonReader: {
                    repeatitems: true
                },
                loadonce: true,
                sortable: true,
                viewrecords: true,
                sortname: 'ID',
                viewrecords: false,
                sortorder: 'desc',
                caption: 'Packages',
                editurl: "../jqGridHandler.ashx?pname=mp"
            });
            $("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: true, search: false },
            {
                closeAfterEdit: true,
                reloadAfterSubmit: false
            },
            {
                closeAfterAdd: true,
                reloadAfterSubmit: false
            },
            {                
                beforeShowForm: function (formid) {
                    if (lastrow == 1) {
                        alert("This package can not be deleted.");
                        $("#" + formid).remove;
                    }
                },
                jqModal: false,
                closeOnEscape: true,
                reloadAfterSubmit: false
            });

        });
    </script>