I am trying to display a progress bar when user tries to filter data in jqgrid. But, the beforeSearch and afterSearch functions are not triggered.
I tried to follow the documentation: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching but, not sure what I am missing...
Here is the fiddler: http://jsfiddle.net/14f3Lpnk/1/
<table id="list"></table>
<div id="pager"></div>
var mydata = [
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"blah",note:"stuff",tax:"10.00",total:"210.00"}
];
jQuery("#list").jqGrid({
data: mydata,
datatype: "local",
height: 150,
rowNum: 10,
ignoreCase: true,
rowList: [10,20,30],
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager: "#pager",
viewrecords: true,
autowidth: true,
height: 'auto',
caption: "Test Grid",
beforeSearch: function () {
alert('Filter Started');
},
afterSearch: function () {
alert('Filter Complete');
}
}).jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "cn" });
Any help is appreciated.
beforeSearch and afterSearch are callback functions of filterToolbar method and not the grid itself. So you should use there in the following way
.jqGrid('filterToolbar', {
stringResult: true,
searchOnEnter: true,
defaultSearch: "cn",
beforeSearch: function () {
alert('Filter Started');
},
afterSearch: function () {
alert('Filter Complete');
}
});
See the modified demo http://jsfiddle.net/OlegKi/14f3Lpnk/2/
Related
I am populating jqgrid with data on page load and trying to set the first row always selected in but, for some reason it is not working.
Fiddle: https://jsfiddle.net/99x50s2s/116/
var customGrid = jQuery("#sg1");
customGrid.jqGrid({
datatype: "local",
gridview: true,
loadonce: true,
shrinkToFit: false,
autoencode: true,
height: 'auto',
viewrecords: true,
sortorder: "desc",
scrollrows: true,
loadui: 'disable',
idPrefix: "cg_",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:80},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
caption: "Test Grid"
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test 1234567890123456789",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
];
customGrid[0].addJSONData(mydata);
//set the first row always selected on initial load
customGrid.jqGrid('setSelection', 1);
Expectation:
First row should be selected.
Am I missing anything? Any suggestion is appreciated.
Please remove following setting:
idPrefix: "cg_",
You can try my version. Please make sure you have jquery-ui library loaded properly. When the idPrefix is set then it can't set the class called ui-state-highlight to the row using just ID.
var jgrid = $("#jqGrid").jqGrid({
datatype: "json",
gridview: true,
loadonce: true,
shrinkToFit: false,
autoencode: true,
viewrecords: true,
sortorder: "desc",
scrollrows: true,
loadui: 'disable',
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:80},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
width: 1280,
height: 'auto',
rowNum: 150,
caption: "Test Grid"
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test 1234567890123456789",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
];
jgrid[0].addJSONData(mydata);
jgrid.jqGrid('setSelection', 1);
As I have set the idPrefix in my jqGrid. I have updated the setSelection as
customGrid.jqGrid('setSelection', 'cg_1'); and the first row selection works now.
I've added a custom button on my nav bar:
function myFunc(){
$("#grid").jqGrid({
datatype: 'json',
url: 'arquivo.jsp',
jsonReader: {repeatitems: false, root: 'root'},
pager: '#paginado',
rowNum: 10,
autoencode: true,
rowList: [10,20,30],
emptyrecords: "Não há registros.",
recordtext: "Registros {0} - {1} de {2}",
loadtext: "Carregando...",
pgtext: "Página {0} de {1}",
height: 250,
width: 700,
colNames:['Código','Nome', 'Ativo', 'Data Inclusão','Login','Senha','Confirma Senha','Email','Grupos'],
colModel:[
{name:'codigo', width:80, sorttype:"int", editable: true, editrules: { edithidden: true }},
{name:'nome', width:120, editable: true, editrules:{required:true}},
{name:'ativo', width:80, gridview: true, editable: true, edittype:'select', editoptions:{value:{1:'Sim',2:'Não'}}, editrules:{required:true}},
{name:'dataInclusao', width:120, sorttype:"date", datefmt: 'd/M/Y', editable: true, editrules:{required:true, date:true}, editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker({ dateFormat: 'dd/mm/yy' }).val(); }, 200); }}},
{name:'login', width:80, sortable:true, editable: true, editrules:{required:true}},
{name:'senha', width:80, sortable:true, editable: true, hidden:true, edittype:'password', editrules:{edithidden:true, required:true, custom:true, custom_func:validaSenha}},
{name:'confirmaSenha', width:80, sortable:true, editable: true, hidden:true, edittype:'password', editrules:{edithidden:true, required:true}},
{name:'email', width:150, sortable:true, editable: true, editrules:{required:true, email:true}}
],
multiselect: true,
viewrecords: true,
editurl:"data?edit=true",
caption: "Usuários"}
);
$("#grid").jqGrid('navGrid','#paginado',{},
{edit:true,url:"teste?acao=edit",closeAfterEdit:true,reloadAfterSubmit:true,
beforeShowForm: function(form) {
$('#tr_codigo', form).hide();
},
onClickSubmit: function(params, postdata) {
validaSenha();
}
},
{add:true,url:"teste?acao=teste",closeAfterAdd:true,reloadAfterSubmit:true,
beforeShowForm: function(form) {
$('#tr_codigo', form).hide();
},
onClickSubmit: function(params, postdata) {
validaSenha();
}
},
{del:true,reloadAfterSubmit:true,
onclickSubmit: function(url, postdata){
url.url = 'teste?acao=del';
return {codigo: $('#grid').getCell(postdata, 'codigo')};
}
},
{search:true},
{refresh:true}
).navButtonAdd('#paginado',{
caption:"",
buttonicon:"ui-icon-suitcase",
onClickButton: function(){
var dados = $("#grid").jqGrid('getGridParam','selrow');
},
position:"last"
});
};
but everytime I click on the page that shows my grid, a new button is added as you can see in this image:
I don't know if my .jsp can be bringing on this problem but I definitely can't find where the problem is. Hope you guys can help me
Thanks in advance,
Lucas.
I solved the problem using $('#grid').jqGrid('GridUnload');
There is another thread which talks about same issue. In the newer version the syntax got changed. Might help someone. Please refer here
$.jgrid.gridUnload("#jqGridId");
My jqGrid displays correctly but it only shows one page of results. What ever I set rowNum to, that is all the results it will ever display even though right next to it it says it is displaying 10 out of 181 results. Is there some parameter I have to tweak to get the pager to allow me to actually page?
Thanks,
Kyle
jQuery("#corporateavgmap").jqGrid({
url:'monthly_corp_rates.jsp?'+dataString,
datatype: "json",
mtype:'POST',
colNames:['','USD', 'GBP', 'EUR','CAD','THB','HKD', 'MYR', 'JPY','AUD','IDR','KRW' ],
colModel:[
{name:'',index:'fromCurr', width:55, jsonmap:"fromCurr" },
{name:'USD', width:90, jsonmap:"toUSD"},
{name:'GBP', width:100, jsonmap:"toGBP"},
{name:'EUR', width:80, align:"right", jsonmap:"toEUR"},
{name:'CAD', width:80, align:"right", jsonmap:"toCAD"},
{name:'THB', width:80, align:"right", jsonmap:"toTHB"},
{name:'HKD', width:80, align:"right", jsonmap:"toHKD"},
{name:'MYR', width:80, align:"right", jsonmap:"toMYR"},
{name:'JPY', width:80, align:"right", jsonmap:"toJPY"},
{name:'AUD', width:80, align:"right", jsonmap:"toAUD"},
{name:'IDR', width:80, align:"right", jsonmap:"toIDR"},
{name:'KRW', width:80, align:"right", jsonmap:"toKRW"}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pjmap2avg',
sortname: 'tradeDT',
viewrecords: true,
sortorder: "desc",
jsonReader: {
root : "corporateavgrate",
repeatitems : false,
id: "fromCurr"
},
caption: "Average Corporate Rates For: "+month+"-"+year,
height: '100%',
reloadAfterEdit: true,
reloadAfterSubmit: true,
reloadonce: false,
autowidth:true,
viewrecords: true,
gridview: true
});
alert("hello");
jQuery("#corporateavgmap").jqGrid('navGrid','#pjmap2avg',{edit:false,add:false,del:false,refresh:true}).
jqGrid('navButtonAdd',"#pjmap2avg",{caption:"Export to Excel",buttonicon:"", onClickButton: corpAVGMonthlyRatesTableToExcel , position:"last",title:"",cursor:"pointer"});
I have a jqgrid that shows details of employees and i would like to add a filter in each column using which a user can type in company name and the grid shows all the employee rows that matches that filter in the grid.
Googled alot but no success. Any refrence examples/link will help.
You should use filterToolbar option when you type the name of test case in the text box you data will fiter through the records, here is the code and working example demo
var mydata = [
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"blah",note:"stuff",tax:"10.00",total:"210.00"},
];
jQuery("#list").jqGrid({
data: mydata,
datatype: "local",
height: 150,
rowNum: 10,
rowList: [10,20,30],
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager: "#pager",
viewrecords: true,
autowidth: true,
height: 'auto',
caption: "Test Grid"
});
jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
<table id="list"></table>
<div id="pager"></div>
I am adding to my jqgrid with below code all except cfgname and updateDate gets displayed into my grid, what is the problem here?
function addRow(cfgid,cfgname,hostname,cfgDesc,productId,cfgType,updateDate,emailAddress,absolutePath)
{
console.info(cfgid+", "+cfgname+", "+hostname+", "+cfgDesc+", "+productId+", "+cfgType+", "+updateDate+", "+emailAddress+", "+absolutePath);
var myrow = {cfgid:cfgid, '':'', cfgname:cfgname, hostname:hostname, cfgDesc:cfgDesc, productId:productId,hostname:hostname,cfgType:cfgType,emailAddress:emailAddress,absolutePath:absolutePath};
$("#list1").addRowData("1", myrow);
$("#list1").trigger("reloadGrid");
}
var grid = jQuery("#list1");
grid.jqGrid({
datastr : xml,
datatype: 'xmlstring',
colNames:['cfgId','','Name', 'Host', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By',''],
colModel:[
{name:'cfgId',index:'cfgId', width:90, align:"right", hidden:true},
{name:'',index:'', width:15, align:"right",edittype:'checkbox',formatter: "checkbox",editoptions: { value:"True:False"},editable:true,formatoptions: {disabled : false}},
{name:'cfgName',index:'cfgName', width:90, align:"right"},
{name:'hostname',index:'hostname', width:90, align:"right"},
{name:'cfgDesc',index:'cfgDesc', width:90, align:"right"},
{name:'productId',index:'productId', width:60, align:"right"},
{name:'cfgType',index:'cfgType', width:60, align:"right"},
{name:'updateDate',index:'updateDate', width:120, align:"right"},
{name:'emailAddress',index:'emailAddress', width:120, align:"right"},
{name:'absolutePath',index:'absolutePath', width:90, align:"right", hidden:true},
],
pager : '#gridpager',
rowNum:10,
scrollOffset:0,
height: 'auto',
autowidth:true,
viewrecords: true,
gridview: true,
xmlReader: {
root : "list",
row: "com\\.abc\\.db\\.ConfigInfo",
userdata: "userdata",
repeatitems: false
},
onSelectRow: function(id,status){
var rowData = jQuery(this).getRowData(id);
configid = rowData['cfgId'];
/*configname=rowData['cfgName'];
configdesc=rowData['cfgDesc'];
configenv=rowData['cfgType'];
filename=rowData['fileName'];
updatedate=rowData['updateDate'];
absolutepath=rowData['absolutePath'];*/
if(status==true)
{
}
rowChecked=1;
currentrow=id;
}
}
}
});
grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false});
Here is a snapshot
There are some errors in your code.
The first error: as you fill myrow = {...} you set cfgname:cfgname instead of cfgName:cfgname (your column in the grid has name:'cfgName' property and not name:'cfgname')
The second error: you display only the updateDate with respect of console.info, but don't set the property updateDate:updateDate of the myrow.