Load JQGrid On Button Click Everytime

script tag

    var firstClick = true;
    $(document).ready(function () {
        $('.editor-date > input').datepicker();
        $('.getdata').click(function () {
            if (!firstClick) {
                $("#GridTable").trigger("reloadGrid");
            }
                firstClick = false;
                $('#GridTable').jqGrid({
                    url: '<%= Url.Action("GetData", "Report") %>',
                    datatype: 'json',
                    mtype: 'POST',
                    colNames: ['Log ID'],
                    colModel: [{ name: 'LogID', index: 'MessageLogID', key: true, formatter: pointercursor }],
                    multiselect: true,
                    sortname: 'LogID',
                    sortorder: "asc",
                    viewrecords: true,
                    pager: $('#pager'),
                    rowNum: 20,
                    rowList: [5, 10, 20, 50],
                   postData: {
                        IdParam: function () {
                            return $('#testLogID').val();
                        }
                    },
                    jsonReader: {
                        repeatitems: false,
                        id: 'LogID',
                        records: 'TotalRecords',
                        total: 'TotalPages',
                        page: 'CurrentPage',
                        root: 'Rows'
                    },
                    loadError: function (xhr, status, error) {
                        messageBox('Error', 'Error occurred loading data.');
                    },
                    height: 'auto',
                    width: 'auto'
                });

            });

script end tag

Post Parameters or Data with URL for JQGrid

Without Parameters:

jQuery(document).ready(function(){
  jQuery("#list").jqGrid({
    url:'list_xml/',
    datatype: 'xml',
    mtype: 'GET',....


With Parameters:

1. Query(document).ready(function(){ 
2. jQuery("#list").jqGrid({   
3. url:'list_xml/',   
4. datatype: 'xml',   
5. mtype: 'GET',
6. postData:{myname:myvar,,,},

Use like this.

Create or Load grid on Button click

<script>

$(document).ready(function () {
    $("#action").click(function () {
      alert('button clicked');
});
});
</script>

<input value="ACTION" name="action" id="action" type="button">

Dynamic Data Fetch for Select Options in JQgrid

{name:'Role',index:'Role',width:40, editable: true,edittype:"select",formatter: 'select',
editoptions:{readonly:true, dataUrl: "FetchDataServlet?Fetch_Data=Manage_User_Role",
buildSelect: function(data) {
var response = jQuery.parseJSON(data);
var s = '';
alert(data + '');
if (response && response.length) {
for (var i = 0, l=response.length; i'+ri+'';
}
}
return s + "";
}
}},



public final JSONArray FetchDataForManageUserRole()
{
List allRoleNames = RolesTable.getAllRoleNames(hibernateSession);
net.sf.json.JSONArray responcedata = new net.sf.json.JSONArray();

for (String roleName : allRoleNames) {
responcedata.put(roleName);
}
return responcedata;
}

Select a Single row in JQGrid

At the properties add the below line.

multiselect: true,
       beforeSelectRow: function(rowid, e)
       {
           jQuery("#myTable").jqGrid('resetSelection');
           return(true);
       }

myTable - Table Id

Ref: http://jsfiddle.net/vandalo/YWVA8/4/