Jqgrid: Grid refresh on edit, paging

Question

Using latest version of free jqgrid. I am using the below code for my jqgrid. I have some issues and question:

1) When I go to next page and previous page not sure what happens but my grid items keep moving up and down.

2) When I add/edit an item for form field I want the grid to refresh and get updated from the server but this does not happens and again my newly added data is lost in the grid as mentioned in my point1. I tried to add navOptions: { reloadGridOptions: { fromServer: true } } but still nothing.

3) When the user clicks on edit button on my pager it opens the user form field. I want the submit button to show edit instead of "Add" which it shows currently. Here is my code below:

<script type="text/javascript">
$(function () {
    "use strict";
    var $grid = $("#list");             
    $grid.jqGrid({
        url: '@Url.Action("GetData", "Home")',
        datatype: "json",
        mtype: 'Get',
        colNames: ['Id', 'Name', 'Sex', 'Address'],
        loadonce: true,
        height: '100%',
        autowidth: true,
        emptyrecords: "No Users found.",
       colModel: [
                    { name: 'empid', index: 'empid', editable: true,  editrules: { required: true}},
                    { name: 'fname', index: 'fname', editable: true,  editrules: { required: true}}, //currently these are texbox, but I want this to be label which gets filled based on the empid
                    { name: 'lname', index: 'lname', editable: true,  editrules: { required: true}},                
                    { name: 'address', index: 'address', editable: true,  editrules: { required: true}}
         ],
            cmTemplate: { autoResizable: true, editable: true },
            autoResizing: { compact: true, resetWidthOrg: true },
            iconSet: "fontAwesome",
            guiStyle: "bootstrap",
            rowNum: 10,
            rowList: [5, 10, 20, "10000:All"],
            viewrecords: true,
            autoencode: true,
            sortable: true,
            pager: true,
            rownumbers: true,
            sortname: "empid",
            sortorder: "desc",
            pagerRightWidth: 150,
            inlineEditing: {
                keys: true
            },
            searching: {
                loadFilterDefaults: false,
                closeOnEscape: true,
                searchOperators: true,
                searchOnEnter: true,
                caption: "Search",
                Find: "Search"
            },            
            editurl:'@Url.Action("GetDetails", "Home")',
            formEditing: {
                reloadGridOptions: { fromServer: true },
                reloadAfterSubmit: true,
                width: 460,
                closeOnEscape: true,
                closeAfterEdit: true,
                closeAfterAdd: true,
                closeAfterDelete: true,
                savekey: [true, 13],
                addCaption: "Add",
                editCaption: "Edit",
                bSubmit: "Add"                   
            },
            formDeleting: {
                width: 320,
                caption: 'Delete'
            },
            navOptions: { reloadGridOptions: { fromServer: true } }
    }).jqGrid("navGrid")
    .editGridRow("new", properties);              
});
</script>

Answer 1

The first two items above I was able to resolve using below code:

 navOptions: { reloadGridOptions: { fromServer: true } }

But the 3rd item I am still not able to resolve where I am not able to change the text of the Add button to change it to edit when the edit toolbar button is clicked