I have to set JQGrid property loadonce : true for searching JQGrid data.
For loadonce: false searching is not possible.
My grid containg multiple pages. But while setting loadonce : true , my pagination is not working. its showing disabled.
//Search
{
searchOnEnter: true,
closeOnEscape: true,
reloadAfterSearch: true
},
How can I make pagination work along with search operation.
If you want to use loadonce: true then the server should return all data instead of returning one page. jqGrid will save locally all the data in internal data and _index parameter and it will display only the first page of data. The paging will be enabled and it will be implemented locally like sorting and filtering/searching.
Related
I have advanced search button outside the jqGrid. I am using:
var pSearch = //How do I get this object as mine is constructed in c# code. How do I get it from jqGrid's property collection or options??
$("#list").jqGrid("searchGrid",pSearch);
The typical usage of searchGrid would be
$("#list").jqGrid("searchGrid");
or
$("#list").jqGrid("searchGrid", {multipleSearch: true});
because all really important options on the Advanced Searching dialog are inside of colModel.
I personally prefer the first form and set just common settings by $.jgrid.search for the searching in some JavaScript file which I include on every page of the project. For example
$.extend($.jgrid.search, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: true,
overlay: 0
});
I am using cookies to load a users previous sorting and paging options. I would like to take those saved values, and set them as the parameters the server receives.
The paramaters I wish to change are as follows, (rows are replaced by max via prmNames)
/&max=20&page=1&sidx=&sord=asc
I have tried using:
$.extend($.jgrid.defaults, {
sidx:"fName",
sord:"desc",
page:2,
rows:10});
and variations of:
beforeRequest:function(){
$('#grid').jqGrid('setGridParam', {
sidx: "fName",
sord: "desc",
page: 2,
max: 10
});
}
It changes the value for page using $.extend($.jgrid.defaults... , but I cannot get the other parameters to change.
You need just use setGridParam to set parameters of jqGrid which have another names as sidx, sord, page and rows.
sidx -> sortname
sord -> sortorder
page -> page
rows -> rowNum
So the best would be to create jqGrid directly with the above parameters initialized from the cookie.
If you would have problem with creation the grid directly with the parameters which you need you can first create the grid with datatype: 'local' which will prevent the loading the grid. Then you change the parameters which you need and additionally set datatype to the value which you need ('json' or 'xml'). At the end you reload the grid. So the code should be like the following
$('#list').jqGrid('setGridParam', {
datatype: 'json',
sortname: "fName",
sortorder: "desc",
page: 2,
rowNum: 10
}).trigger('reloadGrid');
If you would have problem with creation the grid directly with the parameters which you need. additionally create the grid with datatype: 'local' it will prevent the loading the grid
Is there a way to toggle the multiselect option of a grid?
Changing the multiselect parameter of the grid and calling for a reload has the side-effect of leaving the header behind when disabling or not creating the header column if multiselect was not TRUE upon the grid creation.
The closest I have come is setting multiselect to TRUE upon grid creation and using showCol and hideCol to toggle: $('#grid').showCol("cb").trigger('reloadGrid');
This has a side effect of changing the grid width when toggled. It appears the cb column width is reserved when it is not hidden.
Basically I'm attempting to create a grid with an "edit/cancel" button to toggle the multiselect -- very similar to how the iPhone/iPad handles deleting multiple mail or text messages.
Thank you in advance.
I full agree with Justin that jqGrid don't support toggling of multiselect parameter dynamically. So +1 to his answer in any way. I agree, that the simplest and the only supported way to toggle multiselect parameter will be connected with re-initialize (re-creating) the grid.
So if you need to change the value of multiselect parameter of jqGrid you need first change multiselect parameter with respect of respect setGridParam and then re-creating the grid with respect of GridUnload method for example. See the demo from the answer.
Nevertheless I find your question very interesting (+1 for you too). It's a little sport task at least to try to implement the behavior.
Some remarks for the understanding the complexity of the problem. During filling of the body of the grid jqGrid code calculate positions of the cells based on the value of multiselect parameter (see setting of gi value here and usage it later, here for example). So if you will hide the column 'cb', which hold the checkboxes, the cell position will be calculated wrong. The grid will be filled correctly only if either the column 'cb' not exists at all or if you have multiselect: true. So you have to set multiselect: true before paging or sorting of the grid if the column 'cb' exist in the grid. Even for hidden column 'cb' you have to set multiselect to true. On the other side you have to set multiselect to the value which corresponds the real behavior which you need directly after filling of the grid (for example in the loadComplete).
I hope I express me clear inspite of my bad English. To be sure that all understand me correctly I repeat the same one more time. If you want try to toggle multiselect dynamically you have to do the following steps:
create grid in any way with multiselect: true to have 'cb' column
set multiselect: false and hide 'cb' column in the loadComplete if you want to have single select behavior
set multiselect: true always before refreshing the grid: before paging, sorting, filtering, reloading and so on.
I created the demo which seems to work. It has the button which can be used to toggle multiselect parameter:
In the demo I used the trick with subclassing (overwriting of the original event handle) of reloadGrid event which I described the old answer.
The most important parts of the code from the demo you will find below:
var events, originalReloadGrid, $grid = $("#list"), multiselect = false,
enableMultiselect = function (isEnable) {
$(this).jqGrid('setGridParam', {multiselect: (isEnable ? true : false)});
};
$grid.jqGrid({
// ... some parameters
multiselect: true,
onPaging: function () {
enableMultiselect.call(this, true);
},
onSortCol: function () {
enableMultiselect.call(this, true);
},
loadComplete: function () {
if (!multiselect) {
$(this).jqGrid('hideCol', 'cb');
} else {
$(this).jqGrid('showCol', 'cb');
}
enableMultiselect.call(this, multiselect);
}
});
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false}, {}, {}, {},
{multipleSearch: true, multipleGroup: true, closeOnEscape: true, showQuery: true, closeAfterSearch: true});
events = $grid.data("events"); // read all events bound to
// Verify that one reloadGrid event hanler is set. It should be set
if (events && events.reloadGrid && events.reloadGrid.length === 1) {
originalReloadGrid = events.reloadGrid[0].handler; // save old
$grid.unbind('reloadGrid');
$grid.bind('reloadGrid', function (e, opts) {
enableMultiselect.call(this, true);
originalReloadGrid.call(this, e, opts);
});
}
$("#multi").button().click(function () {
var $this = $(this);
multiselect = $this.is(":checked");
$this.button("option", "label", multiselect ?
"To use single select click here" :
"To use multiselect click here");
enableMultiselect.call($grid[0], true);
$grid.trigger("reloadGrid");
});
UPDATED: In case of usage jQuery in version 1.8 or higher one have to change the line events = $grid.data("events"); to events = $._data($grid[0], "events");. One can find the modified demo here.
I really like what you are trying to do here, and think it would be a great enhancement for jqGrid, but unfortunately this is not officially supported. In the jqGrid documentation under Documentation | Options | multiselect you can see the Can be changed? column for multiselect reads:
No. see HOWTO
It would be nice if there was a link or more information about that HOWTO. Anyway, this is probably why you are running into all of the weird behavior. You may be able to work around it if you try hard enough - if so, please consider posting your solution here.
Alternatively, perhaps you could re-initialize the grid in place and change it from/to a multi-select grid? Not an ideal solution because the user will have to wait longer for the grid to be set up, but this is probably the quickest solution.
A simpler answer:
<input type="button" value="Multiselect" onclick="toggle_multiselect()">
<script>
function toggle_multiselect()
{
if ($('#list1 .cbox:visible').length > 0)
{
$('#list1').jqGrid('hideCol', 'cb');
jQuery('.jqgrow').click(function(){ jQuery('#list1').jqGrid('resetSelection'); this.checked = true; });
}
else
{
$('#list1').jqGrid('showCol', 'cb');
jQuery('.jqgrow').unbind('click');
}
}
</script>
Where list1 is from <table id="list1"></table>.
I'm using jqGrid 4.2 with the filterToolbar, which works great. I'd like to add some type of custom search to query (server-side) fields that are not part of the colModel.
Prior to 4.0 I would have used filterGrid along the lines of this:
$('#keyword').jqGrid('filterGrid', '#ticket-grid',
{
gridModel: false,
filterModel: [
{ label: 'Keyword', name: 'keyword', stype: 'text'},
{ label: 'Inclued Closed?',name : 'includeClosed', stype: 'checkbox'}
]
});
I understand that this is no longer supported, and an stype: 'checkbox' doesn't work anyway.
How do I do this with the new search module/mechanism?
If I understand you correct you have already on the page, for example above the grid, some controls (text input, selects, chechboxes) which allow the user to define additional criteria of the results which the user want see in the grid. In the case you can use postData with methods (functions) in the way described in the old answer.
If any kind of grid refreshing: request to filter the data from the searching toolbar, changing of the page or the page size, changing of sorting and so on will always follow to the Ajax request to the server. In the case the properties from postData option of jqGrid will be added like other standard parameters (sidx, sord, page, ...). If one from the properties of the postData is defined as function (if a method of postData) then the function will be called to construct the parameter which will be sent to the server. So the current information from you custom searching controls (text input, selects, chechboxes) will be send to the server. In the way you need only use the parameters on the backend to filter the results.
So you have to define fields yourself. For example the text input with id="keyword-input" and checkbos with id="includeClosed" and then use postData in about the following form:
$('#keyword').jqGrid(
// ... other jqGrid options
postData: {
keyword: function () { return $('#keyword-input').val(); },
includeClosed: function () { return $('#includeClosed')is(':checked'); },
}
});
I have been stuck on this problem for past 2 days. Did lot of googling but was not able to find the exact answer.
Following is the JQGrid definition
$("#tblresults").jqGrid({
datastr: data,
datatype: 'jsonstring',
height: 230,
colNames: colNames,
colModel: colModel,
rowNum: -1,
viewrecords: true,
loadComplete: function() {
ChangeSize('#tblresults', 70);
}
});
And this is the filter definition
$("#tblresults").filterToolbar({ searchOnEnter: true, stringResult: true, defaultSearch: "cn", groupOp: "AND" });
I get the data from a simple getJSON call. But when I try to use the filter nothing works.
I debugged a the code and found out that jqgrid internally calls the reloadgrid, which makes the data to disappear.
Can anyone tell me how can we do filtering in jqgrid completely on client.
I am using v3.8 and I learnt that jqgrid v3.7 had this client side filtering logic in place.
Thanks in Advance
Do you have the data First of all you should not use -1 as the value of rowNum. Instead of that use any reliable value like rowNum:1000. More better would be to use local data paging. In the case you should just set for example rowNum:10, rowList:[5,10,20,100].
If you get the input parameters colNames, colModel and data parameters of jqGrid from the server per ajax call you should additionally consider to use data parameter instead of datastr. In the case the datatype should be changed from 'jsonstring' to 'local'.
Some other common parameters like gridview:true and height:'100%' can be also usefull for you. The first one (gridview:true) just improve the performance without any disadvantages and the second (height:'100%') will follow to choosing of the optimal grid height without the vertical scroll bar. It can be good combined with the local data paging (parameters like rowNum:10, rowList:[5,10,20,100]).
add these parameters and your toolbar search should work. i have faced similar problem too when started with jqgrid.
search:true,
loadonce:true,