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('<=')
I am using free version (latest) of jqgrid with MVC c#.
I have form fields setup. When the user clicks add in the footer button (add) it shows a modal popup with all the form fields.
I want my first textbox in the form field to autocomplete, ie when they start typing their empployee number in the textbox, I should query my mvc controller and fetch the data and then prefill if there is a match. Once that prefills I also want to update 2 more label on the form, firstname & lastname. Also the button should be disabled until the correct id is fetched in the employee textbox.
Not sure how should I go about this. I can share my sample grid that I have used.
Thanks
<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,
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",
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
rownumbers: true,
sortname: "uid",
sortorder: "desc",
pagerRightWidth: 150,
inlineEditing: {
keys: true
},
formEditing: {
reloadGridOptions: { fromServer: true },
reloadAfterSubmit: true,
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
closeAfterAdd: true,
closeAfterDelete: true,
savekey: [true, 13]
}
caption: "MyData"
}).jqGrid("navGrid")
.editGridRow("new", properties);
});
Updated:
If there is also option to use onkeyup, mouseover etc on the textbox so that I can validate whats entered in the textbox and then also update other textbox based on this value
I have done this by using keyup event instead of using autocomplete.
Relevant code as below:
colModel: [
{
name: 'empid', index: 'empid', editable: true, , editrules: { required: true },
editoptions:
{
dataEvents: [
{
type: 'keyup',
fn: function (e) {
$.ajax({
url: //call to my method in my mvc controller,
data: "empid=" + $(this).val(),
type: "GET",
success: function (data) {
//validate and populate other fields here
}
else {
}
},
error: function (passParams) {
// code here
}
});
}
}
]
}
]
I'd like to change the layout of the pager, so that the VCR buttons are all grouped together, followed by the Page number input field, then the number of rows drop-down. How would I accomplish this?
Here is the code I'm currently using to display the jqgrid. Its the standard JavaScript code:
$(function(){
$("#" + listName).jqGrid({
url: url,
datatype: 'json',
mtype: 'GET',
colNames: columnNames,
colModel: columnModel,
pager: pagerName,
rowNum: displayRows,
rowList: rowList,
sortname: initSortCol,
sortorder: initSortOrder,
viewrecords: true,
multiselect: multiSelect,
gridview: true,
caption: caption,
height: height,
jsonReader: {
root: 'data',
page: 'currentPage',
total: 'totalPages',
records: 'totalRows',
repeatitems: false,
id: dataModelRowId
}
});
jQuery("#" + listName).jqGrid('navGrid','#' + pagerName,{edit:false,add:false,del:false,search:false});
Example of jqgrid with page number, number of records per page.
Code:
$(document).ready(function(){
//jqGrid
$("#librariesList").jqGrid({
url:'<%=request.getContextPath()%>/Admin/getAllLibraries',
datatype: "json",
colNames:['Id','Edit','Type','Created Date', 'Modified Date', 'Url', 'Use Url'],
colModel:[
{name:'libraryId', index:'libraryId',search:false, width:30,sortable: false,hidden:true},
{name:'libraryId', index:'libraryId',search:false, width:30,sortable: false, formatter: editLink},
{name:'type',index:'type',width:80},
{name:'createdDate',index:'createdDate',width:150},
{name:'modifiedDate',index:'modifiedDate',width:150},
{name:'url',index:'url',width:150},
{name:'useUrl',index:'useUrl',width:50},
],
rowNum:20,
rowList:[10,20,30,40,50],
rownumbers: true,
pager: '#pagerDiv',
sortname: 'createdDate',
viewrecords: true,
sortorder: "asc",
autowidth:'true',
});
$('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
$('.ui-jqgrid-bdiv').css('height', window.innerHeight * .55);
$('#load_librariesList').width("130");
$("#librariesList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{},{closeAfterSearch:true});
$(".inline").colorbox({inline:true, width:"20%"});
});
function editLink(cellValue, options, rowdata, action)
{
return "<a href='<%=request.getContextPath()%>/Admin/editLibrary/"+ rowdata.libraryId + "' class='ui-icon ui-icon-pencil' ></a>";
}
jggrid is displayed like below:
I have seen the same question being asked but none of them contained an answer that I could use. I am using jqgrid 4.4. The main grid loads data fine, in the subgrid I can see the response from my java controller but not sure how to get it to show up.
function(){
jQuery("#subGrid").jqGrid({
url: CONTEXT_ROOT+"/cartonPremium",
id:'gridtable',
datatype: "json",
height: 190,
jsonReader : {
root: 'gridModel',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
id: '0'
},
colNames:['idPremium','Name','Week', 'Departure Region' ],
colModel:[
{name:'idPremium',hidden:false, width:100},
{name:'name',index:'name', width:300},
{name:'sequence',index:'sequence', width:90},
{name:'departureRegion',index:'departureRegion',width:100}
],
hidegrid: false,
rowNum:20,
rowList:[20,40,80],
pager: '#psubGrid',
sortname: 'name',
viewrecords: true,
sortorder: "desc",
multiselect: false,
sortable: true,
autowidth: false,
pagerButtons:true,
navigator:true,
//loadonce: true,
altRows: true,
viewsortcols: [true,'vertical',true],
subGrid: true,
// define the icons in subgrid
subGridOptions: {
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e"//,
//expand all rows on load
//"expandOnLoad" : true
},
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
jQuery("#"+subgrid_table_id).jqGrid({
url:CONTEXT_ROOT+"/premiumCasePackOption?rowId="+row_id,
datatype: "json",
colNames:['idCasePackOptions','cypharecommended','distributorapproved', 'height', 'length','statuscode','weight','width'],
colNames:['idCasePackOptions'],
colModel: [
{name:'idCasePackOptions', width:170,hidden:false}
],
rowNum:8,
pager: pager_id,
sortname: 'idCasePackOptions',
sortorder: "asc",
sortable: true,
height: 400
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:false});
}
}
);
jQuery("#subGrid").jqGrid('navGrid','#psubGrid',{add:false,edit:false,del:false});
}
);
Here is response from server
{"total":1,"page":1,"gridModel":[{"idCasePackOptions":1},{"idCasePackOptions":2},{"idCasePackOptions":3},{"idCasePackOptions":4},{"idCasePackOptions":5},{"idCasePackOptions":6}],"records":6,"rows":8}
Help!! What am I missing?
I finally got it to working...yipeee!!! the magic that was missing from the subgrid
jsonReader: {
root: 'gridModel',
repeatitems: false
}
So the working version looks like this
$(document).ready(
function(){
jQuery("#subGrid").jqGrid({
url: CONTEXT_ROOT+"/cartonPremium",
id:'gridtable',
datatype: "json",
height: '100%' ,
mtype: 'POST',
jsonReader : {
root: 'gridModel',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
id: '0'
},
colNames:['idPremium','Name','Week' ],
colModel:[
{name:'idPremium',hidden:false, width:100},
{name:'name',index:'name', width:300},
{name:'sequence',index:'sequence', width:90}
],
hidegrid: false,
rowNum:20,
rowList:[20,40,80],
pager: '#psubGrid',
sortname: 'name',
viewrecords: true,
sortorder: "desc",
multiselect: false,
sortable: true,
autowidth: false,
pagerButtons:true,
navigator:true,
//loadonce: true,
altRows: true,
viewsortcols: [true,'vertical',true],
subGrid: true,
// define the icons in subgrid
subGridOptions: {
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e",
"reloadOnExpand" : true
},
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
jQuery("#"+subgrid_table_id).jqGrid({
url:CONTEXT_ROOT+"/premiumCasePackOption?rowId="+row_id,
datatype: "json",
mtype: 'POST',
colNames:['idCasePackOptions','cypharecommended','distributorapproved', 'height', 'length','statuscode','weight','width'],
colModel: [
{name:'idCasePackOptions', width:170,hidden:false},
{name:'cypharecommended',index:'cypharecommended', width:170},
{name:'distributorapproved',index:'distributorapproved', width:170},
{name:'height',index:'height', width:100},
{name:'length',index:'length', width:80, align:"right"},
{name:'statuscode',index:'statuscode', width:90, align:"right"},
{name:'weight',index:'weight', width:100,align:"right"},
{name:'width',index:'width', width:100}
],
rowNum:8,
pager: pager_id,
sortname: 'idCasePackOptions',
sortorder: "asc",
viewrecords: true,
sortable: true,
height: '100%' ,
autowidth: true,
jsonReader: {
root: 'gridModel',
repeatitems: false
}
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:false});
}
}
);
//jQuery("#subGrid").jqGrid('navGrid','#psubGrid',{add:false,edit:false,del:false});
}
);
Your data in the subgrid will not be displayed (as well) if one of your given functions do not exist. So if you make a typo empty lines will be displayed:
afterSave: ReloadSubGrid, onError: UpdateFailed, delOptions:...
...
function ReloadSbuGrid(rowid, response) {
...
}
Typo: ReloadSbuGrid should have been ReloadSubGrid
I am new to jqGrid and Stack Overflow as well..
Well, I have a problem regarding the jqGrid SearchBox. Why does it show the search box in disabled mode?
Here is my code.
jQuery(document).ready(function(){
var jsonData = '{"StartDate":"01/01/2009", "EndDate":"12/12/2010", "DateFormat":"dd/MM/yyyy", "BatchId":"21"}';
jQuery("#attendance-grid").jqGrid({
datatype: "json",
mtype: "POST",
url: "url/function",
postData: jsonData,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
search: true,
multipleSearch : true,
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; }
},
height: 'auto',
rowNum: 10,
rowList: [10,20,30],
colNames:['Date', 'Batch', 'Enroolment No.', 'FName', 'MName', 'LName', 'Branch'],
colModel:[
{name:'date',index:'date', width:90, sorttype:"date", datefmt: 'm/d/Y', formatter:"date"},
{name:'batch_name',index:'batch_name', width:150, sortable:true},
{name:'Stud_EnrollNo',index:'Stud_EnrollNo', width:100, sortable:true},
{name:'stud_fname',index:'stud_fname', width:80, sortable:true},
{name:'stud_mname',index:'stud_mname', width:80, sortable:true},
{name:'stud_lname',index:'stud_lname', width:80, sortable:true},
{name:'currbranch',index:'currbranch', width:50, sortable:false}
],
pager: "#pattendance-grid",
loadtext: 'Loading...',
sortname: 'stud_fname',
viewrecords: true,
gridview: true,
rownumbers: true,
sortorder: 'desc',
grouping:true,
groupingView : {
groupField : ['stud_fname'],
groupColumnShow : [true],
groupText : ['<b>{0} - {1} Item(s)</b>'],
groupCollapse : true,
groupOrder: ['desc']
},
caption: "Attendance Report"
}).navGrid('#pattendance-grid',
{ search:true,
view: true,
del: false,
add: false,
edit: false,
searchtext:"Search" },
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{closeOnEscape: true, multipleSearch: true,
closeAfterSearch: true }, // search options
{}
);
Probably your main problem is that you use postData parameter in the wrong way. If you use is as a string, then the postData overwrite all other typical jqGrid parameters. Try to change postData parameter as
postData: {
StartDate:"01/01/2009",
EndDate:"12/12/2010",
DateFormat:"dd/MM/yyyy",
BatchId:21
}
Moreover you should not use multipleSearch:true as jqGrid parameter: only inside of parameters of navGrid function it has any sense.
What you additionally could needed is
serializeRowData: function (data) {return JSON.stringify(data);}
where JSON.stringify is a part of json2.js from here