Is it possible to set a default search operand for a single column? The column is called "Severity" and has default value of 4. I would like to display "le" and by default filter values that are less or equal to this value.
Here is a snippet from the code:
jQuery(document).ready(function() {
jQuery('#grid').jqGrid({
url:'logging.ajax',
datatype: 'json',
colModel:[
{name:'Code', index:'Code', width:100, sorttype:'int', searchoptions:{sopt:['eq','cn','ne','nc','lt','le','gt','ge','bw','bn','in','ni','ew','en']}},
{name:'Severity', index:'Severity', width:100, sorttype:'int', searchoptions:{defaultValue: 4, sopt:['eq','cn','ne','nc','lt','le','gt','ge','bw','bn','in','ni','ew','en']}},
{name:'Log', index:'Log', align: 'left', width:200, searchoptions:{sopt:['eq','cn','ne','nc','bw','bn','in','ni','ew','en']}},
{name:'ID', index:'ID', width: 100, sorttype:'int', key: true, searchoptions:{sopt:['eq','cn','ne','nc','lt','le','gt','ge','bw','bn','in','ni','ew','en']}}
],
rowNum: 500,
rowList: [100,200,500,1000],
styleUI : 'Bootstrap',
gridview: true,
pager: '#gridpagernav',
sortname: 'ID',
loadonce: false,
viewrecords: true,
cellEdit: false,
sortorder: 'desc',
multiSort: true,
ExpandColClick: true,
forceFit: true,
editurl:'logging.ajax',
autowidth: true,
shrinkToFit: false,
height: Math.max(200, $(window).height()-400)
}).navGrid('#gridpagernav',
{
edit: false,
add: false,
del: false,
refresh: true,
search: true,
recreateForm: true
}, //options
{
}, // edit options
{
}, // add options
{
}, // del options
{
closeAfterSearch: true,
multipleSearch: true,
multipleGroup: true,
showQuery: false,
} // search options
).filterToolbar({stringResult: true, searchOnEnter: false, defaultSearch: 'cn', ignoreCase: true, searchOperators: true});
I commonly use the following trick to display different operand in the search toolbar. It works fine for "cn".
$('.soptclass[colname=\"Severity\"]').attr('soper', 'le')
$('.soptclass[colname=\"Severity\"]').html('<=')
$('.soptclass[colname=\"Log\"]').attr('soper', 'cn')
$('.soptclass[colname=\"Log\"]').html('~')
When I add the following line of code, it automatically uses the right filtering on load and when I play around with other columns, it always uses the correct filter.
postData: { filters:JSON.stringify({'rules': [{'field':'Severity', 'op':'le', 'data':'4'}]}) },
However, when I press refresh button, filtering is reset to "eq".
What I would like to achieve is that either "le" on the column "Severity" is always enforced or to somehow fix the refresh button so it modifies filter's "op".
Cheers.
By default first option in sopt array is defaul. To do what you want set it like this
colModel:[
...
{name:'Severity', index:'Severity', width:100, sorttype:'int', searchoptions:{defaultValue: 4, sopt:['le','eq','cn','ne','nc','lt','gt','ge','bw','bn','in','ni','ew','en']}},
...
],
and you can delete the code which change the the 'le' to default one.
I resolved it by adding custom navigation button that replaces refresh button. Solution is:
jQuery(document).ready(function() {
jQuery('#grid').jqGrid({
url:'logging.ajax',
datatype: 'json',
postData: { filters:JSON.stringify({'rules': [{'field':'Severity', 'op':'le', 'data':'4'}]}) },
colModel:[
{name:'Code', index:'Code', width:100, sorttype:'int', searchoptions:{sopt:['eq','cn','ne','nc','lt','le','gt','ge','bw','bn','in','ni','ew','en']}},
{name:'Severity', index:'Severity', width:100, sorttype:'int', searchoptions:{defaultValue: 4, sopt:['eq','cn','ne','nc','lt','le','gt','ge','bw','bn','in','ni','ew','en']}},
{name:'Log', index:'Log', align: 'left', width:200, searchoptions:{sopt:['eq','cn','ne','nc','bw','bn','in','ni','ew','en']}},
{name:'ID', index:'ID', width: 100, sorttype:'int', key: true, searchoptions:{sopt:['eq','cn','ne','nc','lt','le','gt','ge','bw','bn','in','ni','ew','en']}}
],
rowNum: 500,
rowList: [100,200,500,1000],
styleUI : 'Bootstrap',
gridview: true,
pager: '#gridpagernav',
sortname: 'ID',
loadonce: false,
viewrecords: true,
cellEdit: false,
sortorder: 'desc',
multiSort: true,
ExpandColClick: true,
forceFit: true,
editurl:'logging.ajax',
autowidth: true,
shrinkToFit: false,
height: Math.max(200, $(window).height()-400)
}).navGrid('#gridpagernav',
{
edit: false,
add: false,
del: false,
refresh: false,
search: true,
recreateForm: true
}, //options
{
}, // edit options
{
}, // add options
{
}, // del options
{
closeAfterSearch: true,
multipleSearch: true,
multipleGroup: true,
showQuery: false,
} // search options
).filterToolbar({stringResult: true, searchOnEnter: false, defaultSearch: 'cn', ignoreCase: true, searchOperators: true});
I have added postData line and changed "refresh" from true to false, which removes the native refresh button. I have added following new code:
$('#grid').navButtonAdd('#gridpagernav',{
caption: '',
buttonicon: 'glyphicon-refresh',
onClickButton: function() {
var postData = $('#grid').jqGrid('getGridParam','postData');
if ((postData) && (postData.filters)) {
var filters = JSON.parse(postData.filters);
if (filters.rules) {
var rowsCount = filters.rules.length;
var i;
for (i = 0; i < rowsCount; i++) {
if (filters.rules[i].field) {
$('#gs_' + filters.rules[i].field).val('');
}
}
}
}
$('.soptclass[colname=\"Severity\"]').attr('soper', 'le')
$('.soptclass[colname=\"Severity\"]').html('<=')
$('#gs_Severity').val('4');
$('#grid').setGridParam({ postData: { filters:JSON.stringify({'rules': [{'field':'Severity', 'op':'le', 'data':'4'}]}) } });
$('#grid').trigger('reloadGrid');
},
});
This creates a new navigation button and places it as the last button. As I am using bootstrap UI, I have to use glyphicon icons. When user presses the button, it removes any filled out values in the top filtering/search toolbar and puts back Severity value 4 and operand. It sets the filtering back and triggers reloadGrid.
I am also still using this code, so that it changes visually operand at the grid load:
$('.soptclass[colname=\"Severity\"]').attr('soper', 'le')
$('.soptclass[colname=\"Severity\"]').html('<=')
Using latest version of free jqgrid.
I am using the below code for my jqgrid.
I have some issues and question:
1) When I go to next page and previous page not sure what happens but my grid items keep moving up and down.
2) When I add/edit an item for form field I want the grid to refresh and get updated from the server but this does not happens and again my newly added data is lost in the grid as mentioned in my point1. I tried to add navOptions: { reloadGridOptions: { fromServer: true } } but still nothing.
3) When the user clicks on edit button on my pager it opens the user form field. I want the submit button to show edit instead of "Add" which it shows currently.
Here is my code below:
<script type="text/javascript">
$(function () {
"use strict";
var $grid = $("#list");
$grid.jqGrid({
url: '#Url.Action("GetData", "Home")',
datatype: "json",
mtype: 'Get',
colNames: ['Id', 'Name', 'Sex', 'Address'],
loadonce: true,
height: '100%',
autowidth: true,
emptyrecords: "No Users found.",
colModel: [
{ name: 'empid', index: 'empid', editable: true, editrules: { required: true}},
{ name: 'fname', index: 'fname', editable: true, editrules: { required: true}}, //currently these are texbox, but I want this to be label which gets filled based on the empid
{ name: 'lname', index: 'lname', editable: true, editrules: { required: true}},
{ name: 'address', index: 'address', editable: true, editrules: { required: true}}
],
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true, resetWidthOrg: true },
iconSet: "fontAwesome",
guiStyle: "bootstrap",
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
rownumbers: true,
sortname: "empid",
sortorder: "desc",
pagerRightWidth: 150,
inlineEditing: {
keys: true
},
searching: {
loadFilterDefaults: false,
closeOnEscape: true,
searchOperators: true,
searchOnEnter: true,
caption: "Search",
Find: "Search"
},
editurl:'#Url.Action("GetDetails", "Home")',
formEditing: {
reloadGridOptions: { fromServer: true },
reloadAfterSubmit: true,
width: 460,
closeOnEscape: true,
closeAfterEdit: true,
closeAfterAdd: true,
closeAfterDelete: true,
savekey: [true, 13],
addCaption: "Add",
editCaption: "Edit",
bSubmit: "Add"
},
formDeleting: {
width: 320,
caption: 'Delete'
},
navOptions: { reloadGridOptions: { fromServer: true } }
}).jqGrid("navGrid")
.editGridRow("new", properties);
});
</script>
The first two items above I was able to resolve using below code:
navOptions: { reloadGridOptions: { fromServer: true } }
But the 3rd item I am still not able to resolve where I am not able to change the text of the Add button to change it to edit when the edit toolbar button is clicked
Different texts for edit and add form for Save button are specified using bSubmit.
If edit form is opened and closed, add form is opened and closed and edit form is opened again, edit form button caption becomes "Add row".
How to fix this so that edit form save button text is "Save edits" always ?
I tried
bSubmit: function() { return "Save edits" },
put this prints function() ... in button.
grid.navGrid("#grid_toppager", { refreshstate: 'current' },
{ url: 'Edit',
editData: { _dokdata: FormData },
savekey: [true, 13],
closeOnEscape: true,
bSubmit: "Save edits",
reloadAfterSubmit: false
},
{ url: 'Add',
bSubmit: "Add row",
editData: { _dokdata: FormData },
savekey: [true, 13],
recreateForm: true,
closeOnEscape: true,
clearAfterAdd: true,
addedrow: 'last',
reloadAfterSubmit: false,
afterSubmit: function (response) { return [true, '', response.responseText] }
}
} );
You should use just use recreateForm: true property:
myGrid.jqGrid('navGrid', '#pager',
{ add: true, edit: true, del: false, search: false },
{ bSubmit: "Submit Edit", recreateForm: true }, // Edit options
{ bSubmit: "Submit Add", recreateForm: true } // Add options
);
See the demo.
If you would search for recreateForm you will find how many time I wrote recommendation of use it. I posted even the suggestion to make the recreateForm:true and recreateFilter:true as default settings, but received no response. I can only repeat use the settings as your default settings and you will have less problems. If you use custom editing controls you have to use the setting in the most implementations of the custom editing (see here).
I have to apply some common parameters of the Form Editing Dialogs defined in the pager.
Current pager is
.navGrid('#pager10', { edit: true, add: true, del: true, search: true, view: true },
// Edit
{},
// Add
{},
// Delete
{},
//Search
{},
//View
{}
);
and I want to use below paramters on all the action like Add, Edit, Delete, View.
How I do this?
{mtype: "POST", closeOnEscape:true, drag: true, resize: true, jqModal: false,
recreateForm: false, closeAfterEdit: true, closeAfterAdd: true,
savekey: [true, 13], viewPagerButtons: false }
Together with jQuery.jgrid.defaults defines standard options of jqGrid there are jQuery.jgrid.edit, jQuery.jgrid.view, jQuery.jgrid.del, jQuery.jgrid.nav which you can use. The settings of jQuery.jgrid.edit are common for Add and Edit dialog.
For example,
jQuery.extend(jQuery.jgrid.edit, {
recreateForm: true,
jqModal: false,
closeAfterAdd: true,
closeAfterEdit: true,
closeOnEscape:true,
savekey: [true, 13]);
You can set in the same way some standard event handler which you plan use in all your grids.
You wrote in your question that you want set mtype: "POST", drag: true, resize: true and some other values which are already default (see here). I recommend you to verify which values are already default. Moreover I strictly recommend you to use recreateForm: true and not default recreateForm: false if you use any customizations or event binding of the dialogs.
I am trying to replicate the action buttons that are present in the bottom toolbar on the top toolbar.
But so far no luck, I have included the truncated code below.
Paging is not an option in this case so the user requires both top and bottom toolbars.
jQuery("#GridName").jqGrid({
url: '<%= ResolveUrl("~") %>SomeController/SomeMethod ....',
datatype: 'json',
colNames: ['Column1', 'Column2', 'Details', 'Date'],
colModel: [
//......
],
pager: '#GridNamePager',
viewrecords: true,
emptyrecords: "Nothing to display",
shrinkToFit: true,
hidegrid: false,
scroll: false,
width: 976,
height: 'auto',
loadui: 'enable',
pgtext: '',
pgbuttons: false,
pginput: false,
multiselect: true,
multiboxonly: true,
toolbar:[true,"top"],
ondblClickRow: function(id) {
var publishedUrl =
$("#GridName").find("tbody")[0].rows[id-1].cells[5].innerHTML;
},
caption: "Grid Results"
}).navGrid('#GridNamePager', { add: false, edit: false, del: false,
search: false, cloneToTop:true })
.navButtonAdd('#GridNamePager', { caption: "Save", onClickButton:
function() { Save(); return false; }, position: "last" })
.navButtonAdd('#GridNamePager', { caption: "Back", onClickButton:
function() { redirectBack(); return false; }, position: "last" })
where
<table id="GridName" class="scroll"></table>
<div id="GridnamePager" class="scroll" style="text-align:center;"></div>
Probably the answer Adding button to jqGrid top toolbar would helps you? If not try to explain more exactly which elements of navigation bar or other jqGrid elements you would be move to another place.