I am use jqGrid. I want to add record inline navigation
so this link http://www.trirand.com/blog/jqgrid/jqgrid.html?
when i click in ADD new row icon in navbar. Grid is like view modal view.
<div id="pager"></div>
<table id="ward"></table>
<br />
<script src="js/rowedex3.js" type="text/javascript"> </script>
<script type="text/javascript">
jQuery("#ward").jqGrid({
mtype : 'GET',
url : "listAllWards.html",
datatype : "json",
colNames : [ 'Id', 'Ward Type', 'Description'],
colModel : [ {
name : 'id',
index : 'id',
editable:true,
width : 50
}, {
name : 'name',
index : 'name',
width : 150,
editable:true,
}, {
name : 'decsription',
index : 'decsription',
width : 100,
editable:true,
}],
rowNum : 5,
rowList : [ 5, 10, 30 ],
pager : '#pager',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
caption : "Ward's List",
width : 940,
cellEdit : true,
editurl: "server.html",
});
jQuery("#ward").jqGrid('navGrid', '#pager', {
edit : false,
del : false,
search :false,
});
</script>
If you want to use inline editing for add the row you should use add: false option of navGrid (together with edit: false which you already use) and you should include call of inlineNav after calling of navGrid. You can choose the buttons added by inlineNav by the usage of corresponding options of inlineNav described in the documentation.
UPDATED: You have to remove cellEdit : true option from jqGrid because the usage of both cell editing and inline editing is not supported.
Additionally you have to rename id column to any other name if you need to edit the grid. See the second part on the answer for additional details.
I recommend you to place the whole JavaScript code inside of $(function(){...}); and move it inside of <head>.
You should verify that you use current (now 4.4.1) version of jqGrid.
Related
I use free jqgrid 4.8.
I use the jqgrid inside a modal dialog.
When I try to use the delete button of the pager, all the dialogs are disabled.
http://jsfiddle.net/9ezy09ep
$(function ()
{
$("#Ecran").dialog(
{
dialogClass: 'Ecran',
autoOpen: false,
width: 500,
height:400,
modal: true,
open: function (event, ui) {
$("#jqGrid").jqGrid({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
mtype: "GET",
datatype: "jsonp",
colModel: [
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
{ label: 'Customer ID', name: 'CustomerID', width: 150 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ label: 'Freight', name: 'Freight', width: 150 },
{ label:'Ship Name', name: 'ShipName', width: 150 }
],
viewrecords: true,
width: 480,
height: 250,
rowNum: 20,
pager: "#jqGridPager"
});
jQuery("#jqGrid").jqGrid('navGrid', '#jqGridPager', {
del: true, add: false, edit: false,
beforeRefresh: function () {},
afterRefresh: function () {}},
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{}, // search options
{}
);
},
close:function () {}
});
});
Any ideas ? thanks
I think that the origin of the problem by using jqModal inside of jQuery UI dialog. jqGrid is jQuery plugin. So it don't use only CSS from jQuery UI. It don't use jQuery UI Dialogs.
I recommend you to include the line
$.fn.jqm = false;
to switch off jqModal module and to use jQuery UI functionality. See http://jsfiddle.net/9ezy09ep/7/. I will examine the problem more detailed later to improve the code of free jqGrid for the described test case.
UPDATED: I made some additional modifications in free jqGrid, which allows alternative solution. One can now use the code like
$.jgrid.jqModal = $.jgrid.jqModal || {};
$.extend(true, $.jgrid.jqModal, {toTop: true});
to change the behavior of jqModal module. The next demo shows the results http://jsfiddle.net/OlegKi/9ezy09ep/9/
jqGrid should utilize ui-dialog class when it creates modal dialog.
you will have to modify jquery.jqGrid.min.js file.
As per version 5.0.0 ,
Just add ui-dialog class to follwing line,
modal: { modal: "ui-widget ui-widget-content ui-corner-all ",
e.g.
modal: { modal: "ui-widget ui-widget-content ui-corner-all ui-dialog",
As per free jqGrid version,
Add ui-dialog class to following line,
dialog: {
...
window: "ui-widget ui-widget-content ui-corner-all ui-front",
...
e.g.
dialog: {
...
window: "ui-widget ui-widget-content ui-corner-all ui-front ui-dialog",
...
This is the grid view showing all records on grid here, but i don't want show in the grid all records?
When ever i click events like add,edit,view,in that time shows the all records...
Suppose showing' Total' in my grid ,,Total is showing only when i click add ,edit ,view
Not in the grid view
colModel:[
{name:'empId',index:'empId',width:3,editable:true,editoptions:{readonly:false,view:true},editrules:{required:false},key:true,formoptions:{rowpos:2,elmprefix:" " }},
{name:'empName',index:'empName',width:3,editable:true,editrules:{required:true},formoptions:{rowpos:3,elmprefix:" " }}]
jQuery("#taskDetails").jqGrid('navGrid','#pagernavTask',{add:true,edit:true,del:true,refresh:true,view:true,search:false})
This is my code...suppose if i add id,name (editable:true) it show dialogue box 2 feilds ..and also it shows in grid view also ,,but and don't want to display in the grid view displays ,it show only when i click edit,add,view (show in dialogue boxes)..Is it possible ????Please reply for this answer
Please any one give me the answer
Thanks in adavance
hiding a column can be done by using hidden: true in your colModel. Moreover by using beforeshowform in your add ,edit ,view u can customize ur own way of showing / hiding a column. For advance details Hidden Columns in jqGrid.
UPDATE
here i hide EmpId by using hidden:true in my colmodel. it can be shown in Add dialog by using beforeshowform event. Same way i have shown empName in Grid but hidden in edit dialog. hope u can understand now.
$(function() {
var grid = $('#MyJqGrid');
var mydata = [
{empId:"1",empName:"alpha",notes:"NA"},
{empId:"2",empName:"beta",notes:"Null"},
{empId:"3",empName:"gamma",notes:"N/A"},
{empId:"4",empName:"delta",notes:"Null"},
{empId:"5",empName:"theta",notes:"aaaa"},
];
grid.jqGrid({
data: mydata,
datatype: "local",
colNames:['empId','empName', 'Notes'],
colModel:[
{name:'empId',index:'empId',sortable:true, editable:true, hidden: true,}, // here field is hidden in grid
{name:'empName',index:'empName',editable:true, sortable: true, hidden: false,}, // here field is shown in grid
{name:'notes',index:'notes',editable:true, sortable: true,},
],
height: "auto",
width : "auto",
pager:'#Mypager',
viewrecords : true,
rowNum: 5,
sortname: "empId",
sortorder :"asc",
rowList:[2,3,5],
caption : "My JqGrid Test",
}).jqGrid('navGrid','#Mypager',{
edit: true,
add: true,
del: false,
search: false,
view: false,
},
{
//Edit Form
beforeShowForm: function(form){
$('#tr_empName',form).hide(); //In Edit form empName is Hidden, initially shown
}
},
{
//Add Form
beforeShowForm: function(form){
$('#tr_empId',form).show(); //In add form EmpId is shown, initially hidden
//$('#tr_empName',form).hide();
},
});
});
I am building search functionality in multi-tab where user search criteria will be one tab, and user search results will be in other tab. When I am searching first time, I got my results with proper page navigation bar in second tab. But when user goes back to previous tab(search tab) and search again my grid results are refreshed with proper values but my navgrid is not appearing. I could not find dom for navgrid in firebug as well where initially that dom present with first time search.
Following are the code snippets.
function dispSearchResults() {
var no = document.getElementById("stNo").value;
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var dateOfBirth = document.getElementById("dateOfBirth").value;
document.getElementById("searchContainerModal").innerHTML='<table
id="searchResultsTab" style="width:100%"></table>';
jQuery("#searchResultsTab").jqGrid({
url : contextPath + '/web/getSearchViewResults.json',
datatype : "json",
mtype: "POST",
postData:{'NO': no, 'FIRST_NAME':firstName, 'LAST_NAME':lastName,
'DATE_OF_BIRTH':dateOfBirth},
colNames : [ 'no', 'First Name', 'Last Name', 'Date Of Birth'],
colModel : [ {
name : 'No',
index : 'No',
width : 100,
align : "center",
formatter: fmtStateno
}, {
name : 'firstName',
index : 'firstName',
width : 220,
align : "left",
formatter: fmFName
}, {
name : 'lastName',
index : 'lastName',
width : 220,
align : "left",
formatter: fmLName
}, {
name : 'dateOfBirth',
index : 'dateOfBirth',
width : 120,
align : "left",
formatter: fmBirthDate
}],
altRows : true,
altClass : 'oddRow',
loadComplete : function() {
document.getElementById("sResultsTab").style.visibility =
"visible";
if (jQuery("#searchResultsTab").getGridParam("records")==0) {
jQuery("#searchResultsTab").addRowData(
"blankRow", {"No":"No data was found",
"firstName":"", "lastName":"", "dateOfBirth":""}
);
}else{
$("tr.jqgrow:odd").addClass('oddRow');
}
},
onCellSelect: function(rowid,iCol,cellcontent,e) {
// alert(rowid);
cContent = cellcontent;
rId = rowid;
},
height : 240,
width : 1165,
rowNum : 25,
rowList : [25,50,75,100],
loadonce: true,
pagination:true,
pager : '#searchPagerDiv1',
sortname : 'no',
viewrecords : true,
sortorder : "desc",
caption : "Search Results",
gridview : true,
jsonReader : {
root : "rows",
page : "currentPage",
total : "totalPages",
repeatitems : false,
id : "id"
}
}).navGrid("#searchPagerDiv1",reloadAfterSubmit: false,
{edit:false,add:false,del:false});
});
$("#tabs").tabs("select", "#searchResultsTb");
}
Here are the code snippets
main jsp for tabs
------------------
<div id="mainContentDiv"<
<div id="tabs" style="background-color: transparent; height:auto"<
<ul id="Tabs1"<
<li id="sCriteriaTab"<<a href="#searchTab"<Search Criteria </a<
</li<
<li id="sResultsTab"< <a href="#searchResultsTb"<Search
Results</a< </li<
</ul<
<div id="searchTab" style="background-color: transparent" class="height250"<
<%# include file="../search/SearchCriteria.jsp" % <
</div<
<div id="searchResultsTb" style="background-color: transparent;"<
<%# include file="../search/SearchResults.jsp" %
<
</div<
SearchCriteria.jsp
-------------------
<form id="searchForm" name="searchForm"<
<div class="personDetailsDiv" id="personNameInfoDiv"<
<div style="float:right"<
<font class="standardInputTitle"<no</font<
<input id="No" name="No" class="standardInputText marginRight50" value=""
type="text"<</div< </div<
........
............
<div class="button-row"<
<a href="javascript:dispSearchResults()" class="button rounded blue effect-
3"<Search</a<
</div<
</div< </form<
SearchResults.jsp
----------------
<div id="searchContainerModal" style="width:100%"<</div<
<div id="searchPagerDiv1"<</div<
<div id="searchPagerDiv" style="width:100%"<
<div id="searchZeroRec" style="display:none;"< Zero Records Found ...
</div<
</div<
Appreciate your help !!!!
I'm using jqGrid in my project and ran into a strange paging issue. I can click on the next page button and go from page 1 to page 2, but any other paging buttons I push after that I get stuck on page 2 and can't go to other pages. I can however type in a page number, hit enter and then it will update the page displayed. I have pasted the jqGrid code below.
jQuery(document).ready(function(){
jQuery("#groupsTable").jqGrid({
jsonReader: {
root:"rows",
page:"page",
total:"total",
records:"records",
repeatitems:false,
cell:"",
id:"id",
userdata:"userdata"
},
url:'project/selectTable/loadTableInfo.do',
datatype:'json',
colNames:['Name','Size', 'Number', 'Search','Delete'],
colModel:[
{name:'name',index:'name', width:500, sorttype:'text', searchoptions:{sopt:['cn']},
{name:'size',index:'size', sorttype:'int', width:150, searchoptions:{sopt:['le']}},
{name:'mailList',index:'mailList',sorttype:'int', width:150, searchoptions:{sopt:['le']}},
{name:'search',index:'search', stype:'select', width:60, sortable:false},
{name:'delete',index:'delete',width:60, stype:'select', sortable:false}],
pager:'#pager',
loadonce:true,
rowNum:50,
rowList:[10,25,50,75,100,500],
viewrecords:true,
height:600,
pgbuttons:true,
pginput:true,
loadComplete: function(){
var ids = jQuery("#groupsTable").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
X = "<span class='delete' onClick=deleteRow("+cl+");></span>"
searching = "<span class='search' onClick=search("+cl+");></span>"
jQuery("#groupsTable").setRowData(ids[i],{delete:X});
jQuery("#groupsTable").setRowData(ids[i],{search:searching});
}
jQuery('#groupsTable').filterToolbar({searchOnEnter:false});
jQuery('#groupsTable')[0].triggerToolbar();
},
caption:'General Info'
});
});
And the html:
<table id="groupsTable"></table>
<div id="pager"></div>
what i think you are implementing rowList in wrong manner, read the defination of rowList in this link
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid
or it could be a version problem also, check this link..
http://www.trirand.com/blog/?page_id=393/help/default-rowlist/
I hope it helps you
I want to add a button to each row in my grid that will bring up a new window. Do not see this feature in this very rich control. Must be missing something
Here's one example, from the jqGrid demos page:
jQuery("#rowed2").jqGrid({
url:'server.php?q=3',
datatype: "json",
colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'act', index:'act', width:75,sortable:false},
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90, editable:true},
{name:'name',index:'name', width:100,editable:true},
{name:'amount',index:'amount', width:80, align:"right",editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'total',index:'total', width:80,align:"right",editable:true},
{name:'note',index:'note', width:150, sortable:false,editable:true}
],
rowNum:10,
rowList:[10,20,30],
imgpath: gridimgpath,
pager: jQuery('#prowed2'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
gridComplete: function(){
var ids = jQuery("#rowed2").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#rowed2').editRow("+cl+"); ></ids>";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=jQuery('#rowed2').saveRow("+cl+"); />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=jQuery('#rowed2').restoreRow("+cl+"); />";
jQuery("#rowed2").setRowData(ids[i],{act:be+se+ce})
}
},
editurl: "server.php",
caption:"Custom edit " }
).navGrid("#prowed2",{edit:false,add:false,del:false});
You can also do it with a custom formatter.
the current highest answer places the custom button code within loadComplete. it shoudl be gridComplete. The API has likely been changed since the question was answered.
in colModel , you can format using formatter by following code
formatter:function (cellvalue, options, rowObject) {
return "<input type='button' value='somevalue' onclick='some_function'\>";
}
This example might be helpful. See this wiki page and this answer from Oleg.
I am using a jqgrid to display a list of contacts. I have a column named 'Role' with a button that says 'Define', such that you can click on it and redefine that contact's role as primary, secondary, sales, or other.
Originally, the button element was being sent to the grid cell via XML, where $rowid was the id of the row (PHP):
<cell><![CDATA[<button data-idx='{$rowid}' class='contact_role_button btn' title='Define Role...'>Define</button>]]></cell>
This worked fine until I set autoencode: true on the grid. With this option set to true, the column was simply displaying the html.
Craig's answer displayed similar behavior, but a slight variation of it did the trick. I thought I'd share:
gridcomplete: function() {
var ids = $grid.getDataIDs();
for (var i=0;i<ids.length;i++){
var cl = ids[i],
button = '<button data-idx="'+cl+'" class="contact_role_button btn" title="Define Role...">Define</button>';
if (cl.substr(0,2) !== "jq") {
$('#'+cl).find('td[aria-describedby="list_role"]').html(button);
}
}
}
In other words, the setRowData method didn't work with autoencode set to true, but the DOM can be manipulated as desired within the gridcomplete event.