I'm trying to get a jqGrid table to keep its current page on a reload. I've found some samples, but they don't seem to work for me. Here's what I'm trying:
grid.setGridParam({datatype:'json'}).trigger('reloadGrid',[{page:currentPage}]);
It refreshes but always redisplays the first page.
To retain the page on a redraw simply use this:
grid.trigger("reloadGrid",[{current:true}]);
As a matter of interest, you can also get the current page using:
var currentPageVar = grid.getGridParam('page');
Addition:
'grid' is defined thus:
var grid = jQuery("#grid");
Which refers to the ID of the grid table in the HTML.
you can use simply this code:
jQuery("#your_id").trigger("reloadGrid");
You can use
grid.trigger("reloadGrid", {page: currentPage, fromServer: true});
or
grid.trigger("reloadGrid", {current: true, fromServer: true});
in case of usage free jqGrid fork. It's important to use forceClientSorting: true together with loadonce: true.
The reason of the problem, which you describe, is the following: jqGrid can display the second page only if it would make local paging. If you use only loadonce: true then jqGrid display always the first page. More then that, the server have to sort the data returned from the server. The option forceClientSorting: true inform free jqGrid to do filtering, sorting and paging locally after loading the data from the server and before displaying the first (or another) page. The option forceClientSorting: true allows to load relatively large set of data from foreign source (which data one can't control), filter the data locally (to display only required subset of data), sort the result and to display the page of resulting data.
You must be looking for this code
$("#jsGrid").jsGrid("loadData");
Related
Am using the free jqgrid , to keep it short, am getting method not found on fixScrollOffsetAndhBoxPadding when I try to set the height of the jqgrid via the below code in beforeProcessing().
$grid.setGridHeight(200).trigger("reloadGrid");
The reason I need to set the height is, when rownNum is <10, i want height as auto. but wen the rowNum is >10, i need the grid to have a vertical scrollbar. But when setting this height, I get to see the javascript error which says, fixScrollOffsetAndhBoxPadding is not an object or property.
error:
SCRIPT438: Object doesn't support property or method 'fixScrollOffsetAndhBoxPadding'
jquery.jqgrid.min.js, line 202 character 381
I think that the origin of your problem could be wrong usage of setGridHeight or the usage of setGridHeight before you created the grid in $grid (for example $grid can be wrong and you should use $(this) instead). You didn't posted where in your code you use the lines. Free jqGrid set fixScrollOffsetAndhBoxPadding property of $grid[0] during creating of the grid (before onInitGrid is called).
One more important remark: you should be always very carefully in the usage of reloadGrid inside of other callbacks. You should understand the reloadGrid works synchronously. It means that the next line after reloadGrid will be executed after trigger("reloadGrid") is finished. For example you loads the 5-th page returned from the server. The call of trigger("reloadGrid") will reset page parameter of jqGrid, it can change datatype, place new Ajax request and so on. So I strictly recommend to use trigger("reloadGrid") only inside of setTimeout. In the way you can allow jqGrid to process the current request till the end and later make reloading:
$grid.setGridHeight(200);
setTimeout(function () {
$grid.trigger("reloadGrid");
}, 50);
It the above will not help then you should 1) use jquery.jqgrid.src.js instead of jquery.jqgrid.min.js to report the error; 2) write which version of free jqGrid you use (4.9.1, 4.9 or the current code from GitHub); 3) post more full example which can be used to reproduce the problem. One can easy localize the origin of the problem by debugging of the code, but one have to guess about the reason if one see only one line of code (or some small code fragment).
Actually this is probably pretty simple, but somehow I am unable to make it work.
I have a grid that loads data from a url. Everything works fine, except one small detail -- I have put a column picker on the table but if they have already shown the search form once, then when they change the visible columns the search form does not reflect the changes no matter how many times they close and open it.
The documentation seems to suggest that recreateForm was the solution, but it does not seem to work.
"when set to true the form is recreated every time the search dialog is activated with the new options from colModel (if they are changed)"
I launch the advanced search from a button outside the grid, if that matters.
function openSearch(grid)
{
var searchParams = {
multipleSearch:true,
overlay:false,
closeOnEscape:true,
Find:"Search",
closeAfterSearch:true,
caption:"Advanced Search",
searchOnEnter:true,
recreateForm:true
};
grid.jqGrid('searchGrid', searchParams);
}
I have found a comment by zbacsi on jqgrids site under inline editing.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#how_is_the_data_organized
"zbacsi, 2010/08/02 20:23
There is an escaping bug with special characters. Try insert alert('hello') into a field. It should be displayed as common text, but its executed..."
I was able to reproduce this issue, on my own grid setup, using the below versions of jqGrid and jQuery.
jqGrid version - > 4.4.4, jQuery version - > 1.7.1.
This can also be reproduced on the inline editing demo pages for jqGrid, located at:
http://www.trirand.com/blog/jqgrid/jqgrid.html
Once there navigate to:
Functionality -> Formatter Actions and begin editing a row.
Inside of the column labeled 'Notes' insert the value: <script>alert('hi')</script>
Hit enter or click the 'Save' icon.
The alert('hi') gets executed rather than 'Notes' containing <script>alert('hi')</script>
Any additional information would be much appreciated, thank you.
It's not a bug. You can fix the problem by usage option
autoencode: true
which I personally strictly recommend you to use the option in all grids.
jqGrid have many options. I personally find default values of some options (see values in "Default" column on the page documentation) not optimal. One from such options is autoencode which default value is false. It means that all data used to fill the grid cells will be interpreted as HTML code fragments. Scripts are the only problem which one have, but inserting the text like a>b, </tr> or <-- could really break the page.
jqGrid allow to overwrite the default by extending $.jgrid.defaults. So I include on every HTML page JS file with my own default preferences. In the file there are lines like
$.extend($.jgrid.defaults, {
autoencode: true,
gridview: true,
height: "auto"
datatype: "json",
loadui: 'block',
...
});
My server code transfers some column as a ratio value, 0.0 to 1.0. I need to format and edit it as a percent. I would like to do it on JavaScript side, without modifying server-side. So if I add a custom formatter to just multiply the value by 100, display works as expected. Moreover, when I hit edit button, inline edit box also displays value as percentage. The trouble starts when I save - the value gets converted with formatter one more time, giving me things like 10000. So OK, I need symmetry here, so I create an unformatter which just divides value by 100. But that doesn't work too - now edit control displays it as a ratio which not what I wanted (although saving now works correctly).
Is there any way around without changing the server code?
To have full support of your custom type of data like 0.0 to 1.0 displayed as percent value inclusive editing and searching you have to implements:
implement formatter to display the data in the grid in the custom way.
implement unformat to allow access to the data from its "visual representation". The method will be used by jqGrid in some situations (for example during initializing phase of form editing).
define sorttype, which could be some compatible type of data like 'number' or your custom sorting function.
use edittype: 'custom' and implement custom_element and custom_value of editoptions (see the documentation).
use stype: 'custom' and implement custom_element and custom_value of editoptions.
In some situations one from the steps could be skipped, but in the common case you have to think about implementation all of the steps. You should verify which steps from above are still not implemented in your solution.
The demo is the modification of the demo from the old answer and another answer. The demo is not oriented on your direct question. It shows just why and how one can full implement custom control in jqGrid. The functionally of form editing works not full in the demo only because of no server part implemented. If needed one could use the approach from the answer which shows how local form editing can be implemented in jqGrid. I don't wanted to make the code more complex as requiret to show the main purpose of the demo.
You can skip the unformatter in favour of custom edit type, just use this in your colModel:
{ ..., edittype: 'custom', editoptions: { custom_element: function(value, options) { return $('<input type="text" value="' + value + '"/>'); }, custom_value: function(element){ return parseFloat(element.val())/100; } }}
I have a toolbar filter set up that works on a JQGrid of mine. We recently got a requirement to only allow integers into this field. I changed the colModel of the appropriate column in order to validate client side before a search takes place. After making the changes to the javascript, the behavior has not changed. Validation appears to not be taking place client side regardless of the input, which leads me to believe I have a misunderstanding of the search rules. Code below
Previous
colModel:[ ...,
{name:'version', search:true, stype:'text'}
,...,]
Post Change
colModel:[ ...,
{name:'version', search:true, stype:'text',searchrules:{required:true, integer:true}}
,...,]
Do search rules not apply to toolbar filtering? The documentation indicates that they would, unless I'm missing a line somewhere.
Thanks for looking!
The searchrules will be used only in the searching dialog, but not in the searching filter. As the workaround beforeSearch callback function for the validation of the data. You can analyse this.p.postData. If the searching data wrong you should display the error dialog do any other actions like adding 'ui-state-error' or 'ui-state-error-text' to the input with the wrong data and return true. Returningtruevalue from thebeforeSearch` handler will prevent applying the searching requests.