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.
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 have a jqgrid and I want to reset the grid data when it is ready.I have a reason for doing this. My actual problem is complicated but here is a simple demo I created.
Here is a demo I created but the issue is that setting data on loadcomplete does not seem to show the data in the grid. The grid is just empty.
var mydata =
[
{id:"1", DocGroupName: "x", DocList: "y", Mandatory: "z"}
];
var mydata2 = [
{id:"2", DocGroupName: "yy", DocList: "rr", Mandatory: "gg"},
{id:"3", DocGroupName: "zz", DocList: "rr", Mandatory: "gg"}
];
$("#list").jqGrid({
datatype: "local",
data: mydata,
height: "auto",
colNames: ['id', 'Document Group Name','Document Name','No of Mandatory'],
colModel :[
{name:'id', index:'id', width:55},
{name:'DocGroupName', index:'DocGroupName', width:90, editable: true},
{name:'DocList', index:'DocList', width:90, editable: true },
{name:'Mandatory', index:'Mandatory', width:90, editable: true}
],
loadComplete: function(data)
{
$('#list').jqGrid('clearGridData').jqGrid('setGridParam', {
data: mydata
}).trigger('reloadGrid', [{ page: 1 }]);
},
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray'
});
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');
}
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.
I have the following block of code:
$("#searchlist").jqGrid({
url:'./searchlibrary',
datatype: 'json',
mtype: 'POST',
postData: {type: function(){return $('select[name="searchtype"]').val();},
criteria: function(){return getSearchData();}
},
colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
colModel :[
{name:'resourceName', index:'resourceName', width:380, align:'left'},
{name:'unit', index:'unitID', width:40, align:'center',sortable:true},
{name:'topic', index:'topicID', width:220, align:'center',sortable:true},
{name:'docType', index:'docTypeID', width:97, align:'center',sortable:true},
{name:'contentType', index:'contentTypeID', width:97, align:'center',sortable:true},
{name: 'select', index:'resourceID', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", editoptions: { value:"Yes:No", defaultValue:"No" }, formatter:"checkbox",formatoptions: {disabled : false}}
],
rowNum:20,
sortname: 'resourceName',
sortorder: 'asc',
viewrecords: true,
gridview: true,
width:878,
height:251,
loadComplete: function(data){
initCheckboxes();
$('input[type="checkbox"]').click(function(ev){
initCheckboxes();
});
}
});
The data loads just fine, however when I click the various column headers they don't sort. The loading box shows up briefly over the data, but the columns never actually re-sort. The only column that the sort works on is the very first column. Any help would be greatly appreciated.
The index property you set for other columns are different compared to the column name. When you sort a particular column jQGrid passes the value you set at the index as the sort parameter (sidx).
$("#searchlist").jqGrid({
...
colModel :[
{name:'resourceName', index:'resourceName', width:380, align:'left'},
{name:'unit', index:'unit', width:40, align:'center',sortable:true},
{name:'topic', index:'topic', width:220, align:'center',sortable:true},
{name:'docType', index:'docType', width:97, align:'center',sortable:true},
{name:'contentType', index:'contentType', width:97, align:'center',sortable:true},
{name: 'select', index:'select', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", editoptions: { value:"Yes:No", defaultValue:"No" }, formatter:"checkbox",formatoptions: {disabled : false}}
],
...
});