JQuery Grid AddRow

gestion dates

by mogador

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
the grid accepts dates in sqlformat (jj-MM-yyyy) in the source data.<br>
example : data = [{firstname: "bob", date: '2022-09-06'}, {firstname: "kim", date: '2022-09-05'}];
<br><br>
but if you give the same date format in addrow function, the cellsformat is not applyed in the grid : 

<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<div style="margin-top: 10px;">
    <input id="addrowbutton" type="button" value="clic me : Add Row" />
		problem with datafield date : cellsformat (dd/MM/yyyy) is not applied when you add new rows.
</div>

JavaScript

var data = [{firstname: "bob", date: '2022-09-06'}, {firstname: "kim", date: '2022-10-01'}, {firstname: "dude", date: '2021-09-06'}, {firstname: "dude", date: '2023-09-06'}];
 
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     },  {
         name: 'date',
         type: 'date'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     height: 200,
     theme: 'energyblue',
     source: adapter,
     sortable: true,
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         columngroup: 'Name',
         width: 90
     }, {
         text: 'Order Date',
         datafield: 'date',
         width: 160,
         cellsformat: 'dd/MM/yyyy'
     }],
 });

 $("#addrowbutton").jqxButton({
     theme: 'energyblue',
     height: 30
 });

 $("#addrowbutton").on('click', function () {
     var datarow = [{firstname: "new name", date: '2022-11-01'}];
		      
     var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow)
 });