Editor Change cells format

[mamb121Participant]

in jqxGrid I add date column with column type is ‘datetimeinput’ And cells format is ‘dd/MM/yyyy’
but my Problem in column editor
when I try To Edit cell contint date value like “01/02/2015” it is change it to “02/01/2015” it is changed day to month And Month To day ??

I tried to solve this Problem by add function createeditor And initeditor but still same problem

This is Code for jqxGrid Date Column

                columns: [
                  {
                      text: 'التاريخ', datafield: 'TransDate', width: '15%', align: 'right', cellsalign: 'right', cellsformat: 'dd/MM/yyyy', columntype: 'datetimeinput', minwidth: '90px', rtl: true,
                      aggregatesrenderer: function (aggregates, column, element) {
                          var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + theme + "' style='background-color:#3383CC;color:white ;float: right; width: 100% ;min-width:80px; height: 100%;font-size: 14px;padding: 8px;font-weight: bold; '>الإجمالي</div>";
                          return renderstring;
                      },
                      createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {

                          var inputTag = $("<div style='border: none;'></div>").appendTo(htmlElement);
                          inputTag.jqxDateTimeInput({ popupZIndex: 99999999, placeHolder: "ادخل التاريخ: ", allowNullDate: false, width: '100%', showFooter: true, clearString: '', todayString: 'اليوم', culture: 'en-US', height: 30, rtl: true, animationType: 'slide', formatString: 'dd/MM/yyyy' });
                          $(document).on('keydown.TransDate', function (event) {
                              if (event.keyCode == 13) {
                                  if (event.target === inputTag[0]) {
                                      addCallback();
                                  }
                                  else if ($(event.target).ischildof(inputTag)) {
                                      addCallback();
                                  }
                              }
                          });
                          return inputTag;
                      },
                      initEverPresentRowWidget: function (datafield, htmlElement) {
                          htmlElement.val(today);
                      },
                      validateEverPresentRowWidgetValue: function (datafield, value, rowValues) {
                          if (value == null) {
                              return { message: "Entered value Date", result: false };
                          }
                          return true;
                      },
                      getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
                          var value = htmlElement.val();
                          return value;
                      },
                      resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
                          htmlElement.val(today);
                      },
                      createeditor: function (row, cellvalue, editor, cellText, width, height) {
                          editor.jqxDateTimeInput({ formatString: 'dd/MM/yyyy', allowNullDate: false, showFooter: true, clearString: '', todayString: 'اليوم', culture: 'en-US', rtl: true, animationType: 'slide' });;
                      },
                      initeditor: function (row, cellValue, editor, cellText, width, height) {
                          editor.jqxDateTimeInput({ formatString: 'dd/MM/yyyy', allowNullDate: false, showFooter: true, clearString: '', todayString: 'اليوم', culture: 'en-US', rtl: true, animationType: 'slide' });
                      }
                  },

[ivailoParticipant]

Hi mamb121,

We tested your code, but that behavior cannot be simulated.
Here is a demo with your code.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[mamb121Participant]

Please Change javascript code in demo to

 var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     columnsheight: 30,
     source: adapter,
     sortable: true,
     showeverpresentrow: true,
     editable:true,
      columns: [{
         text: 'First Name',
         datafield: 'firstname',
         width: 90
     }, {
         text: 'Last Name',
         datafield: 'lastname',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     },{
                      text: 'التاريخ', datafield: 'date', width: '15%', align: 'right', cellsalign: 'right', cellsformat: 'dd/MM/yyyy', columntype: 'datetimeinput', minwidth: '90px', rtl: true,
                                            createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
                          var inputTag = $("<div style='border: none;'></div>").appendTo(htmlElement);
                          inputTag.jqxDateTimeInput({ value: null, popupZIndex: 99999999, placeHolder: "ادخل التاريخ: ", width: '100%', height: 30 });
                          $(document).on('keydown.date', function (event) {
                              if (event.keyCode == 13) {
                                  if (event.target === inputTag[0]) {
                                      addCallback();
                                  }
                                  else if ($(event.target).ischildof(inputTag)) {
                                      addCallback();
                                  }
                              }
                          });
                          return inputTag;
                      },
                      initEverPresentRowWidget: function (datafield, htmlElement) {
                      },
                      getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
                          var value = htmlElement.val();
                          return value;
                      },
                      resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
                          htmlElement.val(null);
                      }
                  }, {
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right'
     }, {
         text: 'Unit Price',
         datafield: 'price',
         cellsalign: 'right',
         cellsformat: 'c2'
     }]
 });

for Example
kindly .. follow this steps :
1- add new row with date “01/02/2015”
2- after added click on date cell To show Editor
3- it Will show at “02/01/2015” why date is changed ??

[ivailoParticipant]

Hi mamb121,

Try to set formatString: "dd/MM/yyyy" for your jqxDateTimeInput.
Also set

getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
                          var value = htmlElement.jqxDateTimeInput('value');
                          return value;
                      },

Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts