How to Change Row Location in jqgrid?

I am using jqgrid with MVC and for now, I want change Row location when click on ^ to get one line up and inverse.

actually I want to set 'up' and 'down' signs to every row for change one level row locations

any body can help me?!

There are a lot of possible solution. One of them is to use custom formtter to define the buttons and then bind event on loadComplete to move the rows using the jquery. Below the code:

        $("#jqGrid").jqGrid({
            datatype: "local",
            data: mydata,
            height: 250,
            width: 780,
            colModel: [
                { label :'move', formatter : myformatter, width:95},
                { label: 'Inv No', name: 'id', width: 75, key:true },
                { label: 'Date', name: 'invdate', width: 90 },
                { label: 'Client', name: 'name', width: 100 },
                { label: 'Amount', name: 'amount', width: 80 },
                { label: 'Tax', name: 'tax', width: 80 },
                { label: 'Total', name: 'total', width: 80 },
                { label: 'Notes', name: 'note', width: 150 }
            ],
            viewrecords: true, // show the current page, data rang and total records on the toolbar
            caption: "Load jqGrid through Javascript Array",
            loadComplete : function() {
              $(".up,.down").on('click', function () {
                 var row = $(this).closest("tr.jqgrow");
                 if($(this).is('.up')){
                    row.insertBefore(row.prev());
                 } else {
                    row.insertAfter(row.next());
                 }                    
              });
            }
        });
        function myformatter() {
            return '<button class="up" >Up</button>' + '<button class="down">Down</button>';
        }

Demo here