jQWidgets Forums
This topic contains 12 replies, has 3 voices, and was last updated by Vaishnavi P 2 years, 10 months ago.
-
Hi,
I’m using jqxGrid of jQWidgets.
In grid date value is displaying correctly but When I click on edit (popup window) and save it, date format changes.
For example,
In grid date format is “6/10/2022” but in edit window it display’s “Fri Jun 10 2022 18:33:23 GMT+0530 (India Standard Time)”.please let me know how to display date in this format “dd/mm/yyyy” in edit window and to save it in same date format.
<%@ page language=”java” contentType=”text/html; charset=ISO-8859-1″
pageEncoding=”ISO-8859-1″%>
<%@page import=”java.io.*, java.util.Date, java.util.Enumeration” %>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ /><link rel=”stylesheet” href=”../jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../jqwidgets/styles/jqx.arctic.css” type=”text/css” />
<script type=”text/javascript” src=”../scripts/jquery-1.12.4.min.js”></script><script type=”text/javascript”>
$(document).ready(function() {var source = {
datatype: ‘json’,
datafields:
[
{ name: ‘claim_id’, type: ‘int’ },
{ name: ’empCode’, type: ‘string’ },
{ name: ‘name’, type: ‘string’ },
{ name: ‘expenseType’, type: ‘string’ },
{ name: ‘invoiceDate’, type: ‘date’, format: ‘dd/MM/yyyy’ },
{ name: ‘invoiceamount’, type: ‘number’ },
{ name: ‘entitledamount’, type: ‘number’ },
{ name: ‘claimedamount’, type: ‘number’ },
{ name: ‘eremarks’, type: ‘string’ },
{ name: ‘mstatus’, type: ‘string’ },
{ name: ‘mremarks’, type: ‘string’ },
{ name: ‘statusType’, type: ‘string’ },],
updaterow: function (rowid, rowdata, commit) {
var data = $.param(rowdata);{ contentType: ‘application/json; charset=utf-8’ }
var id = $(rowdata).attr(‘claim_id’);
// rowdata.claim_id = rowid;
// alert(“http://localhost:8090/claim/update/”);
alert(id);
alert(data);
$.ajax({
dataType: ‘json’,
url: ‘${pageContext.request.contextPath}/claim/updates/’,
headers : {
‘Accept’ : ‘application/json’,
‘Content-Type’ : ‘application/json’
},
cache: false,
data: data,
method: ‘POST’,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function(jqXHR, textStatus, errorThrown)
{
commit(true);
}
});
},// initialize the input fields.
id: ‘id’,
url: ‘${pageContext.request.contextPath}/claim/claimList’,
type: ‘POST’,
async: true};
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, record)
{
var claimedamount = record.claimedamount;
var entitledamount = record.entitledamount;
if (claimedamount > entitledamount) {
return ‘<span style=”margin: 4px; margin-top:8px; float: ‘ + columnproperties.cellsalign + ‘; color: #ff0000;”>’ + claimedamount + ‘</span>’;
}
else if(claimedamount < entitledamount)
{return ‘<span style=”margin: 4px; margin-top:8px; float: ‘ + columnproperties.cellsalign + ‘; color: #FFA500;”>’ + claimedamount + ‘</span>’;
}
else {
return ‘<span style=”margin: 4px; margin-top:8px; float: ‘ + columnproperties.cellsalign + ‘; color: #00FF00;”>’ + claimedamount + ‘</span>’;
}
}// initialize the input fields.
/* $(“#empcode”).jqxInput({ theme: theme });
$(“#name”).jqxInput({ theme: theme });
$(“#expensetype”).jqxInput({ theme: theme });
*/
$(“#claim_id”).width(150);
$(“#claim_id”).height(23);
$(“#empCode”).width(150);
$(“#empCode”).height(23);
$(“#name”).width(150);
$(“#name”).height(23);
$(“#expenseType”).width(150);
$(“#expenseType”).height(23);
$(“#invoiceDate”).width(150);
$(“#invoiceDate”).height(23);
$(“#invoiceamount”).width(150);
$(“#invoiceamount”).height(23);
$(“#entitledamount”).width(150);
$(“#entitledamount”).height(23);
$(“#claimedamount”).width(150);
$(“#claimedamount”).height(23);
$(“#eremarks”).width(150);
$(“#eremarks”).height(23);
$(“#mstatus”).width(150);
$(“#mstatus”).height(23);
$(“#mremarks”).width(150);
$(“#mremarks”).height(23);
$(“#statusType”).width(150);
$(“#statusType”).height(23);var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;$(“#grid”).jqxGrid(
{
width: 1140,
source: dataAdapter,
autoshowfiltericon: true,
groupable:true,
columnsreorder:true,
//localization: getLocalization(),
sortable: true,
statusbarheight: 25,
showstatusbar: true,
//columnsresize: true,
showaggregates: true,showfilterrow: true,
filterable: true,
enabletooltips: true,
selectionmode: ‘singlecell’,pageable: true,
autoheight: true,
autoheight: true,
editable: true,columns: [
{text: ‘Claim ID’, datafield: ‘claim_id’, width: 40, editable: false},
{text: ‘Emp Code’, datafield: ’empCode’, width: 50, editable: false},
{text: ‘Name’, datafield: ‘name’, width: 100, editable: false},
{text: ‘Expense Type’, datafield: ‘expenseType’, width: 120, editable: false},
{text: ‘Invoice Date’, datafield: ‘invoiceDate’, width: 80, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘d’, editable: false},
{text: ‘Invoice Amount’, datafield: ‘invoiceamount’, width: 90, cellsalign: ‘right’, editable: false },
{text: ‘Entitled Amount’, datafield: ‘entitledamount’, width: 90, cellsalign: ‘right’, editable: false},
{text: ‘Claimed Amount’, datafield: ‘claimedamount’, width: 90, cellsalign: ‘right’, cellsrenderer: cellsrenderer, editable: false},
{text: ‘ Emp Remarks’, datafield: ‘eremarks’, width: 100, editable: false},
{text: ‘Approved’, columntype: ‘checkbox’, datafield: ‘mstatus’, width: 70, editable: true},
{text: ‘Manager Remarks’, datafield: ‘mremarks’, width: 130, editable: true},
{text: ‘Status Type’, datafield: ‘statusType’, width: 130, editable: true},
{ text: ‘Edit’, datafield: ‘Edit’, width: 50, columntype: ‘button’, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#grid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#grid”).jqxGrid(‘getrowdata’, editrow);
$(“#claim_id”).val(dataRecord.claim_id);
$(“#empCode”).val(dataRecord.empCode);
$(“#name”).val(dataRecord.name);
$(“#expenseType”).val(dataRecord.expenseType);
$(“#invoiceDate”).val(dataRecord.invoiceDate);
$(“#invoiceamount”).val(dataRecord.invoiceamount);
$(“#entitledamount”).val(dataRecord.entitledamount);
$(“#claimedamount”).val(dataRecord.claimedamount);
$(“#eremarks”).val(dataRecord.eremarks);
$(“#mstatus”).val(dataRecord.status);
$(“#mremarks”).val(dataRecord.mremarks);
$(“#statusType”).val(dataRecord.statusType);// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
}
]
});// events
$(“#grid”).on(‘cellbeginedit’, function (event) {
var args = event.args;
// $(“#cellbegineditevent”).text(“Event Type: cellbeginedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});
$(“#grid”).on(‘cellendedit’, function (event) {
var args = event.args;
// $(“#cellendeditevent”).text(“Event Type: cellendedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 350, height: 500, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});$(“#popupWindow”).on(‘open’, function () {
$(“#empCode”).jqxInput(‘selectAll’);
});$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {var row = {
claim_id: $(“#claim_id”).val(),
empCode: $(“#empCode”).val(),
name: $(“#name”).val(),
expenseType: $(“#expenseType”).val(),
invoiceDate: $(“#invoiceDate”).val(),
invoiceamount: $(“#invoiceamount”).val(),
entitledamount:$(“#entitledamount”).val(),
claimedamount:$(“#claimedamount”).val(),
eremarks: $(“#eremarks”).val(),
mstatus: $(“#mstatus”).val(),
mremarks: $(“#mremarks”).val(),
statusType: $(“#statusType”).val()};
var rowID = ($(“#claim_id”).val(), editrow);
$(‘#grid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”grid”></div>
<div style=”font-size: 12px; font-family: Verdana, Geneva, ‘DejaVu Sans’, sans-serif; margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
<div id=”popupWindow”>
<div>Edit</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”left”>Claim ID:</td>
<td align=”left”><input id=”claim_id” disabled /></td>
</tr>
<tr>
<td align=”left”>Emp Code:</td>
<td align=”left”><input id=”empCode” disabled /></td>
</tr>
<tr>
<td align=”left”>Name:</td>
<td align=”left”><input id=”name” disabled /></td>
</tr>
<tr>
<td align=”left”>Expense Type:</td>
<td align=”left”><input id=”expenseType” disabled /></td>
</tr>
<tr>
<td align=”left”>Invoice Date:</td>
<td align=”left”><input id=”invoiceDate” disabled ></td></tr>
<tr>
<td align=”left”>Invoice Amount:</td>
<td align=”right”><input id=”invoiceamount” disabled></td>
</tr>
<tr>
<td align=”left”>Entitled Amount:</td>
<td align=”right”><input id=”entitledamount” disabled></div></td>
</tr>
<tr>
<td align=”left”>Claimed Amount:</td>
<td align=”right”><input id=”claimedamount” disabled></div></td>
</tr>
<tr>
<td align=”left”>Remarks:</td>
<td align=”left”><input id=”eremarks” disabled></div></td>
</tr>
<tr>
<td align=”left”>Status Type:</td>
<td align=”left”><input id=”statusType” disabled></div></td>
</tr>
<tr>
<td align=”left”>Status:</td>
<td>
<label>
<input type=”radio” name=”editList” value=”Approved”/>Approved
</label>
<label>
<input type=”radio” name=”editList” value=”Rejected”/>Rejected
</label>
</td>
</tr>
<tr>
<td align=”left”>Manager Remarks:</td>
<td align=”left”><input id=”mremarks”></div></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”Save” value=”Save” /><input id=”Cancel” type=”button” value=”Cancel” /></td>
</tr></table>
</div>
</div><input type=”button” value=”SAVE” align=”right”>
</div>
<div style=”position: absolute; bottom: 5px; right: 5px;”>
</div>
</body>
</html>\
Thanks
You must be logged in to reply to this topic.