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
});
Related
Hi I am using jqGrid for showing the grid values dynamically but i need to hide edit add option showing only based on logged in user role but in navGrid I am not able to place the if and else condition please help me my code is:
.navGrid('#pagernav',
{
edit: true,
add: true,
del: false,
search: true,
refresh: true,
closeAfterSearch: true
},
In the above code edit and add options needs to display only based on logged in user example logged in user is admin this options need to display otherwise it has to disable
You have many options to implement your requirements:
1) The most easy implementation if you could set some JavaScript variable, like for example the global variable isReadOnly, based on logged in user role. Then your could could be just like
.navGrid('#pagernav',
{
edit: !isReadOnly,
add: !isReadOnly,
del: false,
search: true,
refresh: true,
closeAfterSearch: true
}
2) You can create the navigator bar with Add and Edit buttons and to hide there depend on some conditions, which you evaluate later dynamically. You need just execute the code like $('#add_list,').hide() or $('#add_list,#edit_list').hide(), where the list part of the id is the grid id. See the old answer for more details.
3) You can use the same ids of the Add and Edit buttons, like in the way 2, but remove the buttons instead of hiding there. You need just use jQuery.remove method instead of jQuery.hide.
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.
I can't find a way to set search options for a column? It seem they are set by default and there's no way I can change it.
We have this option in Jqgrid:
{ name: "outputid", index: "outputid", width: 30, searchoptions: { sopt: ['eq']} }
When doing this in MvcJqGrid:
.AddColumn(new Column("promoDate").SetAlign(MvcJqGrid.Enums.Align.Center).SetLabel("Fecha Ingreso").SetSearchType(Searchtype.Datepicker).SetSearchDateFormat("yy-mm-dd"))
I receive a 'bw' as rule op, not 'eq' as I would like to set.
Thanks!
I've updated MvcJqGrid (nuget package is also updated). As of now you can set a searchoption per column with 'SetSearchOption'. Your example would look something like this:
.AddColumn(new Column("promoDate")
.SetAlign(MvcJqGrid.Enums.Align.Center)
.SetLabel("Fecha Ingreso")
.SetSearchType(Searchtype.Datepicker)
.SetSearchDateFormat("yy-mm-dd")
.SetSearchOption(SearchOptions.Equal))
Let me know if this works for you.
First of all I should mention that I don't use MvcJqGrid myself. It's really important to set different sopt option for different columns especially if one uses toolbar searching. It seems that MvcJqGrid don't provide you enough possibilities to do this. Nevertheless it looks so that MvcJqGrid generate some JavaScript code for you. So if you can't generate exactly the code which you need then you can still change some properties of grid later. For example
$("#grid").jqGrid("setColProp", "outputid", { searchoptions: { sopt: ['eq']} });
change the properties of "outputid" column. It is important to make the changes before searching toolbar are created (before method filterToolbar) will be called. If you can't inject your JavaScript code before creating searching toolbar you can recreate it later with modified properties using destroyFilterToolbar method (see the answer and the pull request):
$("#grid").jqGrid("destroyFilterToolbar");
$("#grid").jqGrid("filterToolbar", { stringResult: true, defaultSearch: "cn" });
I am using jqgrid advanced search in my project. Everything works fine. Now I have to display a default search condition on click of search button. Please tell me how can I achieve this. I have tried the below code in beforeShowSearch
var postdata =
{
filters: '{"groupOp":"AND","rules":[' +
'{"field":"invdate","op":"gt","data":"2007-09-06"}]}'
};
grid.jqGrid('setGridParam', { search: true, postData: postdata });
It dint work.
If you need to reset searching filters on every opening of advanced searching dialog you can't use beforeShowSearch callback in the case because the postData.filters will be read by searching dialog before calling of beforeShowSearch. What you can do is adding of your custom Searching button with respect of navButtonAdd which looks exactly like the original search button and use search: false option of navGrid to have no standard button. Inside of onClickButton you can reset the filters property of postData before calling of searchGrid.
Alternatively you can reset the value of postData.filters inside of loadComplete callback and use recreateFilter: true option of advanced searching to force creating of new filter on every opening of searching dialog.
The demo demonstrate the last approach. It defines first the variable
var defFilter = '{"groupOp":"AND","rules":[{"field":"invdate","op":"gt","data":"2007-09-06"}]}';
and use loadComplete for resetting the filter
loadComplete: function () {
$(this).jqGrid("getGridParam", "postData").filters = defFilter;
}
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>.