First, I'm going to be submitting a couple of different questions that relate to the code snippet posted here. So, if you see other questions and think "hey, that's a duplicate, I've seen that code" it really isn't. I want to be sure to credit each answerer for the distinctly different questions.
Here's one: I have the following jqgrid, and I'm trying to change the masking from "__" to "00" when the user only enters the first half of the field. The method gets called, the value changed, but it still displays the old value. I'm using jqgrid version 4.2.
Grid:
WorkSchedule.prototype.init = function() {
var self = this;
self.jqgridParms = {
datatype: "local",
height: 'auto',
width: 700,
colNames: ["Week", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Total"],
colModel: [// very much dummy stuff here.
{name: "Week", index: "Week", width: 50, editable: false },
{ name: "Sun", index: "Sun", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
}, align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "Mon", index: "Mon", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
}, align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "Tues", index: "Tues", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
},
align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "Wed", index: "Wed", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
},
align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "Thurs", index: "Thurs", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
},
align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "Fri", index: "Fri", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
},
align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "Sat", index: "Sat", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
dataInit: function(elem) {
$(elem).mask("99:99");
}
},
align: "center", formatter: timeEntryFormat, editrules: { custom: true, custom_func: validHourEntry }
},
{ name: "WeekTotal", index: "WeekTotal", width: 55, editable: true, align: "center" }
],
multiselect: false,
caption: "Manage Work Schedule",
rowNum: 10,
cellEdit: true,
gridComplete: function() {
calculateTotal();
},
beforeSaveCell: function(rowid,cellname,value,iRow,iCol) {
formatFromMask(rowid, cellname, value, iRow, iCol);
},
afterSaveCell: function() {
calculateTotal();
},
cellsubmit: "clientArray"
}
}
function formatFromMask(rowid, cellname, value, iRow, iCol) {
if (typeof value !== "undefined") {
value = value.replace(/_/g, "0");
return value;
}
}
Ok, I found the simple answer, which is to set the mask to "00:00". It brings up a separate issue, but solves the problem here.
Related
I need to able to tap into an event after row has been updated, I use inline editing. There is a beforeSend event in ajaxRowOptions but no matching after.
How do I implement an after save callback?
Here is my grid:
$('#myGrid').jqGrid({
datatype: 'local',
jsonReader: common.jqgrid.jsonReader('Code'),
editurl: common.getServerPath() + 'myAjax/updateSomething/',
ajaxRowOptions: {
beforeSend: function (jqXhr, settings) {
//something here
}
}
},
mtype: 'POST',
pager: '#myPager',
colNames: ['Method', 'Type', 'Package', 'Disc %'],
colModel: [
{
name: 'Code',
index: 'Code',
width: 25,
sortable: false
},
{
name: 'MethodType',
index: 'MethodType',
width: 10,
sortable: false,
align: 'center'
},
{
name: 'ProfNo',
index: 'ProfNo',
width: 15,
sortable: false,
align: 'center'
},
{
name: 'Discount',
index: 'Discount',
width: 15,
sortable: false,
edittype: 'text',
align: 'right',
editable: true,
editrules: {
number: false,
custom: true,
custom_func: validateDiscount
}
}],
scroll: true,
hidegrid: false,
altRows: true,
altclass: 'gridAltRowClass',
height: 330,
scrollOffset: 0,
width: 770,
rowNum: 500,
footerrow: true,
userDataOnFooter: true
});
and
validateDiscount: function (value) {
if (isNaN(value)) {
return [false, 'Discount must be a number.'];
}
else {
var numValue = parseFloat(Number(value).toFixed(2));
if (numValue >= 100.00) {
return [false, 'is not a valid value. Discount must be a number less than 100.'];
}
}
return [true, ''];
},
I have added a search textbox which allows users to perform search on all rows and columns now i want to get all the filtered rows in json format so i can generate a report.
Below is the code for Jqgrid
var grid = $("#jqGrid");
grid.jqGrid({
url: 'VehicleMaster.aspx/GetLoadData',
mtype: 'POST',
datatype: 'json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function(postData) {
return JSON.stringify(postData);
},
ajaxSelectOptions: { type: "GET" },
jsonReader: {
repeatitems: false,
root: function(obj) {
return JSON.parse(obj.d);
}
},
loadonce: true,
sortable: true,
shrinkToFit: false,
autowidth: true,
rowNum: 25,
rowList: [15, 25, 50, 75, 100],
viewsortcols: [true, 'vertical', true],
pager: '#pager',
pgtext: "Page from {0} to {1}",
styleUI: 'Bootstrap',
height: $(window).height() - (343), //DYNAMIC HEIGHT
loadComplete: function() {
$(this).find(" > tbody > tr.jqgrow:odd").addClass("altRowClassEven");
$(this).find(" > tbody > tr.jqgrow:even").addClass("altRowClassOdd");
},
colNames: gridColumnNames, //FROM BACKEND
colModel: [
{ label: 'Id', name: 'Id', width: 130, editable: false, hidden: true },
{ label: 'VehicleName', name: 'VehicleName', width: 130, editable: false },
{ label: 'PlateCode', name: 'PlateCode', editable: true, width: 100 },
{
label: 'PlateNo',
name: 'PlateNo',
editable: true,
width: 100,
editoptions: {
dataInit: function(domElem) {
$(domElem).keyup(function() {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
}
}
},
{ label: 'Owner', name: 'Owner', editable: true, width: 100 },
{ label: 'Brand', name: 'Brand', editable: true, width: 100 },
{ label: 'Color', name: 'Color', editable: true, width: 100 },
{ label: 'Make', name: 'Make', editable: true, width: 100 },
{ label: 'Model', name: 'Model', editable: true, width: 100 },
{ label: 'YearModel', name: 'YearModel', editable: true, width: 100 },
{
label: 'Seats',
name: 'Seats',
editable: true,
width: 100,
editoptions: {
dataInit: function(domElem) {
$(domElem).keyup(function() {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
}
}
},
{
label: 'Doors',
name: 'Doors',
editable: true,
width: 100,
editoptions: {
dataInit: function(domElem) {
$(domElem).keyup(function() {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
}
}
},
{
label: 'RegistrationDate',
name: 'RegistrationDate',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
//$(domElem).inputmask('99/99/9999');
}
}
},
{
label: 'RegistrationExpiry',
name: 'RegistrationExpiry',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{ label: 'ChassisNo', name: 'ChassisNo', editable: true, width: 100 },
{ label: 'EngineNo', name: 'EngineNo', editable: true, width: 130 },
{ label: 'TrafficFileNo', name: 'TrafficFileNo', editable: true, width: 130 },
{ label: 'VehicleType', name: 'VehicleType', editable: true, width: 130 },
{ label: 'InsuranceCompany', name: 'InsuranceCompany', editable: true, width: 160 },
{
label: 'InsuranceDate',
name: 'InsuranceDate',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'InsuranceExpiry',
name: 'InsuranceExpiry',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'PlateIssueDate',
name: 'PlateIssueDate',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{ label: 'Department', name: 'Department', editable: true, width: 130 },
{ label: 'Description', name: 'Description', editable: true, width: 130 },
{
label: 'Column1',
name: 'Column1',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column2',
name: 'Column2',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column3',
name: 'Column3',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column4',
name: 'Column4',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column5',
name: 'Column5',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column6',
name: 'Column6',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column7',
name: 'Column7',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column8',
name: 'Column8',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column9',
name: 'Column9',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column10',
name: 'Column10',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
}
],
multiselect: false,
cellEdit: true,
hiddengrid: false,
loadtext: 'Loading Data...',
sortascimg: 'sort_asc.gif',
sortdescimg: 'sort_desc.gif',
cellsubmit: 'clientArray',
viewrecords: true,
beforeSelectRow: function(rowid) {
console.log(rowid);
if (typeof selectedRows[0] !== "undefined") {
updateSelectedRow(selectedRows[selectedRows.length - 1]);
console.log(selectedRows[selectedRows.length - 1]);
}
selectedRows.push(rowid);
}
});
Below is the code for live search.
$("#globalSearchText").keyup(function() {
var rules = [],
i,
cm,
postData = grid.jqGrid("getGridParam", "postData"),
colModel = grid.jqGrid("getGridParam", "colModel"),
searchText = $("#globalSearchText").val(),
l = colModel.length;
for (i = 0; i < l; i++) {
cm = colModel[i];
if (cm.search !== false && (typeof cm.stype === "undefined" || cm.stype === "text")) {
rules.push({
field: cm.name,
op: "cn",
data: searchText
});
}
}
$.extend(postData, {
filters: {
groupOp: "OR",
rules: rules
}
});
Kindly guide me to resolve this.
Thanks
Hello as title above I have a problem that when I checked my checkedbox name ( $("#divLeaveIsHalfDay").click(function () ) that call the dialog box to open and contains my JQgrid name LeaveHalfDay.
function LeaveHalfDay() {
var url1 = URL;
$("#LeaveHalfDayDataEntryList").jqGrid({
url: url1,
datatype: 'json',
mtype: 'POST',
colNames: ['RowId', 'With Halfday <br /> Morning', 'With Halfday <br /> Afternoon', 'Date', 'Day'],
colModel: [
{ name: 'rowId', index: 'rowId', hidden: true, editable: true, sortable: false, width: 80, align: 'left' },
{name: 'cbox_leave_half', index: 'cbox_leave_half', editable: true, formatter: cboxFormatterLeaveHalfDay, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
{ name: 'cbox_leave_halfPM', index: 'cbox_leave_halfPM', editable: true, formatter: cboxFormatterLeaveHalfDayPM, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
{ name: 'LStartDate', index: 'LStartDate', editable: false, sortable: false, width: 70, align: 'left' },
{ name: 'LDate', index: 'LDate', editable: false, sortable: false, width: 55, align: 'left' }
],
pager: $('#LeaveHalfDayDataEntryPager'),
rowNum: 5,
rowList: [5, 10, 20],
sortname: '',
sortorder: '',
viewrecords: true,
imgpath: '/Content/themes/redmond/images/',
height: '100%',
loadComplete: function (result, rowid) {
var ids = jQuery("#LeaveHalfDayDataEntryList").getDataIDs();
var len = ids.length, newLine;
if (len < 5) {
AddNewRowToGrid(len, "#LeaveHalfDayDataEntryList");
}
}
});
return false;
}
I want to unchecked all checked, checked boxes upon showing of my dialog box.
This are my checked boxes cbox_leave_half and cbox_leave_halfPM in my grid. Thanks.
I wrote a table with JqGrid, but I found every row`s property of table is "tr id = 0" Following is my code and screenshot. What caused this error? Any help will be appreciated.
jQuery(grid_selector).jqGrid({
datatype: "json",
url:"getAllUserInfo.do",
mtype: 'POST',
height: 250,
colNames: ['Operation', 'userID', 'UserName', 'FullName', 'Department', 'Role', 'Telephone', 'MobilePhone', 'Mail', 'Status'],
colModel: [
{name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,search:false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: {recreateForm: true, beforeShowForm: beforeDeleteCallback},
onSuccess:function(respone){
var msg=respone.responseText;
if(msg=='success')
return true;
else
{
alert(msg);
return [false,msg];
}
},
editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback,}
}
},
{name: 'userID', index: 'userID', width: 60, sorttype: "int", editable:false, sortable:false, search:false, align:'center' },
{name: 'userName', index: 'userName', width: 100, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true},align:'center'},
{name: 'fullName', index: 'fullName', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"}},
{name: 'department', index: 'department', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"},editrules:{required:true}},
{name: 'role', index: 'role', width: 70, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']}, editrules:{required:true}},
{name: 'telephone', index: 'telephone', width: 70, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true,number:true}},
{name: 'mobilePhone', index: 'mobilePhone', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'mail', index: 'mail', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'status', index: 'status', width: 60, editable:true, edittype:"text", searchoptions:{sopt:['eq','ne']}}
],
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: pager_selector,
altRows: true,
multiselect: true,
multiboxonly: true,
onCellSelect:function(rowid, e){
},
gridComplete:function (){
$("#grid-table").closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-titlebar")
.css("text-align", "center").css("line-height","40px")
.children("span.ui-jqgrid-title")
.css("float", "none");
},
loadComplete: function () {
var table = this;
setTimeout(function () {
var msg= $("#grid-table").getGridParam('userData');
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
var re_records = $("#grid-table").getGridParam('records');
if(re_records == 0 || re_records == null){
if($(".norecords").html() == null){
$("#grid-table").parent().append("<div class=\"norecords\">No Records</div>");
}
$(".norecords").show();
}
else
{
$(".norecords").hide();
}
},
editurl:"userInfoOperate.do",
caption: "UserList",
autowidth: true,
});
Check it whether rows data has column with "id" as the name, just like the picture shows below. JqGrid will use the value of "id" column in rows data as the id value of tr tags, if it does have an id column in rows data.
Hi bellow is my jqgrid code
function fechaReg(el) {
jQuery(el).datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'hh:mm:ss',
changeYear: true,
changeMonth: true,
numberOfMonths: 1,
timeOnlyTitle: 'Seleccione Horario',
timeText: 'Hora seleccionada',
hourText: 'Hora',
minuteText: 'Minuto',
secondText: 'Segundo',
millisecText: 'Milisegundo',
currentText: 'Ahora',
closeText: 'Listo',
ampm: false
});
}
jQuery("#correspondence").jqGrid({
url: '../ajax/selectdata.php',
editurl: '../ajax/editdata.php',
mtype: 'post',
datatype: "json",
colNames: ['id', 'name', 'total_dept', 'Nombre', 'Fecha y Hora', 'Fecha', 'Hora', 'Consecutivo', 'Tipo de requerimiento', 'Tipo de medio', 'Tipo de Remitente', 'Detalle', 'Observaciones', 'Añadir propiedad', 'Añadir Area'],
colModel: [
{name: 'id', index: 'id', width: 20, align: "right", hidden: true,editable: false, editrules: {required: false}},
{name: 'name', index: 'name', width: 50, editable: true,hidden:true, sorttype: 'text', editrules: {required: true, edithidden: true}},
{name: 'id_corres_property', index: 'id_corres_property', width: 20, align: "right", hidden: true},
{name: 'total_dept', index: 'total_dept', width: 20, align: "right", hidden: true},
{name: 'date_time', index: 'date_time', width: 20, align: "right", hidden: true, editable: true, editoptions: {dataInit: fechaReg, readonly: 'readonly'}, editrules: {required: true, edithidden: true}, search: false},
{name: 'fecha', index: 'fecha', width: 50, editable: false, editrules: {required: true}, search: false},
{name: 'hora', index: 'hora', width: 50, editable: false, editrules: {required: true}, search: false},
{name: 'consecutivo', index: 'consecutivo', width: 55, editable: true, search: false},
{name: 'type', index: 'type', width: 60, editable: true, sorttype: 'text', editrules: {required: true}, edittype: 'select', editoptions: {value: {'': '-seleccione-', Normal: 'Normal', Queja: 'Queja', Reclamo: 'Reclamo', Juridico: 'Juridico',Derecho_de_peticion:'Derecho de peticion'}}},
{name: 'media', index: 'media', width: 50, editable: true, sorttype: 'text', editrules: {required: true}, edittype: 'select', editoptions: {value: {'': '-seleccione-', Email: 'Email', Personal: 'Personal', Mensajero: 'Mensajero', 'Correo certificado': 'Correo certificado', Fax: 'Fax', 'Pag. web': 'Pag. web'}}},
{name: 'sender_type', index: 'sender_type', width: '80', editable: true, editrules: {required: true}, edittype: 'select', editoptions: {value: {'': '-seleccione-', Owner: 'Propietario', Renter: 'Arrendatario', Management: 'Administración', Assignee: 'Codeudor', Garante: 'Apoderado'}},
stype: "select", searchoptions: {value: "*:Todo;Owner:Propietario;Renter:Inquilino;Management:Administración;Assignee:Codeudor;Garante:Apoderado", defaultValue: "*"}
},
{name: 'details', index: 'details', width: 80, editable: true},
{name: 'observations', index: 'observations', width: 80, editable: true, edittype: 'textarea', editoptions: {rows: "2", cols: "60"}},
{name: 'boton_person', index: 'boton_property', sortable: false, width: '50', align: "center", search: false},
{name: 'boton_office', index: 'boton_office', sortable: false, width: '50', align: "center", search: false}
],
gridComplete: function ()
{
var ids = jQuery("#correspondence").jqGrid('getDataIDs');
var allRowsInGrid = jQuery("#correspondence").jqGrid('getRowData');
for (var i = 0; i < ids.length; i++)
{
if (allRowsInGrid[i]['id_corres_property'])
{
aP = "<a class='cursorhand' onClick='setProperty(" + ids[i] + ")' style='cursor:pointer;'><img src='../../../admin/public/images/plus_black.png' width='16' height='16' border='0' title='Añadir propiedad' /></a>";
}
else
{
aP = "<a class='cursorhand' onClick='setProperty(" + ids[i] + ")' style='cursor:pointer;'><img src='../../../admin/public/images/plus_green.png' width='16' height='16' border='0' title='Añadir propiedad' /></a>";
}
jQuery("#correspondence").jqGrid('setRowData', ids[i], {boton_person: aP});
if (allRowsInGrid[i]['total_dept'] == 0)
{
aO = "<a class='cursorhand' onClick='setArea(" + ids[i] + ")' style='cursor:pointer;'><img src='../../../admin/public/images/plus_green.png' width='16' height='16' border='0' title='Añadir Oficina' /></a>";
}
else
{
aO = "<a class='cursorhand' onClick='setArea(" + ids[i] + ")' style='cursor:pointer;'><img src='../../../admin/public/images/plus_black.png' width='16' height='16' border='0' title='Añadir Oficina' /></a>";
}
jQuery("#correspondence").jqGrid('setRowData', ids[i], {boton_office: aO});
}
},
width: "1100",
rowNum: 25,
rowList: [10, 20, 30, 40, 50],
pager: '#correspondence-pager',
sortname: 'id',
viewrecords: true,
gridview: true,
reloadAfterSubmit: true,
sortorder: "desc",
caption: " ..:: Correspondencia ::.. ",
search: true
});
jQuery('#correspondence').jqGrid('filterToolbar', {"stringResult": true, "searchOnEnter": false});
jQuery("#correspondence").jqGrid('navGrid', '#correspondence-pager', {edit: true, add: true, del: false, search: false},
{recreateForm: true, width: 500}, {recreateForm: true, width: 500}, {recreateForm: true}, {recreateForm: true}).navButtonAdd('#correspondence-pager', {
caption: "",
buttonicon: "ui-icon-disk",
onClickButton: function () {
var filter = {daterange: "fecha"};
exportFilter("correspondence", 'correspondance', filter);
},
position: "last"
});
My problem is this grid is working fine But I want to customize date time picker
Like if in add mode it should current date and time
But in edit mode it is inserted date and time .
I tried with this function also
function fechaReg(el) {
jQuery(el).datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'hh:mm:ss',
changeYear: true,
changeMonth: true,
numberOfMonths: 1,
timeOnlyTitle: 'Seleccione Horario',
timeText: 'Hora seleccionada',
hourText: 'Hora',
minuteText: 'Minuto',
secondText: 'Segundo',
millisecText: 'Milisegundo',
currentText: 'Ahora',
closeText: 'Listo',
ampm: false
}).datetimepicker("setDate", new Date());
}
But it is getting current date and time all the time (in add and edit also)
please help me .
if any detail is left then feel free to ask
Thanks
Have you tried this way?
editoptions:
{
dataInit: function(el) {
setTimeout(function() {
fechaReg(el);
}, 200);
}
}
You can use setColProp method to display different date time picker in add and edit mode.
you need to create two function for that and in first function for add mode you can use your existing code to insert current datetime whereas in second function you can pass your custom format that you want.
jQuery('#' + jsonObj.grid.htmlTableId).jqGrid('setColProp', jsonObj.grid.editoptions[j].column_name, {
editoptions: {
dataInit: function(e){
}
}
});
By use of above code you can hook editoptions in loadComplete event of grid.