I recently finished an integration between the open source jqGrid and jQuery BBQ libraries. I have released my integration as open source, as well. As with both projects, it is dual-licensed under the MIT and GPL licenses.
jqGrid is a JavaScript grid component with many useful features. I have previously explained how to use it with ASP.NET MVC.
jQuery BBQ is a library which helps you manage proper functionality of the web browser’s back and forward buttons by changing the fragment (hash) of the URI. Using my integration means that you can have a jqGrid on a web page and the back and forward buttons will work as expected.
To be specific, when you first load a certain page, the grid will probably be on page 1. You could click the next page button on the grid to go to page 2. Without my integration, clicking the back button would not take you back to page 1. With my integration, it will. Similarly, I support the sort and records per page combo box. You can of course extend this yourself to track other grid features.
The image above shows a demo page I’ve prepared, which you try for yourself. The grid on the left does not use the history plug-in. The grid on the right does. Note that when you page, sort, or change the number of rows shown in the grid with the history, the URI fragment also changes.
I have contributed my plug-in back to the jqGrid project. You can get the source from github.
{ 10 } Comments
I hate to have to tell you, but when I looked at your demo page both grids did exactly the same thing when I "Next Page’d" four times then clicked "Back" in my browser…
… nothing.
Both grids stayed on Page 4. After I "Back’d" four times I backed off the grid page and back to the "Demo intro" page.
Browser: ChromePlus
Jolyon,
I killed the demo somehow when I put it up. I’ll fix that at work Monday.
Don’t work. Opera 10.60.3422
OK, fixed that. I’m still getting used to GitHub. I added the unit tests to the site to make it easier to test in multiple browsers.
I think the line:
var newOptions = optionsWithHistory(options);
should be
var newOptions = optionsWithHistory.call(this, options);
because on my system, when the optionsWithHistory method is called, the "this" variable is the current window in the method and not the grid.
Good job by the way
Vincent,
Not only should it be that, it is that… in the gh-pages branch. But I seem to have failed in my attempt to push that into the master branch. I’ll fix that tomorrow. Thanks for your patience; I’m still a bit awkward with git.
Update: Fixed now; thanks again for the report.
Hi, you’re my held -)
I looked for a way to do this. I founded a way to persist this in cookies, but… then I had to reload the grid.
Now it goes very well… But do you have a way to add the server filter params ?
Thank you in advance,
Michel
Michel,
I don’t understand what you are trying to do ("server filter params"). Can you clarify your question?
Craig,
Sorry if you didn’t understand… (I’m french speaking -)
So, on the jqGrid demos (http://www.trirand.com/blog/jqgrid/jqgrid.html#), you have the integrated search toolbar as from version 3.5. This is the jqGrid filtertoolbar. Those params are given to the cfc (I work with coldfusion) with the ‘other’ parameters, page, rows… and take the parameter name from the colModel.
I tried with the persist.concat, but didn’t succeeded (but i’m not a javascript guru -)
Thank you for your interest,
Michel
Michel,
Vous pouvez répondre en français, si vous préférez.
Persisting search/filter is difficult, but possible. The reason it is difficult is because of the way the grid encodes the search into query string parameters. It can be hard to predict what the name of the query string parameters will be. Worse, changing your search configuration on the grid can change the name of the query string parameters. And the way that the grid stores its "current" search values does not correspond directly to the query string parameters.
Essentially, you have to write custom JavaScript code to make this work. There is no way (that I know of) for the plug-in to support search/filter "out-of-the-box", because the names of the query string parameters will be different depending upon your data and your search configuration.
In addition to changing the persist option, you may need to override $.jgrid.history.getPropertyValue or $.jgrid.history.setPropertyValue as well.
Post a Comment