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.
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 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/
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");
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>
Is it possible to set width of a jQGrid in percentage? If yes, then how?
Not directly but it is possible...
If you are wanting to set the width of the entire grid to a percentage you can use the autowidth property and it will set the grids width to the width of it's parent element (i.e. DIV) and that parent element can have it's percentage set.
autowidth: true
If you want to set the column widths by percentage you can use shrinktofit and then your column width values are basically a percentage.
shrinkToFit: true
These options and many others can be found on the JQGrid wiki
It's possible in very simple way:
$(document).ready(function(){
var pageWidth = $("#updatesList").parent().width() - 100;
$("#updatesList").jqGrid({
url:'quick_updates.php?action=loadUpdates'+"&request=ajax",
datatype: "json",
colNames:[table_heading_id, table_heading_products, table_heading_categories, table_heading_model, table_heading_availability, table_heading_weight, table_heading_quantity, table_heading_sortorder, table_heading_manufacturers, table_heading_price, table_heading_tax],
colModel:[
{name:'id',index:'id', width:(pageWidth*(5/100)), sortable:true, align:"center", search:true},
{name:'name',index:'name', width:(pageWidth*(20/100)), sortable:true, align:"left",true:false,resizable:true},
{name:'categories',index:'categories', width:(pageWidth*(10/100)), sortable:true, align:"left",resizable:true,search:true,stype:"select",searchoptions:{value:categories}},
{name:'model',index:'model', width:(pageWidth*(10/100)), sortable:false, align:"left",search:true,resizable:true,editable:true},
{name:'availability',index:'availability', width:(pageWidth*(10/100)), sortable:true, align:"left",resizable:true,search:true,stype:"select",searchoptions:{value:availability},editable:true,edittype:"select",editoptions:{value:availability}},
{name:'weight',index:'weight', width:(pageWidth*(5/100)), sortable:true, align:"center",search:false,editable:true},
{name:'quantity',index:'quantity', width:(pageWidth*(5/100)), sortable:true, align:"center",search:false,editable:true},
{name:'sortorder',index:'sortorder', width:(pageWidth*(5/100)), sortable:true, align:"center",search:false,editable:true},
{name:'manufacturers',index:'manufacturers', width:(pageWidth*(10/100)), sortable:true, align:"left",resizable:true,search:true,stype:"select",searchoptions:{value:manufacturers},editable:true,edittype:"select",editoptions:{value:manufacturers}},
{name:'price',index:'price', width:(pageWidth*(10/100)), sortable:false, align:"center",search:false},
{name:'tax',index:'tax', width:(pageWidth*(10/100)), sortable:true, align:"center",resizable:true,search:true,stype:"select",searchoptions:{value:taxes},editable:true,edittype:"select",editoptions:{value:taxes}}
],
rowNum:50,
rowList:[10,20,30,50,100],
look at this code:
var pageWidth = $("#updatesList").parent().width() - 100;
and this code:
{name:'id',index:'id', width:(pageWidth*(5/100)), sortable:true, align:"center", search:true},
{name:'name',index:'name', width:(pageWidth*(20/100)),
Datatables 3.5+ supports this via
jQuery("#dt").jqGrid({
autowidth: true,
shrinkToFit: true
});
As for me, I consider this to be the best deсision:
// add this after JqGrid creation
$("#YourTableGrid").setGridWidth( Math.round($(window).width(), true) );
check window size in jquery.
$(window).on("resize", function () {
var newWidth = $("#list").closest(".ui-jqgrid").parent().width();
$("#list").jqGrid("setGridWidth", newWidth, true);
});
make sure to set autowidth: true in grid properties
If you're trying to set the width of the jqgrid table on your HTML page, try this.
HTML
<table id="jqGrid" width="98%"></table>
JS
var outerwidth = $("#jqGrid").width();
$("#jqGrid").jqGrid({
width: outerwidth
});
var operationfieldwidth = 40
function getPercentage(ask)
{
return ((screen.width - operationfieldwidth) * ask) / 100;
}
$(document).ready(function ($) {
GridBind();
});
function GridBind() {
$("#jqGrid").jqGrid({
url: '#(Url.Action("BindRole", "Role"))',
datatype: 'json',
mtype: 'Get',
colNames: ["Role Name", "Role Description", ""],
colModel: [{ name: 'ActRoleName', index: 'RoleName', width: getPercentage(20), align: 'left', power: 3, sortable: true },
{ name: 'ADRoleName', index: 'RoleDesc', width: getPercentage(80), align: 'left', power: 6, sortable: true },
{ name: 'add', sortable: false, width: operationfieldwidth, search: false, power: 0, formatter: addLink }
],
pager: jQuery('#jqControls'),
iconSet: "fontAwesome",
rowNum: 25,
rowList: [25, 50, 100, 500, 1000],
height: screen.height - 490,
viewrecords: true,
emptyrecords: 'No Records are Available to Display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
autowidth: true,
multiselect: false,
}).navGrid('#jqControls', {
edit: false, add: false, del: false, search: true,
searchtext: "Search", refresh: true
}, {}, {}, {},
{
zIndex: 100,
caption: "Search Record",
sopt: ['cn'],
closeAfterSearch: true
});
}
function addLink(cellvalue, options, rowObject) {
var Str = "<a class='fa fa-pencil-square-o fa-2x' style='cursor:pointer;' href='../../Role/AddEditRole?id=" + rowObject.ID + "'></a>"
return Str;
}
$(document).ready(function () {
var yourPercentage = 50%;
$("#jQGridDemo").setGridWidth($("#jQGridDemo").parent().width() * yourPercentage/100);
});
Percentage calculated in the reference of parent wrapper of jqGrid.