1

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

James Z
  • 12,209
  • 10
  • 24
  • 44
Chandan
  • 217
  • 1
  • 3
  • 17
  • The demo https://jsfiddle.net/x3fger4z/, which you included seems to have no relation with your problem. Which `datatype` have your grid? The line `$("#grid").setGridParam({ url: URL })` is commended in your code. Why? Your current code loads the data from `URL` **directly** with respect of Ajax request, but if **you don't use the server response**. The `data` parameter of `success` callback will be not used. It's difficult to help you without any knowledge (knowing the options) how you use jqGrid. – Oleg Jul 24 '18 at 16:37
  • Hey Oleg, the fiddle that i added in the question is what my grid looks like on my machine. My grid has datatype : json with loadonce: true. From the given function i am getting data in ajax success. But the data isn't loading into existing grid. With this line i thought the data will load into grid but it didnt worked. $("#grid").setGridParam({ url: URL }) – Chandan Jul 24 '18 at 19:36
  • To clarify question: I have two methods in controller one from which I'm getting all data on page load ('/MajorsView/GetAllData',) . Another action method is what I passed into the above function which should show filtered records in the same grid. But grid is not refreshing with new ( filtered) records. – Chandan Jul 24 '18 at 19:40
  • For example on page load I have 5 records, but when I do searching from explicit button click then this show only filtered records in grid. Again trying to keeping this clear that in my code I have two different methods one which brings all data and another which only bring filtered data. I hope this clarify better. Btw thanks Oleg :) – Chandan Jul 24 '18 at 19:45

1 Answers1

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Can you give more insight on first sentence (after first comma) : **then you can just change url to another value and to trigger reloadGrid. One don't need to make a manual Ajax request.** do you mean change url dynamically? If yes then , any example answer link. As I was applying two jqgrid with different urls. – Chandan Jul 24 '18 at 20:29
  • @Chandan: I mean that you should remove Ajax call from `myfunction` and just use the code from my answer instead. It sets `url` parameter and then use `reloadGrid` with `{ fromServer: true }` parameter. The grid should be reloaded from new `url`. – Oleg Jul 24 '18 at 21:31
  • Hey @Oleg, I did the same but encodeURIComponent(gendarVal) is passing as null on controller action method. – Chandan Jul 25 '18 at 07:36
  • @Chandan: Do you initialized `gendarVal` before (`gendarVal = $("#gendarFlagsEnum option:selected").text()`)? The method `encodeURIComponent` is standard JavaScript method which makes safe the usage of special characters in URL. If `gendarVal` has no special characters the one can use `"/MajorsView/GetFemaleData?searchKey=" + gendarVal`, but `encodeURIComponent(gendarVal)` is safer as `gendarVal`. – Oleg Jul 25 '18 at 08:58
  • I got that Oleg, thanks. Instead of passing searchKey to action controller method as a param, I was passing genderVal. which having no scope after passing value to searchKey in url. I have marked this answer as accepted but it will not reflect for others. so may be moderator can mark this answer as accepted. Many thank Oleg, You are awesome! – Chandan Jul 25 '18 at 09:23
  • Yes Oleg, I know that ,but my rep count is less than 15 so it will not visible to others. – Chandan Jul 25 '18 at 11:24
  • @Chandan: I see that your reputation now is 16. Probably you need just reload the page in the web browser. You *should* be able to accept and to vote. – Oleg Jul 25 '18 at 11:26