hi Paramvir
i am stuck with this issue. I want to display and edit the date in Swiss Format like dd.mm.yyyy
I tried to alter your demo project i found under "Inline-Editing"-"Editor and Validations" in the Pro-Demo section; here my altered code, but data-validation still claims: "not in date format"
have a look at lines 51,161,266
code:
$(function () {
var books = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function autoCompleteEditor( source ) {
return function (ui) {
ui.$cell.addClass('ui-front');//so that dropdown remains with input.
//initialize the editor
ui.$editor.autocomplete({
//appendTo: ui.$cell, //for grid in maximized state.
source: source,
position: {
collision: 'flipfit',
within: ui.$editor.closest(".pq-grid")
},
selectItem: { on: true }, //custom option
highlightText: { on: true }, //custom option
minLength: 0
}).focus(function () {
//open the autocomplete upon focus
$(this).autocomplete("search", "");
});
}
}
function dateEditor(ui) {
var $inp = ui.$cell.find("input"),
grid = this,
format = ui.column.format || "dd.mm.yy",
val = $.datepicker.formatDate(format, new Date($inp.val()));
//initialize the editor
$inp
.attr('readonly', 'readonly')
.val(val)
.datepicker({
changeMonth: true,
changeYear: true,
dateFormat: format,
showAnim: '',
onSelect: function () {
this.firstOpen = true;
},
beforeShow: function (input, inst) {
setTimeout(function () {
//to fix the issue of datepicker z-index when grid is in maximized state.
$('.ui-datepicker').css('z-index', 999999999999);
});
return !this.firstOpen;
},
onClose: function () {
this.focus();
}
});
}
var colM = [
{
title: "Ship Country", dataIndx: "ShipCountry", width: 120,
cls: 'pq-dropdown pq-side-icon',
editor: {
type: "textbox",
init: autoCompleteEditor( "/pro/demos/getCountries" )
},
validations: [
{ type: 'minLen', value: 1, msg: "Required" },
{
type: function (ui) {
var value = ui.value,
_found = false;
//remote validation
//debugger;
$.ajax({
url: "/pro/demos/checkCountry",
data: { 'country': value },
async: false,
success: function (response) {
if (response == "true") {
_found = true;
}
}
});
if (!_found) {
ui.msg = value + " not found in list";
return false;
}
}
}
]
},
{
title: "Books", dataIndx: "books", width: 90,
cls: 'pq-dropdown pq-side-icon',
editor: {
type: "textbox",
init: autoCompleteEditor( books )
},
validations: [
{ type: 'minLen', value: 1, msg: "Required" },
{
type: function (ui) {
var value = ui.value;
if ( books.indexOf( value ) == -1) {
ui.msg = value + " not found in list";
return false;
}
}, icon: 'ui-icon-info'
}
]
},
{
title: "Fruits", dataIndx: "fruits", width: 140,
//custom editor.
editor: {
options: ['Apple', 'Orange', 'Kiwi', 'Guava', 'Grapes'],
type: function (ui) {
//debugger;
var options = ui.column.editor.options,
str = options.map(function (option) {
var checked = (option == ui.cellData)? 'checked = checked': '';
return "<input type='radio' " + checked + " name='" + ui.dataIndx + "' style='margin-left:5px;' value='" + option + "'> " + option;
}).join("");
ui.$cell.append("<div class='pq-editor-focus' tabindex='0' style='padding:5px;margin-top:1px;'>" + str + "</div>");
},
getData: function (ui) {
return ui.$cell.find('input:checked').val();
}
}
},
{
title: "Order ID", width: 100, dataIndx: "OrderID",
editor: {
type: "textbox",
//make it html5 number editor.
attr: "type='number'"
}
},
{
title: "Order Date", width: "120", dataIndx: "OrderDate", dataType: 'string', format: 'dd.mm.yy',
cls: 'pq-calendar pq-side-icon',
editor: {
type: 'textbox',
init: dateEditor,
getData: function (ui) {
//convert from column format to native js date format "mm/dd/yy"
var dt = $.datepicker.parseDate(ui.column.format, ui.$cell.find("input").val());
return $.datepicker.formatDate("dd.mn.yy", dt);
}
},
validations: [
{ type: 'regexp', value: '^[0-9]{2}.[0-9]{2}.[0-9]{4}$', msg: 'Not in date format' }
]
},
{ dataIndx: 'ShipViaId', hidden: true }, //hidden column to store ShipVia Id.
{
title: "Shipping Via", dataIndx: "ShipVia", width: 110,
cls: 'pq-dropdown pq-side-icon',
editor: {
type: 'select',
init: function (ui) {
ui.$cell.find("select").pqSelect();
setTimeout(function () {
ui.$cell.find("select").pqSelect('open');
})
},
valueIndx: "value",
labelIndx: "text",
mapIndices: { "text": "ShipVia", "value": "ShipViaId" },
options: [
{ "value": "", "text": "" },
{ "value": "SE", "text": "Speedy Express" },
{ "value": "UP", "text": "United Package" },
{ "value": "FS", "text": "Federal Shipping" }
]
},
validations: [{ type: 'minLen', value: 1, msg: "Required" }]
},
//another column with select editor having options in key: value pairs format.
{
title: "Shipping Via2", dataIndx: "ShipVia2", width: 110,
cls: 'pq-dropdown pq-side-icon',
editor: {
type: 'select',
init: function (ui) {
ui.$cell.find("select").pqSelect();
setTimeout(function () {
ui.$cell.find("select").pqSelect('open');
})
},
options: [
{ "SE": "Speedy Express" },
{ "UP": "United Package" },
{ "FS": "Federal Shipping" }
]
},
//render required to display options text corresponding to value stored in the cell.
render: function (ui) {
var option = ui.column.editor.options.find(function (obj) {
return (obj[ui.cellData] != null);
});
return option ? option[ui.cellData] : "";
},
validations: [
{ type: 'minLen', value: 1, msg: "Required" },
{
type: function (ui) {
var value = ui.value, option = ui.column.editor.options.find(function (obj) {
return (obj[value] != null);
});
if (!option) {
ui.msg = value + " not found in list";
return false;
}
}, icon: 'ui-icon-info'
}
]
},
{
title: "Freight", dataIndx: "Freight", dataType: "float", width: 100, format: '$#,###.00',
editor: { select: true },
validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }],
editModel: { keyUpDown: true }
},
{
title: "Shipping Address", width: 200, dataIndx: "ShipAddress",
editor: {
type: "textarea"
},
editModel: {
saveKey: '' //disable or set it to some other key code to free up use of Enter key for line breaks.
},
validations: [{ type: 'minLen', value: 1, msg: "Required" }]
}
];
var dataModel = {
location: "remote",
dataType: "JSON",
method: "GET",
url: "/content/invoice.json",
getData: function (response) {
response.data.forEach(function (rd) {
//make ShipAddress multiline text.
rd.OrderDate=rd.OrderDate.split('/')[1]+'.'+rd.OrderDate.split('/')[0]+'.'+rd.OrderDate.split('/')[2]
rd.ShipAddress = rd.ShipAddress + "\n" + rd.ShipCity + "\n" + (rd.ShipRegion || "") + "\n" + rd.ShipPostalCode;
})
return response;
}
}
$("div#grid_custom_editing").pqGrid({
title: "Shipping Orders <b>(Custom editing)</b>",
dataModel: dataModel,
colModel: colM,
autoRow: true,
scrollModel: { autoFit: true },
columnTemplate: {
valign: 'center'
},
create: function (evt, ui) {
this.widget().pqTooltip();
},
editModel: {
clicksToEdit: 1,
keyUpDown: false
},
numberCell: { show: false },
resizable: true
});
});
