Search code examples
jsonrestjqgridodatafree-jqgrid

How to make free jqgrid filter in url human readable

Free jqgrid reads data from server using json format. Filter condition is created using jqgrid advanced search, toolbar search or in code.

It is read from GET request query string filters parameter using

   var urlFilters,
       namedParameters =  window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'),
                        parameters = {},
                        nameAndValue,
   $grid = $("#grid"), i;
                for (i = 0; i < namedParameters.length; i += 1) {
                    nameAndValue = namedParameters[i].split('=');
                    parameters[nameAndValue[0]] = decodeURIComponent(nameAndValue[1]);
                    if (nameAndValue[0] === "filters") {
                        urlFilters= decodeURIComponent(nameAndValue[1]);
                    }
                }
                $grid.jqGrid({
                    postData: { filters: urlFilters }
                    datatype: "json",

This requires passing encoded filters condition url which is not human readable and editable:

http://localhost//Desktop?filters=%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22Baas%22%2C%22op%22%3A%22eq%22%2C%22data%22%3A%22KLIENT%22%7D%2C%7B%22field%22%3A%22Liigid%22%2C%22op%22%3A%22eq%22%2C%22data%22%3A%22%22%7D%5D%7D

Sometimes users needs to edit browser url directly to create new filter condition ?

How to make url human readable so that it can edited directly ? How to force jqgrid to create advanced and toolbar search conditons in OData or other format which does not need escaped using % when passed in url ?

Free jqgrid has OData plugin. How to extract OData search filter creation form this plugin and allow jqgrid to serialize search condition in this format and parse it back to show in advanced search filter? Or is it possible modify current search condion so that " (%22) is not used in it ?

There are related questions in How to force jqgrid to query data using OData in query string and in How one could use server side sorting and paging with Azure Mobile Services

but I dont know which is best way to implement this.

OData is striclty not required. Maybe some simple change in free jqgrid search condition serializer and deserializer allows to make it human editable in URL. However using OData makes API more standardized.

ASP.NET MVC4 and jquery are used.

Solution

  • I personally use Fiddler very active. It's free Tool which can be downloaded from here. Fiddler allows to catch full HTTP traffic. It includes additionally some tools which simplify encoding and decoding of typical HTTP traffic.

    After starting Fiddler you can choose in Tool the menu item "TextWizard" or use Ctrl+E. After that you will get very simple interface which allows you to decode/encode the filters value. For example you can insert the filter value from your question %7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22Baas%22%2C%22op%22%3A%22eq%22%2C%22data%22%3A%22KLIENT%22%7D%2C%7B%22field%22%3A%22Liigid%22%2C%22op%22%3A%22eq%22%2C%22data%22%3A%22%22%7D%5D%7D at the top part of the Wizard and choose URLDecode as transform operation. You will see immediately the decoded results

    enter image description here

    You can copy the result modify it and decode back. For example the filter Name cn "bob" should be written as {"groupOp":"AND","rules":[{"field":"Name","op":"cn","data":"bob"}]}. Using the same tool and choosing URLEncode operation you will get

    enter image description here

    Thus you can use filters=%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22Name%22%2C%22op%22%3A%22cn%22%2C%22data%22%3A%22bob%22%7D%5D%7D as the URL.