Related
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
How to do edit on popup dialog in jqgrid.
Below is jqgrid stuff. I dont' need inline editing. I want to popup dialog.
To popup dialog, we already have dialog which can be popup.
To achieve this, I need to call - javascript function which can allow to popup dialog.
please guide me how I could call javascript function on click of edit icon ?
$('#CategoriesGrdList').jqGrid({
ajaxGridOptions: {
error: function () {
$('#CategoriesGrdList')[0].grid.hDiv.loading = false;
alert('An error has occurred.');
}
},
url: '#Url.Action("GetAllCategoriesList", "Categories")/' + 0,
gridview: true,
autoencode: true,
postData: { categoryId: 1 },
datatype: 'json',
jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
mtype: 'GET',
colNames: ['Id', 'Code', 'Description', 'IsActive', "actions"],
colModel: [
{ name: 'Id', index: 'Id', hidden: false, key: true },
{ name: 'Code', index: 'Code', width: 170},
{ name: 'Description', index: 'Description', width: 170},
{ name: 'IsActive', index: 'IsActive', width: 170 },
{
name: 'actions', index: 'actions', formatter: 'actions',
formatoptions: {
keys: true,
editbutton: true,
delOptions: { url: '#Url.Action("DeleteCategory", "Categories")' }
}
}
],
pager: $('#CategoriesGrdPager'),
sortname: 'Code',
rowNum: 3,
rowList: [3, 6, 9],
width: '500',
height: '100%',
viewrecords: true,
multiselect: false,
caption: "Categories",
loadComplete: function () {
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
beforeSelectRow: function (rowid, e) {
return false;
},
sortorder: 'desc'
}).navGrid('#CategoriesGrdPager', { edit: true, add: false, del: false, search: false, refresh: true });
Pleae guide me.
To Make your own Edit actions/buttons in JQGrid, you need to set the default Edit navGrid buttons/actions to false, then add custom buttons to the navigation grid.
Here is an example below - remember to remove the navGrid setup in jqgrid chained functions above:
$('#CategoriesGrdList').jqGrid('navGrid', '#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true})
.navButtonAdd('#CategoriesGrdPager', {
title: "Edit",
caption: "Edit",
buttonicon: "ui-icon-pencil", // JQuery UI Icon
onClickButton: function () { /*CALL YOUR FUNCTION HERE*/ },
position: "last" // Position of the button on Nav
})'
i am working on jqgrid. i want to add refresh button to jqgrid toolbar to refresh the grid.
here is my js code:
jQuery(document).ready(function () {
var grid = jQuery("#gridemp");
grid.jqGrid({
url: '/Admin/GetTimeInOut_ForAdmin',
datatype: 'json',
mtype: 'Post',
height: '100%',
multipleSearch: false,
rownumbers: true,
//formatCell: emptyText,
colNames: ['User', 'Date', 'TimeIn', 'TimeOut'],
colModel: [
{ name: 'User', index: 'User', align: "center", sorttype: 'text', resizable: true, editable: false },
{ name: 'Date', index: 'Date', align: "center", sorttype: 'text', resizable: true, editable: false, searchoptions: { dataInit: function (el) { $(el).datepicker({ dateFormat: 'mm/dd/yy' }).change(function () { $('#gridemp')[0].triggerToolbar(); }); } } },
{ name: 'TimeIn', index: 'TimeIn', align: "center", sorttype: 'text', resizable: true, editable: false },
{ name: 'TimeOut', index: 'TimeOut', align: "center", sort:false, resizable: true, editable: false }
],
//shrinkToFit: true,
// loadonce: false,
//ignoreCase: true,
width: '690',
pager: '#emppager',
caption: 'Employee Time IN/OUT',
rowNum: 10,
rowList: [10, 20, 50, 100],
viewrecords: true,
hidegrid: false,
}
);
grid.jqGrid('filterToolbar',{ stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
grid.jqGrid('navGrid', '#emppager',
{ resize: false, add: false, search: false, del: false, refresh: false, edit: false, alerttext: 'Please select one user' }
).jqGrid('navButtonAdd', '#pager');
});
actually i need 2 refresh buttons one for to clear the search bar text boxes without refreshing the jqgrid, and one for refreshing the whole grid. i will mark your answer if it works for me. thanks in advance. happy coding :), if you the question is not clear please comment i will explain.
First of all it seems your code contains typing error: you use pager: '#emppager' during creating grid, in navGrid but not in navButtonAdd.
To add "standard" reload button which reset filter toolbar and reload the grid you need just remove refresh: false option.
To add custom clear filter you need call navButtonAdd in the way like below
.jqGrid("navButtonAdd", "#emppager", {
caption: "", // no text near the button
title: "Clear filters in toolbar without reloading of data",
buttonicon: "ui-icon-close", // an example of icon
onClickButton: function () {
this.clearToolbar(false); // don't reload grid
}
});
You can change icon used by Refresh button by usage refreshicon option (at the same place where you specify del, refresh, alerttext etc). Default value is refreshicon: "ui-icon-refresh". Moreover you can consider to use refreshstate: "current" (default is refreshstate: "firstpage").
I have implemented a jqgrid using the code below. The grid works fine, but when I drag and change the order of columns (reorder), the textboxes below the last column(s) disappear on each reorder.
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '#Url.Content("/Contacts/DynamicGridData/")',
datatype: 'json',
mtype: 'GET',
colNames: ['Last Name', 'First Name', 'Country', 'Category'],
colModel: [
{ name: 'LastName', index: 'LastName', align: 'left' },
{ name: 'FirstName', index: 'FirstName', align: 'left' },
{ name: 'CountryId', index: 'CountryId', align: 'left' },
{ name: 'CategoryId', index: 'CategoryId', align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'LastName',
sortorder: "asc",
viewrecords: true,
sortable: true,
loadonce: true,
ignoreCase: true,
gridview: true,
autowidth: true,
rownumbers: true,
imgpath: '#Url.Content("~/Content/themes/jqgrid/smoothness/images")'
});
jQuery("#list").jqGrid('navGrid', '#pager', { add: false, edit: false, del: false }, {}, {}, {}, { multipleSearch: true });
jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });
jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "", title: "Toggle Search Bar", buttonicon: 'ui-icon-pin-s', onClickButton: function () { $("#list")[0].toggleToolbar() } });
});
</script>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
How can this be solved?
I can't reproduce your problem. See here my test. Which version of jQuery UI and jQuery you use?
Small remarks: The parameter imgpath is deprecated since many jqGrid releases and you should remove it. In the same way the class="scroll" will also not used. So you can reduce the HTML to
<table id="list"></table>
<div id="pager"></div>