Is there a way to get & ldquo; full & rdquo; URL of jquery jqGrid to keep the filters state?

advertisements

I am using jqGrid and I have used the advanced column search dialog to filter on multiple columns. I now want to "send" this URL to another person so they can see exactly what i see. The issue is that since this is all using ajax, the URL doesn't include the filter rules.

Is there a way i can have a "Permalink" link that will generate the current jqGrid URL including all advance filters so when i enter it on another person's browser it will includes those filters set?


I find the question interesting. In general it's clear that the URL of the page which displays grid is not the same as URL used for Ajax requests to fill the grid content. Nevertheless under some restriction one can do provide a reasonable solution of the problem.

Let us we have HTML page which doesn't use and parameters or at least doesn't use the parameter with some specific name, like filters. We can use the URL option of the page to forward it to postData.filters. In the way the user who created some filter can add the filter to the URL. If the user will send the URL to somebody then opening of the URL will show filtered grid.

One can suggest many implementation ways of the approach. The implementation depends of cause from whether the filtering will take place of the client side or on the server. The usage of loadonce: true with loading the data from the server and filtering on the client is the special case which I find the mostly difficult. So I prepared small demo which works in the case

The demo loads the data from the server and uses loadonce: true option. It displays initially unfiltered grid

If the user set some filter, for example the following one

then the grid fill display one filtered row:

Then the user can click the custom button in the navigator bar

It appends the filters option to the current URL. As the result the new URL will contains

?filters=%7B"groupOp"%3A"AND"%2C"rules"%3A%5B%7B"field"%3A"Name"%2C"op"%3A"cn"%2C"data"%3A"1"%7D%5D%7D

part.

The code of the demo is only an example of the implementation. You can modify it to your requirements. The code which I used in the demo you will find below:

// parse URL and get filters option if it exists
var urlOptions = window.location.href.split("?"), urlParams, filters, i, params;
if (urlOptions.length === 2) {
    urlParams = urlOptions[1].split("&");
    for (i=0; i<urlParams.length; i++) {
        params = urlParams[i].split("=");
        if (params.length === 2 && params[0] === "filters") {
            filters = decodeURIComponent(params[1]);
        }
    }
}

$.extend($.jgrid.search, {multipleSearch: true, multipleGroup: true});

$("#list").jqGrid({
    ... // some non-important options
    datatype: "json",
    loadonce: true,
    beforeRequest: function () {
        var $self = $(this), postData = $self.jqGrid("getGridParam", "postData");
        if (filters && !postData.filters) {
            // use filters from the URL if no other filter specified
            postData.filters = filters;
            $self.jqGrid("setGridParam", {search: true});
        }
    },
    loadComplete: function () {
        // disable custom button if no filter set
        var $self = $(this), postData = $self.jqGrid("getGridParam", "postData");
        if (postData.filters && filters !== postData.filters) {
            $("#addFilterToUrl").prop("disabled", false).removeClass("ui-state-disabled");
        } else {
            $("#addFilterToUrl").prop("disabled", true).addClass("ui-state-disabled");
        }

        if ($self.jqGrid("getGridParam", "loadonce") && $self.jqGrid("getGridParam", "datatype") !== "local") {
            setTimeout(function() {
                $self.trigger("reloadGrid");
            }, 100);
        }
    }
}).jqGrid("navGrid", "#pager")
  .jqGrid("navButtonAdd", "#pager", {
      caption: "",
      title: "add filter to the current URL",
      id: "addFilterToUrl",
      buttonicon: "ui-icon-comment",
      onClickButton: function () {
          // append filter to the current URL
          var postData = $(this).jqGrid("getGridParam", "postData");
          if (postData.filters) {
              window.location.href = window.location.href.split("?")[0] + "?" +
                  $.param({filters: postData.filters});
          }
      }
});