ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: lsl on January 29, 2014, 01:36:30 pm
-
we are trying to use the grid to show and edit dates with editor
1. our raw DB will returns UTC date format when queried, e.g. "2014-01-26T10:32:28"
2. although we set the datatype to "date" in column model, the date do not auto fomat itself, it just show out the whole UTC date like a string, so we add a renderer to format the date to dd/MM/yyyy
3. to let users to use datepicker when changing the date, we further add a datepicker to the editor in column model.
and when we double click the cell, the date-picker shown and works without any problems.
however, we find that the input box of the datepicker is still the UTC date "before" the rendered value, it just show out the word "2014-01-26T10:32:28".
we further make another column NOT using the datepicker editor, the result is the same, the changable div is showing "2014-01-26T10:32:28" too.
attached the screen and code
@using WebMatrix.Data;
@{
if(Request["action"]=="data")
{
var xdatatoshow = @"[{""rank"":1, ""company"":""Exxon Mobil"",""revenues"": ""339,938.0"",""profits"": ""36,130.0"", ""date"": ""2014-01-26T10:32:28""},{""rank"":2, ""company"":""Wal-Mart Stores"",""revenues"": ""315,654.0"", ""profits"":""11,231.0"", ""date"": ""2014-01-26T10:32:28""},{""rank"":3, ""company"":""Royal Dutch Shell"", ""revenues"":""306,731.0"", ""profits"":""25,311.0"", ""date"": ""2014-01-26T10:32:28""},{""rank"":4, ""company"":""BP"", ""revenues"":""267,600.0"",""profits"": ""22,341.0"", ""date"": ""2014-01-26T10:32:28""},{""rank"":5, ""company"": ""General Motors"",""revenues"": ""192,604.0"", ""profits"":""-10,567.0"", ""date"": ""2014-01-26T10:32:28""}]";
@Html.Raw(xdatatoshow)
}
else
{
<html lang="en">
<head>
<link rel="stylesheet" href="./pqgrid/jquery-ui.css">
<script type="text/javascript" async="" src="./pqgrid/ga.js"></script>
<script src="./pqgrid/jquery-2.0.3.min.js"></script>
<script src="./pqgrid/jquery-ui.min.js"></script>
<script type="text/javascript" src="./pqgrid/shCore.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushJScript.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushxml.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushcSharp.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushcss.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushphp.js"></script>
<link type="text/css" rel="stylesheet" href="./pqgrid/shCoreDefault.css">
<link type="text/css" rel="stylesheet" href="./pqgrid/syntaxhighlighter.css">
<link rel="stylesheet" href="./pqgrid/pqgrid.min.css">
<script src="./pqgrid/touch-punch.js"></script>
<script src="./pqgrid/pqgrid.min.js"></script>
<script src="./pqgrid/localize/pq-localize-zh.js"></script>
<script src="./pqgrid/localize/pq-localize-es.js"></script>
<script src="./pqgrid/localize/pq-localize-it.js"></script>
<script src="./pqgrid/localize/pq-localize-ja.js"></script>
<script src="./pqgrid/localize/pq-localize-hu.js"></script>
<script src="./pqgrid/localize/pq-localize-nl.js"></script>
<script src="./pqgrid/localize/pq-localize-de.js"></script>
</head>
<body>
<div id="TESTGRID1"></div>
<script>
var dateEditor = function (ui) {
var $cell = ui.$cell,
rowData = ui.rowData,
dataIndx = ui.dataIndx,
cls = ui.cls,
dc = $.trim(rowData[dataIndx]);
$cell.css('padding', '0');
var $inp = $("<input type='text' id='" + dataIndx + "' name='" + dataIndx + "' class='" + cls + " pq-date-editor' style='position: relative; z-index: 100;border: 3px solid rgba(0,0,0,0);'/>")
.appendTo($cell)
.val(dc).datepicker({
changeMonth: true,
changeYear: true,
dateFormat:"dd/mm/yy",
onClose: function () {
$inp.focus();
}
});
}
var dataM = {
location: "remote"
,sorting: "remote"
,paging: "local"
,dataType: "JSON"
,method: "POST"
,getData: function (dataJSON) {var data = dataJSON; return {data: data };}
,url: "g_grid_test2.cshtml?action=data"
,recIndx:"rank"
};
var obj = {
width:1200,
height:150,
editable: true,
title:"Checkbox selections",
selectionModel: { type: 'none' },
minWidth: 30,
colModel:
[
{ title: "Rank", width: 100, dataType: "integer",dataIndx:"rank"},
{ title: "Company", width: 200, dataType: "string", dataIndx:"company"},
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx:"revenues" },
{ title: "Profits ($ millions)", width: 150, dataType: "float", align: "right", dataIndx:"profits" },
{ title: "Date", dataIndx: "date", width: 150, align: "center", dataType: "date", resizable: false
,render: function (ui) {
if (ui.cellData==null)
{
return '';
}
else
{
console.log(ui.cellData);
var date = new Date(ui.cellData);
var xdd = date.getDate();
var xmm = (date.getMonth() + 1);
var xyy = date.getFullYear();
if (parseInt(xdd)<10){xdd='0'+xdd;}
if (parseInt(xmm)<10){xmm='0'+xmm;}
return xdd + '/' + xmm + '/' + xyy;
}
}
,editor: {type: dateEditor}
},
{ title: "Date2", dataIndx: "date", width: 150, align: "center", dataType: "date", resizable: false
,render: function (ui) {
if (ui.cellData==null)
{
return '';
}
else
{
console.log(ui.cellData);
var date = new Date(ui.cellData);
var xdd = date.getDate();
var xmm = (date.getMonth() + 1);
var xyy = date.getFullYear();
if (parseInt(xdd)<10){xdd='0'+xdd;}
if (parseInt(xmm)<10){xmm='0'+xmm;}
return xdd + '/' + xmm + '/' + xyy;
}
}
}
],
dataModel: dataM
,type: dateEditor
};
var $grid = $("#TESTGRID1").pqGrid(obj);
</script>
</body>
</html>
}
}
-
Solution is to reuse render callback to format the date within the editor. Add this code at the end of editor function.
//reuse render callback
window.setTimeout(function () {
var dc = $.trim(ui.column.render(ui));
$inp.val(dc);
}, 0);
Final dateEditor function:
var dateEditor = function(ui) {
var $cell = ui.$cell,
rowData = ui.rowData,
dataIndx = ui.dataIndx,
cls = ui.cls,
dc = $.trim(rowData[dataIndx]);
$cell.css('padding', '0');
var $inp = $("<input type='text' id='" + dataIndx + "' name='" + dataIndx + "' class='" + cls + " pq-date-editor' style='position: relative; z-index: 100;border: 3px solid rgba(0,0,0,0);'/>")
.appendTo($cell)
.val(dc).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "dd/mm/yy",
onClose: function() {
$inp.focus();
}
});
//reuse render callback
window.setTimeout(function() {
var dc = $.trim(ui.column.render(ui));
$inp.val(dc);
}, 0);
};
-
Thanks and confirmed it is working with your method