How to reload data in free jqgrid 4.15.4

Question

I have a question regarding free jqgrid. My jqgrid is loading fine with all data. I have given one dropdown and search button explicitly. when I am trying to search by selecting the dropdown and clicking on search button, New data is not loading into existing grid.

Here is my fiddle: https://jsfiddle.net/x3fger4z/.

On page load, I am using this url: '/MajorsView/GetAllData', but after clicking on button I wanted to load from another url.

Below is my search button and actually I am getting data in success, but it is not reflecting on grid:

<input type="button" onclick="return myfunction();" id="btnFlagStatus" value="Search" class="btn btn-primary" />

function myfunction() {
 var gendarVal = $("#gendarFlagsEnum option:selected").text();
        var URL= "/MajorsView/GetFemaleData?searchKey=" + gendarVal;
        $.ajax({
            type: "GET",
            url: URL,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(gendarVal),
            datatype:"json",
            success: function (data) {
                //$("#grid").setGridParam({ url: URL })
                $("#grid").trigger('reloadGrid');

            },
            error: function () {
                alert("error");
            }
        })
}

I have tried to taken references from these but no avail

• How to filter the jqGrid data NOT using the built in search/filter box
• how to reload jqgrid in asp.net mvc when i change dropdownlist
• jQuery button click refresh of jqGrid only firing once

Answer 1

If you use datatype: "json" with some url, then you can just change url to another value and to trigger reloadGrid. One don't need to make a manual Ajax request. If you use loadonce: true option additionally, then datatype of the grid will be changed to "local" to process sorting, paging and filtering locally. Every sorting, paging and filtering is nothing more as reloading the grid which has datatype: "local" with another parameters (like page, sortname, postData.filters). Thus to reload the data of the grid from the server one have to restore datatype to the initial value ("json" in your case). Thus you can use

var p = $("#grid").jqGrid("getGridParam"); // get reference to all parameters of jqGrid
p.url = "/MajorsView/GetFemaleData?searchKey=" + encodeURIComponent(gendarVal)
$("#grid").trigger("reloadGrid", { fromServer: true });

Alternatively ole can reset datatype directly (with p.datatype = "json";), but the usage of fromServer: true could be helpful in other scenarios and it makes the code more readable in my opinion. See UPDATED part of the old answer for additional information.