The jqgrid rowlist dropdown is missing.
Missing jqgrid rolwist dropdown http://www.managementlevelreview.com/images/MissingRowlist.jpg
My code:
jQuery("#gridsavedAfterHours").jqGrid({
url:'/AfterHours/GetsavedAfterHours?userid=${thisuserid}&&orgcode=${thisorgcode}',
datatype: 'json',
colNames:['ID','Name','Branch','Start','End'],
colModel:[
{name:'AfterHoursId', index:'AfterHoursId', width:25, sortable:true, search:false, key: true},
{name:'UserFullName', index:'UserFullName', width:150, sortable:true, search:false},
{name:'UserOrgLongName', index:'UserOrgLongName', width:150, sortable:true, search:false},
{name:'enteredStartDate', index:'enteredStartDate', width:100, sortable:true, search:false},
{name:'enteredEndDate', index:'enteredEndDate', width:100, sortable:true, search:false}
],
rowNum:${DefaultRowNumber ?? 10},
rowList:[10,25,50,100],
pager: jQuery('#savedAfterHoursPager'),
onSelectRow: function(id){},
sortname: 'Start',
viewrecords: true,
sortorder: 'desc',
multiselect: false,
imgpath: '/Content/images',
caption: 'After Hours',
height: 'auto',
width: '800px',
emptyrecords: 'No After Hours data found.'
}).navGrid('#savedAfterHoursPager',
{edit:false,add:false,del:false},
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{ //search options
closeOnEscape:true /* allow the view dialog to be closed when user press ESC key*/
}
);
I suppose that you defined some CSS style for input field which has large width attribute and probably some other attributes. I recommend you to include the following additional CSS on your page
input.ui-pg-input { width: auto; }
See additionally another answer on the close subject.
Related
I have a JQgrid, i click to add a row and editform opens.
In the editform I have 2 select, loaded using php and mysql.
When I change the first select, i need to reload the 2nd select passing the new id.
I managed to make it work, but I lose bootstrap style and alignment.
Could anybody help me? Id would be fine like i did but I just want to reload the new dataurl, I don't want to lose the style and alignment.
thank you!
$("#gDett").jqGrid({
regional:lingua_attiva,
url:'include/dettagli/grid_esiti_sped.php?idquery=1',
datatype: "json",
mtype: 'GET',
colNames:['ID',
],
colModel :[
{name:'ID', index:'ID', width:80, sortable:false, hidden:true},
{name:'IdUtenteEsi', index:'IdUtenteEsi', width:200, sortable:false, hidden:true,
stype:'select', searchoptions:{dataUrl:'include/dettagli/trovautenti.php'},
editable:true, edittype:'select',
editoptions:{
dataUrl:'include/dettagli/trovautenti.php',
dataEvents: [
{type: 'change',
fn: function (e) {
$("#tr_TipoCella").load('include/dettagli/trovatipicella.php?IdUtente=' + e.target.value);
}
}
]
},
editrules:{required: true, edithidden: true}
},
{name:'TipoCella', index:'TipoCella', width:200, sortable:false, hidden:true,
stype:'select', searchoptions:{dataUrl:'include/dettagli/trovatipicella.php'},
editable:true, edittype:'select',
editoptions:{
dataUrl:'include/dettagli/trovatipicella.php',
postData: function (rowid) {
return {
action: "getState",
IdUtente: $(this).jqGrid("getCell", rowid, "IdUtenteEsi")
};
}
},
editrules:{required: true, edithidden: true}
}
],
editurl:'include/dettagli/grid_esiti_sped.php?idquery=2',
pager: '#pDett',
rowNum:100,
rowList:[10,20,30,50,100],
sortname: '',
sortorder: '',
viewrecords: true,
gridview: true,
caption: 'Service status',
autowidth:false,
shrinkToFit: false,
forceFit:false,
width:'860',
height:'200',
altRows: false,
hiddengrid:false,
hidegrid:false
});
),
I am having an issue with using inline editing in jqGrid. I am switching some grids from form editing to inline editing. The mechanics of the inline editing works fine, but I am trying to send additional data back to the server when I save (I used postData to do this when I was using form editing). I have set the editParams to send back additional data and this works if I edit the record by clicking the edit pencil and save by clicking the save icon in the nav bar. Howerver, I have noticed that when I set keys: true so that I can use Escape/Enter to cancel/save the record and/or if I initiate record editing by double-clicking the row, the editParams are not processed/sent to server. I think this is because the editParams are set up in the click event of the edit button - should I be leveraging this somehow?
Am I missing something? Appreciate any help in fixing my code.
Here is my grid code:
jQuery(document).ready(function() {jQuery('#grdRateEntries')
.jqGrid({
url: 'myUrl',
mtype: 'POST',
datatype: 'xml',
loadonce: false,
editurl: 'myEditUrl',
colNames: [
'ID', '', 'Type', 'Reported', 'Actual', 'Notes', 'Available', 'Paid', 'RateID'],
colModel: [
{name: 'id', index:'id', hidden:true, editable:false, key:true},
{ name: 'act', index: 'act', width: ($.browser.webkit ? 40 : 35), align: 'center', sortable: false, formatter: 'actions',
formatoptions: {
keys: false, // we want to use [Enter] key to save the row and [Esc] to cancel editing.
//delOptions: myDelOptions
delbutton: false,
editbutton: false
}
},
{name:'ddlType', index:'ddlType', width:200, editable:true, edittype:'select', editrules:{required:true}, editoptions:{label:'Type', dataInit:function(el){InitType(el);}, value:':-- Select --;' }},
{name:'ReportedUnits', index:'ReportedUnits', width:200, editable:true, editoptions:{size:10}, editrules:{number:true, required:true}},
{name:'ActualUnits', index:'ActualUnits', width:200, editable:true, editoptions:{size:10}, editrules:{number:true, required:true}},
{name:'Notes', index:'Notes', width:200, editable:true, editrules:{required:true}, editoptions:{rows:'2', cols:'30'}, edittype:'textarea'},
{name:'Available', index:'Available', edittype:'checkbox', width:100, editable:true},
{name:'Paid', index:'Paid', edittype:'checkbox', width:100, editable:false, editoptions:{size:25}},
{name:'TypeID', index:'TypeID', hidden:true, editable:false}
],
recreateForm: false,
multiselect: false,
multiboxonly: false,
pager: jQuery('#pggrdRateEntries'),
rowNum:10,
rownumbers:true,
rowList:[5, 10, 20, 50],
sortname:'Id',
sortorder:'ASC',
viewrecords:true,
grouping:false,
imgpath:'',
caption:'',
autowidth:true,
shrinktofit:false,
toolbar: [true, 'top'],
postData:{entityId:1,employeeid:24,clientid:6},
ondblClickRow: function(id)
{
if(id){ jQuery('#grdRateEntries').jqGrid('restoreRow',lastSel); jQuery('#grdRateEntries').jqGrid('editRow',id,true); lastSel=id; }
},
loadComplete: function()
{
grid.setGridHeight('auto');
grid.setGridWidth(700, false);
var iCol = GetColumnIndexByName($('#grdRateEntries'), 'act');
$(this).find('>tbody>tr.jqgrow>td:nth-child(' + (iCol + 1) + ')')
.each(function(ndx) {
$('<div>', {
title: 'Set Actual=Reported',
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click: function(e) {
var selRowId = $(this).parents('tr').attr('id'); //$('#grdRateEntries').jqGrid('getGridParam', 'selrow');
var reportedVal = $('#grdRateEntries').jqGrid('getCell', selRowId, 'ReportedUnits');
$('#grdRateEntries').jqGrid('setCell', selRowId, 'ActualUnits', reportedVal);
}
}
).css({'margin-right': '5px', float: 'left', cursor: 'pointer'})
.addClass('ui-pg-div ui-inline-custom')
.append('<span class="ui-icon ui-icon-copy"></span>')
.prependTo($(this).children('div'));
});
}
});
$('#grdRateEntries').navGrid(
'#pggrdRateEntries',
{
add: false,
edit: false,
del: true,
refresh: true,
search: false,
view: false,
edittitle: 'Edit selected record',
addtitle: 'Add new record',
deltitle: 'Delete selected record',
cloneToTop:true,
closeOnEscape:true
}, // use default settings
grdRateEntrieseditOptions,
grdRateEntriesaddOptions,
grdRateEntriesdeleteOptions, // use default settings for delete
grdRateEntriessearchOptions
);
$('#grdRateEntries').jqGrid('inlineNav',
'#pggrdRateEntries',
{
editParams: {keys: false, extraparam: {entityId:1,employeeid:24,clientid:6}}
}
);
Thanks very much for any assistance!
you have the following call back functions for inline editing. in the place of "extraparam" you can set the parameters which you want to send.
jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
The column for multiselect is saved in the grid param and when I reload the grid using a saved state(getGridParam) I get a double column for selection that messes up my column order.
My grid before I load param
After
here is the code :
jQuery("#list2").jqGrid({
url:'jqgrid/server.php?q=2',
datatype: "json",
colNames:['a','UID','Phone', 'Message', 'created','replyed'],
colModel:[
{name:'action',index:'action', width:55,search:false,'sortable':false},
{name:'id',index:'uid', width:55},
{name:'phone_number',index:'phone_number', width:90,'editable':true},
{name:'message',index:'message', width:500,'editable':true},
{name:'created',index:'created', width:80, align:"right",'editable':true,stype:'select',edittype:"select",editoptions: {value:"Yes:Yes;No:No"}},
{name:'replyed',index:'replyed', width:80, align:"right",'editable':true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
],
rowNum:50,
toolbar: true,
height: '100%',
width: 800,
rowList:[10,20,50,100,300,1000],
pager: '#pager2',
sortname: 'uid',
sortable:true,
viewrecords: true,
sortorder: "desc",
caption:"Pilote",
gridview : true,
multiselect: true,
});
function saveStateGrid(){
state = $('#list2').getGridParam();
localStorage.setItem("gridState", JSON.stringify(state));
}
function loadStateGrid(){
state = JSON.parse(localStorage.getItem('gridState'));
jQuery("#list2").GridUnload("#list2");
//state.multiselect = false;
$('#list2').jqGrid(state);
$('#list2').trigger('reloadGrid');
}
I have read all the topics regarding this, and it appears that I constructed it correctly. But still the setColProp has no effect. What I am missing here? Please help. I'm using jqGrid 4.4
var grid = $("#l-drill-emp-grid")
var pager_id = 'l-drill-emp-pager';
grid.jqGrid({
data : drillgrid.rows,
datatype: "local",
colNames: ['date', 'day', 'time_In', 'time_Out', 'late','underTime', 'overTime', 'unpaidLV', 'timeOff' ],
colModel: [
{name:'date',index:'date', width:120, sorttype:'date'},
{name:'day',index:'day', width:70, align:"center", sorttype:'text'},
{name:'time_in',index:'time_in', width:80, align:"center"},
{name:'time_out',index:'time_out', width:80, align:"center"},
{name:'late',index:'late', width:80, align:"center"},
{name:'ut',index:'ut', width:80, align:"center"},
{name:'ot',index:'ot', width:80, align:"center"},
{name:'ulv',index:'ulv', width:80, align:"center"},
{name:'timeoff',index:'timeoff', width:80, align:"center"},
],
rowNum:15,
rowList:[10,15,20,30],
viewrecords: true,
loadonce: true,
pager: pager_id,
sortname: 'date',
sortorder: "desc",
height: '100%',
altRows: true,
altclass: 'oddRow',
gridComplete: function() {
grid.find(".jqgrow:odd").hover(
function() { $(this).removeClass("oddRow");},
function(event) { $(this).addClass("oddRow");}
);
},
loadComplete: function(data) {
grid.jqGrid('setColProp', 'date', {
align: "center"
});
},
});
Did you try to change other colModal options? I mean, any other than align? Because according to the documentation there are some properties that may not change.
Read this.
How to disable field column in jqgrid?
this is my code :
jQuery("#penanggungJawab").jqGrid({
mtype: "GET",
datatype:"json",
height: 50,
width:900,
colNames:['ID Card','Type Id Card','NO Id Card', 'Expired Date'],
colModel:[ {
name:'idCardIdPnggungJwb',
index:'idCardIdPnggungJwb',
width:310,
editable:true,
hidden:false,
***disabled:true***
}, {
name:'typeIdCardPnggungJwb',
index:'typeIdCardPnggungJwb',
width:310,
editable:true,
edittype:"select",
editoptions:{value:"KTP:KTP;IDC:ID Card Company"},
jsonmap:'typeIdCard'
}, {
name:'nomorIdCardPnggungJwb',
index:'nomorIdCardPnggungJwb',
width:310,
editable:true
},{
name:'expiredDatePnggungJwb',
index:'expiredDatePnggungJwb',
width:310,
editable:true,
editoptions:{size:12, dataInit:function(el) {
$(el).datepicker({dateFormat:"yy/mm/dd",changeMonth: true,changeYear: true});
},
}}],
rowNum:10,
rowList:[10,20,30],
pager: '#Keuangan',
sortname: 'typeIdCardPenanggungJawabKeuangan',
viewrecords: true,
sortorder: "desc",
caption:"Grid No Kartu Identitas",
editurl: "noabjad.json"
}); jQuery("#penanggungJawab").jqGrid('navGrid','#Keuangan',{
del:false,
search:false,
edit:false
},{
reloadAfterSubmit:false
},{
reloadAfterSubmit:false
});
Can I disable one of the columns, that can not be edited?
If I understand your requirements correct you need use
editoptions: {disabled: true}
option for the 'idCardIdPnggungJwb' column. The results you will see here.