jqGrid with multiselect:true and reloadGrid double checkbox column - jqgrid

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');
}

Related

JQGrid - How can i reload the dataurl of one select based on another select

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
});

editParams not sent/processed when keys set to true on inline grid

),
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);

jqgrid, alert with arror after failet add record to database

it's my code:
<script type="text/javascript">
var grid = $("#list");
$(function(){
var grid = $("#list");
grid.jqGrid({
url:'grid.php',
datatype: 'xml',
mtype: 'GET',
colNames:['ID sprzętu','Kod sprzętu', 'Właściciel','Konfiguracja'],
colModel :[
{name:'SprzetID', index:'SprzetID', width:90},
{name:'Kod', index:'Kod', width:120, editable: true},
{name:'Wlasciciel', index:'Wlasciciel', width:200, align:'left', editable: true},
{name:'Konfiguracja', index:'Konfiguracja', width:400, align:'left', editable: true},
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'SprzetID',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Lista sprzętu'
});
grid.jqGrid('navGrid','#pager',
{add: true, edit: true, del: true, search: true}, //options
{width:400, }, // edit options
{width:400,closeAfterAdd: true, url:'add.php'}, // add options
{reloadAfterSubmit:false}, // del options
{width:600} // search options
);
});
All is great, when adding record to database is correctly, but when for example field "Kod" is duplicate (it's unique field), record can't be add to database... and isn't. I want to display alert with error message, but I can't find in documentation how to do it... I gues,I should use "afterSubmit", but how... I don't know.
Resolved. In add parameters I added code:
afterSubmit: function(response, postdata) {
if(response.responseText != ""){
return [false, response.responseText];
}else{
return [true,"Ok"];
}}

jqgrid rowlist dropdown missing

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.

How to disable field column in jqgrid?

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.

Resources