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.
Related
I have kendo tree view with check boxes. When i do the button click the values are getting lost after refresh. I wanted to show back to the user after button click could you please help me on this.
$("#treeview1").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource:EquipmentTypes,
id: ["EquipmentTypeId"],
dataTextField:["EquipmentTypeName"],
expanded: false,
spriteCssClass: "rootfolder",
dataValueField: ["EquipmentTypeId"],
value:"#Model.UtilizationFilter.EquipmentTypeFilter"
});
I assume this is because the button in the question does a post of a form. If that is the case then I don't see any easy solutions.
You could either change the buttons so they fetch via ajax. Or add a change event to the tree and then save the values in hidden fields and set them manually after load.
.Events(e => e.Check("onCheck"))
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 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
});
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've added custom button on the footer of jqgrid for adding record. The code is as under:
$("#jqgUsers").navGrid('#jqgpUsers', { edit: false, add: false, del: false, search: false })
.navButtonAdd('#jqgpUsers', {
caption: "",
buttonicon: "ui-icon-plus",
onClickButton: function () {
alert("Adding Row");
},
position: "last"
});
How can I open jqGrid add form while click on that add button?
You should just call the editGridRow manually with "new" as the first parameter (see here the documentation)
$(this).jqGrid("editGridRow", "new");
or with any properties or events like for example
$(this).jqGrid("editGridRow", "new", {recreateForm: true, closeAfterAdd: true});
I'm adding an additional answer because I have a different scenario with a beforeShowForm event defined in my pager. In order to make sure the add row settings and events in my pager definition are used when the add row dialogue is opened with a custom button click I called
`$('#add_' + your_grid_name_here).click();`
Which will make sure your grid's pager settings are used. It's works the same as if the user pressed the '+' button in the pager.