JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › datePicker error in grid
Tagged: datetimepicker editor
- This topic has 24 replies, 3 voices, and was last updated 2 years, 6 months ago by tbettinazzi@axioma.it.
-
AuthorPosts
-
February 28, 2022 at 4:21 pm #102901tullio0106@live.itParticipant
I create a column in my grid using datePicker as editor :
{ label: ‘Campo data 1’, dataField: ‘C6’, editor: ‘dateTimePicker’, cellsFormat: ‘dd/MM/yyyy’},
When I try to modify the field and I choose a new date I get a javascript error :
Uncaught TypeError : t.repace is not a function
The initial value was 01/06/1954 and I see it correctly but when I click on it to modify it becomes 6 january 1954 (wrong respect to the format).
Did I forget something? Is it a bug ?
Tks
Tullio
- This topic was modified 2 years, 7 months ago by tullio0106@live.it.
February 28, 2022 at 7:14 pm #102908adminKeymasterHi,
The editor should be set like that:
{ label: 'Order Date', width: 250, dataField: 'date', cellsFormat: 'dd-MM-yyyy', editor: { template: 'dateTimePicker', formatString: 'dd-MM-yyyy', onInit(index, dataField, editor) { } } },
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/March 1, 2022 at 9:05 am #102911tullio0106@live.itParticipantIt seems a little better but I still have some problems :
When I try to introduce data it switches to an english like representation, forgetting the format dd/MM/yyyy and goes to MM/dd/yyyy (also the calendar interprets data in english style).
If, during edit I press the Tab key it goes into error : t.replace is not a function.
Randomly double clicking on the field (I didn’t understand when) it divides the field in 3 parts (with some vertical line) and then it goes into the same error.
Tks
March 1, 2022 at 10:33 am #102914tullio0106@live.itParticipantAs a further information my PC language setting is italian.
As well for the server (same machine).
Tks
March 1, 2022 at 11:29 am #102915tullio0106@live.itParticipantThe topic is reproduced by an example.
How can I upload it to you ?
Tks
March 1, 2022 at 12:03 pm #102917adminKeymasterHi,
You can share an example with a link to codepen. From the provided information, I think that the column with datepicker is not a ‘date’ column, but is a ‘string’ column.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/March 1, 2022 at 1:32 pm #102921tullio0106@live.itParticipantHere the codpen link : https://codepen.io/tullio0106/pen/JjOebye
This is the beverage.json data I used
[{
“C1”: “1”,
“C2”: “Hot Chocolate”,
“C4”: “SEAVISION”,
“C6”: “01/06/1954”,
“C5”: “true”,
“C3”: “14g”
}]Tks
P.S. : is the same of the other post
- This reply was modified 2 years, 7 months ago by tullio0106@live.it.
March 7, 2022 at 10:15 am #102932tullio0106@live.itParticipantNobody can help about this topic ?
Tks
March 7, 2022 at 12:03 pm #102936adminKeymasterHi,
Unfortunately, the provided example is not working. There is no Grid on it.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/March 7, 2022 at 12:09 pm #102937tullio0106@live.itParticipantMay be you looked to a wrong codpen address
This is the html content
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grid Cell Editing Confirm Dialog Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../../source/styles/smart.default.css" />
<link rel="stylesheet" type="text/css" href="../../../styles/demos.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="../../../../common/data.js"></script>
</head>
<body class="viewport">
<div class="demo-description">
<h1>Grid Cells Editing Confirm Tullio</h1>
We implement the 'onCellUpdate' Grid function. When a cell value is edited, 'onCellUpdate' is called. That callback can be used for Client-Server validation of the Cell Editing. The function is implemented for the 'Quantity' column and we simulate Ajax call to a Web Server by using setTimeout and
confirm the changes by calling the 4th argument of 'onCellUpdate', which is a function. When we call it with 'true', changes are confirmed. Otherwise, they are canceled. In this example, when the 'Quantity' is > 10, changes are confirmed.
</div>
<smart-grid id="grid"></smart-grid><!-- scripts -->
<script src="../../../common/data.js"></script>
<script type="module" src="../../../source/modules/smart.grid.js">
</script>
<script type="module" src="../../../source/modules/smart.button.js">
</script>
<script type="module" src="index.js">
</script>
</body>
</html>and the grid is there.
Tks
March 7, 2022 at 4:57 pm #102941adminKeymasterHi,
The issue in the provided code is that the Grid’s binding is to a json which does not reflect to the columns definitions. For example, you have a column like label: ‘Campo testo 2’, dataField: ‘C2’, but your data source does not have a ‘C2’ key.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/March 8, 2022 at 8:40 am #102943tullio0106@live.itParticipantSorry but I don’t understand.
the provided data are :
[{
“C1”: “1”,
“C2”: “Hot Chocolate”,
“C4”: “SEAVISION”,
“C6”: “01/06/1954”,
“C5”: “true”,
“C3”: “14g”
}]where C2 field is included as well as C6 (the date) in the european format dd/MM/yyyy, as stated by definition.
What’s wrong ?
Tks
March 24, 2022 at 3:42 pm #102991tullio0106@live.itParticipantNo further help ?
March 24, 2022 at 3:49 pm #102993adminKeymasterHi,
This issue should have been already resolved in the latest version.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/March 25, 2022 at 3:42 pm #102994tullio0106@live.itParticipantUnfortunately it doesn’t seem to be solved.
I still set the date format to dd/MM/yyyy and set the value to 01/06/1954 (I mean first of june) but it’s represented as 06/01/1954 (six of january) and when the date picker opens it’s still on 6 january.
Tks
-
AuthorPosts
- You must be logged in to reply to this topic.