title: Format of date selected from Kendo DatePicker Inside Kendo Grid
body: <p>I have kendo grid that i generated through Jquery. I have a date column inside it which is editable . Editing is happening properly , the problem is with formatting of data once I select the date in the datapicker.</p>
  
  <p>Grid:</p>
  
  <pre><code> divSearchGrid.kendoGrid({
                  dataSource: {
                      transport: {
                          read: function (options) {
                              $.ajax({
                                  type: "POST",
                                  url: urlSearch,
                                  data: paramsSearch,
                                  contentType: "application/json; charset=utf-8",
                                  dataType: "json",
                                  success: function (result) {
                                      var data = result.d;
                                      if (data != null) {
                                          if (data.length &gt; 0) {
                                              structuredData = [];
                                              for (var i = 0; i &lt; data.length; i++) {
                                                  var objStructured = {};
                                                  objStructured[defaultTaskColumnAray[0]] = data[i].TaskID
                                                  objStructured[defaultTaskColumnAray[1]] = data[i].TaskDescription
                                                  objStructured[defaultTaskColumnAray[2]] = data[i].AssignedToName
                                                  objStructured[defaultTaskColumnAray[3]] = data[i].StatusName
                                                  objStructured[defaultTaskColumnAray[4]] = data[i].ServiceName
                                                  var customFieldList = data[i].CustomFieldColumnGrid;
                                                  if (customFieldList.length &gt; 0) {
                                                      for (var j = 0; j &lt; customFieldList.length; j++) {
                                                          if (customFieldList[j].ColumnType == '5' || customFieldList[j].ColumnType == '6') {
                                                              objStructured[customFieldList[j].ColumnUniqueName] = customFieldList[j].ColumnCustomFieldValueBit;
                                                          }
                                                          else {
                                                              objStructured[customFieldList[j].ColumnUniqueName] = customFieldList[j].ColumnFieldValue;
                                                          }
                                                      }
                                                  }
                                                  objStructured[defaultTaskColumnAray[5]] = data[i].GUID
                                                  structuredData.push(objStructured)
                                              }
                                              options.success(structuredData)
                                          }
                                          else {
                                              divSearchGrid.html('&lt;h4&gt;No records To Display&lt;/h4&gt;')
                                              // To stop the Auto Refresh of the grid if there are no results
                                              isEditing = true;
                                          }
                                      }
                                      else {
                                          divSearchGrid.html('&lt;h4&gt;Some Error Occured&lt;/h4&gt;')
                                      }
                                  }
                              })
                          }
                      },
                      schema: {
                          model: {
                              id: "GUID",
                              fields: {
                                  TaskID: { editable: false, nullable: true },
                                  ServiceName: { editable: false, nullable: true },
                                  TaskDescription: { editable: false, nullable: true }
                              }
                          }
                      },
                      pageSize: 10
                  },
                  batch: true,
                  edit: function (e) {
  
                      // To stop the Auto Refresh of the grid on edit
                      isEditing = true;
                  },
                  groupable: true,
                  scrollable: true,
                  dataBound: GridDataBound,
                  sortable: true,
                  reorderable: true,
                  resizable: true,
                  selectable: "row",
                  toolbar: "&lt;div&gt;&lt;img id='imgExportDoc' style='margin-left:15px' onclick='ExportData(1);' title='Export in Word Format' src='images/doc-Icon.png'/&gt;&lt;img id='imgExportExcel' onclick='ExportData(2);' style='margin-left:15px' title='Export in Excel Format' src='images/xls-Icon.png'/&gt;&lt;/div&gt;",
                  autoSync: true,
                  editable: true,
                  navigatable: true,
                  columns: columnList,
                  columnMenu: true,
                  filterable: true,
                  columnMenu: {
                      sortable: false
                  },
                  pageable: {
                      refresh: true,
                      pageSizes: true,
                      buttonCount: 5
                  },
              });
  </code></pre>
  
  <p>Suppose earlier the format of the column was mm/dd/yyyy after editing when the datepicker goes off I want the same format as it was before editing.</p>
  
  <p>Code of my editor template:</p>
  
  <pre><code>$('&lt;input name="' + options.field + '" data-bind="value:' + options.field + '"/&gt;')
                         .appendTo(container)
                         .kendoDatePicker({ format: "mm/dd/yyyy" })
  </code></pre>
  
  <p>Below the snaps of the actions:</p>
  
  <p>Befor Editing:(Quote Due Date)
  <img src="https://i.stack.imgur.com/Tih3J.png" alt="enter image description here"></p>
  
  <p>After Editing:</p>
  
  <p><img src="https://i.stack.imgur.com/SLJ9E.png" alt="enter image description here"></p>
  
  <p>Now You can see the difference in the format, I want the format of the date as it was before editing. Kindly provide a solution.</p>