how to show a large jpg image to the right in jqGrid's edit form ?
- by cLee
Is it possible to show a large (i.e. bigger than a thumbnail) jpeg image in the right-hand side of jqGrid's edit form ?
Users want to look at a photo while entering data into fields ... they are describing things in the photo.
I'm sure all things are possible with jQuery, but I don't know where to begin.
thanks
... html:
function afterSubmit(r, data, action) {
// if session timeout returned:
if (r.responseText == "logout") {
window.location = '../scripts/logout.php';
}
// if an error message is returned:
if (r.responseText != "") {
$('#submit_errors').html('Alert:'+r.responseText+'');
// show div with error message
$('#submit_errors').slideDown();
// hide error div after 10 seconds
window.setTimeout(function() { $('#submit_errors').slideUp(); }, 10000);
return false; // don't remove this!
}
return true; // don't remove this!
}
var lastsel;
jQuery(document).ready(function(){
var mygrid = jQuery("#mobile_incidents").jqGrid({
url:'list.php?q=e',
editurl:'edit.php',
datatype: "json",
// note: all column names are required even though some columns are hidden
colNames:['Rec#','Date','Line','Photo'],
colModel:[{ name:'id', index:'id', editable:true, editoptions: {readonly:'readonly'} },
{ name:'mobile_discoveryDate', index:'mobile_discoveryDate', sortable:false,
editable:true, edittype:'text',
formatter:'date', formatoptions:{ srcformat:'Y/m/d', newformat:'m/d/Y' },
editoptions:{ size:12, maxlength:10,
dataInit: function(element) {
$(element).blur();
$(element).datepicker({dateFormat:'mm/dd/yyyy'})
}
}
},
{ name:'mobile_lineName', index:'mobile_lineName', editable:true, sortable:false},
{ name:'mobile_photo_name', index:'mobile_photo_name', editable:false, sortable:false}
],
pager: '#mobile_incidents_pager',
altRows: false,
rowNum:10,
rowList:[10,20],
imgpath: '../include/images/jqgrid',
viewrecords: true,
emptyrecords:'No submissions found!',
height: 260,
sortname: 'id',
sortorder: 'desc',
gridview: true,
scrollrows: true,
autowidth: true,
rownumbers: false,
multiselect: false,
subGrid:false,
caption: ''
})
.navGrid('#mobile_incidents_pager',
// params:
{add:false, edit:true, del:false, search:false, view:false, refresh:true,
alertcap:' to edit:', alerttext:' . . . click on a row to highlight'
},
// edit params:
{top:50, left:5,
editCaption: 'Edit Submission', bSubmit: 'Approve/Save',
closeAfterEdit:true,
afterSubmit:function(r,data){return afterSubmit(r,data,'edit');}
},
{}, // add params
{}, // delete params
// search params:
{multipleSearch: false},
// view params:
{top: 150, left: 5, caption: 'View Mobile Rail Submission'}
);
});
