How to make free jqgrid filter in url human readable

Question

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.

Sorry, but you mix in the question two independent things: the existing `filters` format and the URL format of OData which can be generated with respect of OData plugin for example. You should understand, that one can't change existing format of filter without breaking of compatibility with previous versions. It seems to me that you need just have simple tool which allows you to decode the URL in the form which you (not a simple user) can modify and another tool which makes back encoding. Isn't so? — Oleg, Dec 07 '15 at 12:26
@Oleg. Yes. Question asks for two javascript methods/callbacks: 1. Serialize jqgrid filter object to OData or similar URL friendly string 2. Convert it back to jqgrid format to pass to jqgrid advanced search dialog and to show in jqgrid search toolbar. — Andrus, Dec 07 '15 at 12:44
I still can't follow you. Do you use OData on the backend or not? You wrote "Sometimes users needs to edit browser url directly to create new filter condition?" It means that your server part support the standard jqGrid format of `filters` parameter and your problem exist only because you want to save it somewhere or to modify previously created `filters` parameter. Isn't so? — Oleg, Dec 07 '15 at 12:50
OData is not used. Backend uses parser from answer http://stackoverflow.com/questions/10051847/jqgrid-advance-search-could-we-use-and-and-or-operators-at-the-same-time . I tried to type in browser `http://mysite/API/Customer?filters=Name cn "bob"` but got invalid json string exception from deserializer. How to fix this so that filters can specified in browser URL in readable format ? — Andrus, Dec 07 '15 at 13:13
Do you need to generate the filter which corresponds the filter `Name cn "bob"`? You need just use `{"groupOp":"AND","rules":[{"field":"Name","op":"cn","data":"bob"}]}` or `http://mysite/API/Customer?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`. Do you search the way how to encode `{"groupOp":"AND","rules":[{"field":"Name","op":"cn","data":"bob"}]}` string? — Oleg, Dec 07 '15 at 13:24
@Oleg typing to browser `http://mysite/API/Customer?_filters={groupOp:"AND",rules:[{field:"Name",op:"cn",data:"bob"}]}` (without URL encoding) worked. This solves the issue. Thank you very much. It would be nice if url can written without `"` characters for non string tokens: `http://mysite/API/Customer?_filters={groupOp:AND,rules:[{field:Name,op:cn,data:"bob"}]}` but this is not important — Andrus, Dec 07 '15 at 13:54

score 1 · Accepted Answer · answered Dec 07 '15 at 14:21

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

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

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.

How to make free jqgrid filter in url human readable

1 Answers1