Query string

[queensgambit9]

Hi

I would like to generate a query string url where selected filters, columns visible, column order etc are set from the query like: ?filter=value1,value2&filter2=value1,value2 etc...
What would be the best approach for this?

Like the saveState functionality but I would like to have it in qs URL format.

Thanks in advance.

[paramvir]

1. If you want to get parameters to gather grid state,  best approach is to use inbuilt state functionality API rather than writing it from scratch, and post it to server the way you like.

Code: [Select]

var gridState = grid.loadState( { state: false});
//now gridState string  can be send to remote server.

2. If you want it for the purpose of remote paging, remote filtering, remote sorting, then use dataModel.location = 'remote, filterModel.type = 'remote' and sortModel.type = 'remote' and the required parameters are automatically posted by grid in this format.

https://paramquery.com/pro/tutorial#topic-remote-requests

[queensgambit9]

No post needed.

[paramvir]

1. Can also be send as GET request which is same as sending url query string.

?state=gridState

2. dataModel.method can be "GET" or "POST"

[queensgambit9]

I have my new gridstate obj in a variable built from qs.
How can I now save it by saveState and then load it by loadState? Or is there a better way?

My goal is the possibility to create URLs from selected filters etc (everything in saveState) and then load it through qs once the URL is visited.

[paramvir]

if you mean better way by easy way, then saving grid state in local storage is lot easier than saving it in remote state.

In case of remote storage individual state is saved corresponding to every user. User is identified by session id or user login id.

If you want to use query string, it's expected/assumed that you have prior experience in using it.

If your state has lot of info, then you may face problem since query string has limited length depending upon browser.

POST requests are safest bet to send data ( grid state ) to the server.

For database/ remote storage of state, it would remain same as https://paramquery.com/pro/demos/grid_state except the part where saveState and loadState is called.

Instead of simple grid.saveState()

Code: [Select]

var state = grid.saveState({save: false}); //returns state string.
//post or send as qs the state string to remote store via Ajax call $.ajax

//on remote server, save the state in remote server corresponding to session id of the user.

Instead of simple grid.loadState()

Code: [Select]

//get state string from remote store via Ajax call.
and call grid.loadState({state: state}); in Ajax success callback.


My goal is the possibility to create URLs from selected filters etc (everything in saveState) and then load it through qs once the URL is visited.

your implementation plan is not clear enough. Could you please provide more details / example?

[queensgambit9]

Thanks.
For local storage, tried:

Code: [Select]

$( "#grid_array" ).pqGrid( "loadState", newState );

To load by custom (qs) newState, but it doesn't seem to work...?

[paramvir]

Please note that newState should be the same string returned by grid.saveState(). Any other string won't work.

You have mentioned both local storage and query string in your post but they are mutually exclusive. if you are using local storage, then there is no need for querystring.

There is no querystring used in this example: https://paramquery.com/pro/demos/grid_state

Your code doesn't show either the value of newState or the details on how did you get it. Do you see any error in the browser console?

Please provide a full test case in order for me to check.

[queensgambit9]

I'll try clarify.
I want the to have the possibility to set filter etc from directly from the url, ex: pq.html?filter1=value1, filter2 etc
The above qs is based on:

Code: [Select]

var gridState = grid.saveState( { state: false});
var qsState = $.param(JSON.parse(gridState));

This makes it possible to generate a qs (qsState) by saving the state and the use a button in the toolbar to get the url.
If the user enters the url I would like to load by reading the qs and then execute loadstate with the converted qs.

So every user can generate a url that will preload whatever by using the built in state functionality. These urls can then be shared etc.

Reading from qs I have:

Code: [Select]

var newState = JSON.stringify(jQuery.deparam.querystring());
grid.loadState( { newState } )

My issue is now I get null values in newState and it won't load.

Currently, I have no database, everything is rendered in the browser and not using any webserver functionality.

[paramvir]

your API calls have incorrect parameters.

var gridState = grid.saveState( { save: false});

grid.loadState( { state: newState } )

Besides this, you need to debug your code, there may be errors in other part of code which you haven't shared. If your code is fine and still doesn't work, then you need to report the problem to author of jQuery.deparam.querystring()

or

Since you don't have to process the state on web server, why not save gridState as such without $.param(JSON.parse(gridState))

?state = gridState

[queensgambit9]

Thanks for your help. Not sure I am going the right direction with this and probably look into other solution