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('<=')
Below is my code, and I need to close the add/edit dialog after a submit. It's updating the server and reloading the grid in both the cases, but it is not closing the dialog:
jQuery("#toolbar1").jqGrid({
url:'category/getcategorylist',
datatype: "xml",
colNames:["Name","Description","Id"],
colModel:[
{name:"cname",index:"cname",editable:true, width:250, align:"center",xmlmap:"categoryName"},
{name:"cdescription",index:"cdescription", editable:true,width:300, align:"center",xmlmap:"description"},
{name:"id",index:"id", editable:true,width:210, align:"center",xmlmap:"categoryId",key: true,hidden: true},
],
rowNum:100,
viewrecords: true,
toppager:true,
height:250,
width:800,
modal:true,
sortorder: "asc",
xmlReader: {
root : "CategoryList",
row: "categoryList",
repeatitems: false
},
});
$("#toolbar1").jqGrid("navGrid", "#toolbar1_toppager", {
reloadAfterSubmit:true, view: false, search:false ,addtext: 'Add',
edittext: 'Edit',
deltext: 'Delete',
refreshtext: 'Reload'
},
{url: "category/updatecategory"}, {url: "category/createcategory"}, {url:"category/deletecategory"});
There are some properties for closing the dialog that needs to be set on your edit/add declarations, they normally default to false.
For Adding:
closeAfterAdd - when add mode, close the dialog after add record. (default: false)
For Editing:
closeAfterEdit - when in edit mode, close the dialog after editing. (default: false)
So in your example you would need:
{url: "category/updatecategory", closeAfterEdit: true},
{url: "category/createcategory", closeAfterAdd: true}
Or:
$("#toolbar1").jqGrid("navGrid", "#toolbar1_toppager", {
reloadAfterSubmit:true, view: false, search:false ,addtext: 'Add',
edittext: 'Edit',
deltext: 'Delete',
refreshtext: 'Reload',
closeAfterAdd: true,
closeAfterEdit: true
},
These settings are available on the wiki
Following code snippet will solve your purpose :
$('#toolbar1').jqGrid('navGrid', '#toolbar1_toppager',
{edit:true,add:true,del:true,search:false}, // options
{closeAfterEdit:true}, // edit options
{closeAfterAdd:true}, // add options
{}, //del options
{}, // search options
);
in jqgrid for inline editing when we click the save icon, ** internally it calls the saveRow method, but i want to call my custom method where i will implement my save logic as well calling to controller method.**
i used below code for grid.
var grid = jQuery("#list5").jqGrid({
url: '/home1/GetUserData',
datatype: "json",
mtype: "POST",
colNames: ['Code', 'LoginID', 'Emailid', 'CreateDate', 'PostalCode', 'Mobile'],
colModel: [
{name: 'Code', index: 'Code', width: '16%', editable: true, sortable: true },
{ name: 'LoginID', index: 'LoginID', width: '16%', editable: true, sortable: true },
{ name: 'Emailid', index: 'Emailid', width: '16%', editable: true,
sortable: true },
],
rowNum: 10,
height: '100%',
scrollOffset: 0,
rowList: 10,
shrinkToFit: true,
pager: $("#pager2"),
editurl: "/home1/EditUserData",
caption: "Simple data manipulation"
});
jQuery("#list5").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: true, search: false, refresh: false }, {}, {}, { url: '/home1/DeleteUserData' });
jQuery('#list5').jqGrid('inlineNav', '#pager2', { edit: true, add: true},
});
});
so please anyone let me know how to implement it.
I don't really understand your requirements. saveRow has a lot of customization possibilities. You can rename all parameters which will be sent to the server using prmNames option of jqGrid. Using extraparam parameter of saveRow you can specify additional information which can be sent to the server. The callback serializeRowData can be used to implement your custom serialization. For example you can convert the data to JSON. Using aftersavefunc you can make some custom actions after the data will be successfully saved on the server. So I recommend you use the features instead of implementing your custom saveRow method.
UPDATED: If you want to have navigator icon which uses your custom saveRow you should don't add "Save" button by inlineNav. You can use save: false option of inlineNav. Then you can just use navButtonAdd and add your custom icon which look exactly like original "Save" button and make call of your "custom saveRow" in the onClickButton callback.
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).