I have to display an add modal form when the page loads. I do so thusly:
$('#lst_totals').jqGrid('editGridRow','new');
Problem is, I don't know how to set the navgrid when I call it in this way. I set the options on the add modal form in the navgrid like this:
// add options
{ bSubmit: "Add",
width: 350,
recreateForm: true,
recreateFilter: true,
closeOnEscape: true,
closeAfterAdd: true,
editData: { action:'grdTotals' },
},
But these properties are not set for the add modal form I called when the page loads. They only apply to add modal forms that are shown when the add button is clicked. How do I apply options to modal forms that are called from outside of the jqGrid?
Here's the solution. It's as simple as I knew it would be:
$('#lst_totals').jqGrid('editGridRow','new',
{ bSubmit: "Add",
width: 350,
recreateForm: true,
recreateFilter: true,
closeOnEscape: true,
closeAfterAdd: true,
editData: { action:'grdTotals' },
}
);
Basically, since I'm creating a new modal form that's not really part of the navgrid, I have to give it the properties I want it to have. Above, the 'editGridRow' accepts a third parameter {} which can contain these properties.
Related
When I add width to the edit modal in jqGrid, the parameters after it (i.e., add:false, closeAfterEdit: true, etc.) stop working. I've tried it in different places, and it doesn't work.
jQuery("#prodgrid").jqGrid('navGrid', '#pager', {width: 1000},{edit: true, add: false, del: false, search: false}, {closeAfterEdit: true}, {closeAfterAdd: true});
FYI:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/jquery.jqgrid.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
You use wrong options of navGrid. If you examine the documentation you will see that the position of the parameters which you use is wrong. The correct will be
$("#prodgrid").jqGrid('navGrid', '#pager',
{add: false, del: false, search: false},
{closeAfterEdit: true, width: 1000},
{closeAfterAdd: true, width: 1000});
(you can skip edit: true because it's already default value).
I see that you use free jqGrid. It makes specifying of jqGrid options easier. First of all you can skip '#pager'. In the case jqGrid will just use the pager which you already specified during creating of the grid. Seconds you can specify page: true in the option of the grid instead of usage pager: '#pager'. You will don't need to create empty <div id="pager"></div> in the case. By usage page: true free jqGrid will create the corresponding div automatically. Moreover the options of 'navGrid' are divided in independent parts: the navGrid option {edit: true, add: false, del: false, search: false} and the options of form editing: {closeAfterEdit: true, width: 1000} and {closeAfterAdd: true, width: 1000}. Free jqGrid allows to specify the options directly during creating the grid and then use simplified form of the call of navGrid:
$("#prodgrid").jqGrid({
// here there are all other standard option which you already use
pager: true,
navOptions: {add: false, del: false, search: false},
formEditing: {closeAfterEdit: true, closeAfterAdd: true, width: 1000}
}).jqGrid("navGrid");
You can read more about the style of coding the option of jqGrid here. I personally like much more named parameter as positioned parameter because everybody can better read the code.
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();
},
});
});
jqgrid add dialog have two buttons(submit and cancel). A message will be displayed when i click the cancel button. That message box have 3 buttons(yes, no and cancel). Now i want to remove the cancel button. any possibilities........?
Sorry for my bad english.
Thank you.
sample coding for jqgrid
<sjg:grid id="gridtable"
caption="Customer List"
dataType="json"
href="%{remoteurl}"
pager="true"
gridModel="customerList"
rowNum="10"
autowidth="true"
editurl="%{editurl}"
editinline="false"
navigator="true"
navigatorAdd="true"
navigatorAddOptions="{
viewPagerButtons: false,
recreateForm: true,
checkOnUpdate: true,
closeAfterAdd: true,
height: 275,
width: 600,
draggable: false,
resizable: false
}"
navigatorDelete="true"
navigatorEdit="true"
navigatorRefresh="true"
navigatorSearch="true"
navigatorEditOptions="{
viewPagerButtons: false,
recreateForm: true,
checkOnUpdate: true,
closeAfterEdit: true,
height: 275,
width: 600,
draggable: false,
resizeable: false
}"
navigatorDeleteOptions="{ checkOnUpdate: true}"
navigatorViewOptions="{
viewPagerButtons: false,
recreateForm: true,
checkOnUpdate: true,
height: 225,
width: 620,
draggable: false,
resizeable: false
}"
navigatorSearchOptions="{
sopt:['eq','ne','lt','gt','in','ni','cn','nc'],
closeAfterSearch: true
}"
navigatorView="true"
rownumbers="true"
rowList="10,20,30"
viewrecords="true"
>
Thank you so much.
Here i am specifing that cancel button
how to remove this cancel button?
I need only yes and no buttons.
Using grid API how it can be possible i dont know but,using jquery you can hide this button in following way :
$("#gridtable #cNew).css({'display':'none'});
'#cNew' is id of that button or you can get id of Cancle button by right click on that button and select inspect element in mozila webbrowser or use firebug to get id of that button and then replace that id with #cNew.
I think you can apply it to each form add, edit, etc.
hide button cancel
onInitializeForm: function($form) {
$form.parent().find('#cData').hide();
}
or if you want hide button submit
beforeShowForm: function ($form) {
$form.parent().find('#sData').hide();
},
I have a jqGrid constructed as it follows in the code below:
function radio(value, options, rowObject){
var radio = '<input type="radio" value=' + value + ' name="radioid" />';
return radio;
}
function reloadOnEnter(){
jQuery(':input[name=field1]').keyup(function(e){
if(e.keyCode == 13){
var fieldValue = jQuery(':input[name=field1]').attr('value');
jQuery(':input[name=field1]').attr('value', fieldValue);
jQuery("#listTable").jqGrid().trigger("reloadGrid");
}
});
}
jQuery(function(){
jQuery("#listTable").jqGrid({
url: '$content.getURI("myURI")' + '?userId=$userId&pageNo=0&locale=' + '$locale',
datatype: 'json',
mtype: 'POST',
colNames:['column1', 'column2', 'column3', 'column4', 'column5'],
colModel :[
{name:'name', index:'field', width:'8%', search:false, align:'center', formatter: radio, editable:false, sortable: false, resizable:false},
{name:'name1', index:'field1', width:'23%', sortable: false, resizable:false},
{name:'name2', index:'field2', width:'23%', sortable: false, resizable:false},
{name:'name3', index:'field3', width:'23%', sortable: false, resizable:false},
{name:'name4', index:'field4', width:'23%', sortable: false, resizable:false}
],
width:'768',
height: 500,
pager: '#pagerDiv',
gridview: true,
rowNum: $rowNr,
rowTotal: 500,
sortorder: 'desc',
viewrecords: true,
loadComplete: loadCompleteHandler,
ignoreCase: true
});
});
jQuery(function(){
jQuery("#listTable").jqGrid('filterToolbar',{
stringResult: true,
searchOnEnter: false });
});
I start typing 'he' and the autocomplete window shows me 'hello' (because I previously typed hello). I select 'hello' and hit enter, and still 'he' is submitted in the ajax request.
My reloadOnEnter function is called by the loadCompleteHandler. The interesting thing is that when I query the search field (field1) value is the selected value, but only the typed value is being sent in the request. I would like to send the selected value. How can i achieve this?
EDIT:
The loadCompleteHandler looks like this:
function loadCompleteHandler(){
reloadOnEnter();
jQuery("#listTable").jqGrid('setGridHeight', Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
}
(I use Apache Velocity as a template engine! That is why I have variables like $variable in the javascript code!)
To your main question: you should use jQuery.val function instead of jQuery.attr('value').
Many other things in your code seams me strange or unclear. It is not clear for me how you use reloadOnEnter in the loadCompleteHandler. If would be good if you include the corresponding code fragment. The value for the url seems me also very strange. You use additionally searchOnEnter: false option of filterToolbar but in the reloadOnEnter you wait for the 'Enter' key. Inside of the body of if(e.keyCode == 13) you get jQuery(':input[name=field1]').attr('value') and then set the same value back. Why?
Probably you could describe in the text of your question a little more what you want to archive with the code?