i have jqgrid with the following structure :
jQuery("#frmac").jqGrid({
url:'manage_groups_controller.php?module=group',
datatype: "json",
colNames:[ ' ' , 'Id', 'Pays' , 'Category', 'SubCategory','Hidden','Group name','Title', 'Libelle','Etat', 'Pds'],
colModel:[
{name: 'myac', width:100, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
{name:'id', key : true, index:'id',width:50},
{name:'country',index:'country_id' ,edittype:'select', editoptions:{value:{32:'Belgique',1000:'Canada',33:'France', 352:'Luxembourg',41:'Suisse'}},width:50 , editable :true},
{name:'category', index:'category_id', editable :true,width:80,edittype:'select',editoptions: {dataUrl:'manage_groups_controller.php?module=category',dataEvents :[{ type: 'change', fn: function(e) {var thisval = $(e.target).val();$.get('manage_groups_controller.php?module=subcat&catid='+thisval, function(data){$("#subcategory_id").html(data);});}}]}},
{name:'subcategory',index:'subcategory_id', editable :true,width:100,edittype:'select',editoptions: {dataUrl:'manage_groups_controller.php?module=subcat&catid='}},
{name:'hidden',index:'hidden',width:60,edittype:'select', editable :true,editoptions:{value:{O:'Oui',N:'Non'}}},
{name:'group',index:'nom_group',width:250},
{name:'title',index:'title',width:300,editable:true, edittype:'textarea',editoptions: {rows:"5",cols:"27"},editrules:{required:true}},
{name:'libelle', index:'libelle',width:300,editable:true, edittype:'textarea',editoptions: {rows:"5",cols:"27"},editrules:{required:true}},
{name:'etat', index:'etat', editable :true,width:30,edittype:'select', editoptions:{value:{A:'Active',D:'Desactive'}}},
{name:'pds', index:'pds', editable :true,width:30,editrules:{required:true},formatter:'integer'}
],
rowNum:10, width:700,
rowList:[10,20,30],
pager: '#pfrmac',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
jsonReader: { root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell"
} ,
caption: "Gestion des groupes",
height: '100%',
width: '100%',
editurl : 'manage_groups_controller.php?module=group'
});
jQuery("#frmac").jqGrid('navGrid','#pfrmac',{edit:false,add:true,del:false});
i have two somes problemes with inline edit on the rows Category and SubCategory:
1- when a categroy option selected the subcategory slectbox must be populated with option related to the category selectBox, the $.get function work fine , but i don't find how to put returned html to the Subcategory row.
2- on edit of the subcategory row i have to populate the select box with option related the the current category option , i can't find how to to pass the value to editoptions: {dataUrl:'manage_groups_controller.php?module=subcat&catid= ?????????'}
Related
I am using jqGrid with toolbar searching enabled. I have configured my search option as 'eq'. However, when I input a decimal number on the search bar, the valid record does not show.
For example:
When I input 12, the record with 12.00 shows, this is correct.
When I input 12.50 the record with 12.50 does not show, this is incorrect.
I experimented with sorttype as number, formatter with decimal places, but I can't seem to get it to work.
Grid definition:
$("#productListingGrid").jqGrid({
datastr: products,
datatype: 'jsonstring',
jsonReader: {
root: 'products',
repeatitems: false,
cell: 'products.branches',
id: 'productNumber'
},
loadonce: true,
// -1 no longer works: https://github.com/tonytomov/jqGrid/issues/317
rowNum: 10000,
height: 580,
width: 1250,
colNames: columnNames,
colModel: columnModel,
sortname: 'productNumber',
sortorder: "asc",
caption: 'PRODUCT LIST',
headertitles: true,
altRows: true,
altclass: 'gridStripe',
gridview: true,
footerrow: true,
ignoreCase: true,
shrinkToFit: false
});
My column model definition:
{ name: 'totalValue' , width:55, align:'right', formatter: 'currency', searchoptions:{sopt:['eq']} }
Code to enable the toolbar search:
grid.jqGrid('filterToolbar', {searchOnEnter: false});
May I know if this is a current limitation?
Thank you very much.
Note:
I'm currently using the following:
jQuery - 1.9.1
jQuery UI - 1.10.2
jqGrid - 4.4.5
I got this to work by setting the sorttype value as 'float'.
From
{ name: 'totalValue' , width:55, align:'right', formatter: 'currency', searchoptions:{sopt:['eq']} }
to
{ name: 'totalValue' , width:55, align:'right', sorttype:'float', formatter: 'currency', searchoptions:{sopt:['eq']} }
I find it quite counter-intuitive to set a sort type for searching to work correctly. It could have been better to have a data type instead.
I want to get values of 2 column in a javascript function when a row is selected(clicked) in jqgrid table.what i want is add a javascript onclick event on each row and javascript function gets the values of col3 and col4 of selected row.my code is
jQuery("#table1").jqGrid({
url:'petstore.do?q=1&Path='+path,
datatype: "json",
colNames:['col1','col2','col3','col4'],
colModel:[
{name:'col1',index:'col1',sortable:true,width:250},
{name:'col2',index:'col2',sortable:true,width:100},
{name:'col3',index:'col3', sortable:true,width:100},
{name:'col4',index:'col4', sortable:true},
],
multiselect: false,
paging: true,
rowNum:10,
rowList:[10,20,30],
pager: $("#pager")
}).navGrid('#pager',{edit:false,add:false,del:false});
can any body help me out from this ?
You should handle the onSelectRow event (which is raised immediately after the row has been clicked) and then you can use getRowData method in order to get selected row data as an array:
$('#table1').jqGrid({
url: 'petstore.do?q=1&Path='+path,
datatype: 'json',
colNames: ['col1', 'col2', 'col3', 'col4'],
colModel: [
{name:'col1', index:'col1', sortable:true, width:250},
{name:'col2', index:'col2', sortable:true, width:100},
{name:'col3', index:'col3', sortable:true, width:100},
{name:'col4', index:'col4', sortable:true}
],
multiselect: false,
paging: true,
rowNum: 10,
rowList: [10,20,30],
pager: $('#pager'),
onSelectRow: function(rowId){
var rowData = $('#table1').jqGrid('getRowData', rowId);
//You can access the desired columns like this --> rowData['col3']
...
}
}).navGrid('#pager', {edit:false, add:false, del:false});
This should get you what you want.
I have the following grid defined:
$("#list").jqGrid({
url:'listOpenQueryInXML.php',
datatype: 'xml',
colNames:['Id','name1', 'name2', 'status', 'type'],
colModel:[
{name:'id', index:'id', editable: false, formatter:'showlink', formatoptions:{baseLinkUrl:'continue.php'}},
{name:'name1', index:'name1', editable: false},
{name:'name2', index:'name2', editable: false},
{name:'status', index:'status', editable: false},
{name:'type', index:'type', editable: false}
],
autowidth: true,
sortname: 'id',
viewrecords: true,
pager: null,
sortorder: 'id',
loadonce: false,
caption: 'Open Query',
height: '100%',
xmlReader: { root : "rows", row: "row", repeatitems: false, id: "id" },
Now, what I would like to have is to override continue.php to be a different link based on the content of 'id', or 'status' or any field.
So if
status = NEW link="new.php?id="{id}"
status = STUCK link="helper.php?id={id}"
Etc.
I'm running jqGrid 4.3.1 and jQuery 1.8.16.
You should use custom formatter instead of showlink formatter. In the case you have to construct <a> element yourself based on the cellvalue, options and rowObject parameters of the callback function. Because you use datatype: 'xml' the rowObject parameter will be IXMLDOMElement so to get contain of the status you should use find or children jqGrid method.
I don't tested the code below, but I suppose you can do something like the following
$("#list").jqGrid({
url: 'listOpenQueryInXML.php',
colNames: ['Id', 'name1', 'name2', 'status', 'type'],
colModel :[
{name:'id', formatter: function (cellvalue, options, rowObject) {
return '<a href="' +
($(rowObject).children('status').text() === 'NEW' ?
'new.php' : 'helper.php') +
'?id=' + cellvalue + '">' + cellvalue + '</a>';
},
{name:'name1'},
{name:'name2'},
{name:'status'},
{name:'type'}
],
autowidth: true,
gridview: true,
sortname: 'id',
viewrecords: true,
sortorder: 'id',
caption: 'Open Query',
height: '100%',
xmlReader: { repeatitems: false, id: "id" }
});
Its only an example of the formatter. You can place for example other text in the link which will be displayed the user.
I removed from the jqGrid definition which you use many default options and added the gridview: true options which improves the performance of the grid.
Here append similar questions but I cannot find answer to my one:
In html is
table id= grid and div id=pager:
Also I have mine js code:
var myGrid = $("#grid").jqGrid({
url: _options.gridFetch,
datatype: "json",
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:555, editable:true},
{name:'is_promoted',index:'is_promoted', width:165, editable:true, formatter: $.adminCategoryEntries._boolFormatter, edittype: 'select', editoptions:{value:"1:Yes;0:No"}},
{name:'is_in_shop',index:'is_in_shop', width:165, editable:true, formatter: $.adminCategoryEntries._boolFormatter, edittype: 'select', editoptions:{value:"1:Yes;0:No"}},
{name:'actions', formatter:'actions', width: 85, formatoptions:{keys:true}},
],
pager: '#pager',
jsonReader : { repeatitems: false } ,
rowNum: 10,
rowList: [10, 20, 500],
viewrecords: true,
autowidth: true,
sortname: 'id',
sortorder: 'desc'
});
myGrid.jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false});
I've use code from other stackoverflow tutorial.
And here is my issue: If I try to change number of showed rows in my navigator I can see all stored data (86 rows) but if I set rows to i.e 10 (value less than rows number)per page I always see in my navigator:
page 1 of 5
and I cannot switch it to another it always stays on first
json info:
>page: 1
>records: "86"
>rows: [{id:3, name:Ulkofilee/Naudanliha, is_promoted:1, is_in_shop:1},…]
>total: 5
thanks in advance
Radek
Are you getting the data from a server method you can control? It's somewhat cryptic, but the data coming from your _options.gridFetch needs to have a property named "total" defined that specifies the current page that should be viewed.
I have a list of products on my site. I draw it with jqGrid. Also I have a form, to create new product, or update existing one. Is there any way to set in jqGrid, that when I press 'edit' button in grid, it redirects me to page like
'mysite/product/edit/id/{id}'
Here is my grid script:
$(document).ready(function() {
$("#list").jqGrid({
url:'product/getjson',
datatype: "json",
colNames:['id','Name', 'description', 'Publication date','Picture'],
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:90},
{name:'description',index:'description', width:200},
{name:'pubDate',index:'pubDate', width:200, align:"right"},
{name:'picPath',index:'picPath', width:200, align:"right"},
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc", caption: 'Products'});
$("#list").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true});
})
You can change url with respect of onclickSubmit function (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow):
$("#list").jqGrid({
url:'product/getjson',
// ...
});
$("#list").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true},
{ onclickSubmit: function(rp_ge, postdata) {
rp_ge.url = 'mysite/product/edit/id/' + postdata.list_id;
}
});
Try to add editurl field in your config:
$("#list").jqGrid({
editurl:'mysite/product/edit/'
});
id will be passed in row data