Date Format not working while edit in Grid

[saroj]

Hi Support,

In grid, column field  "FLEET_CUSTOM_FIELD_VALUE " is defined as string and i am using it as text box and date field based on my jquery condition as in below code, which is working fine. But when i edit in grid and select date, it is not picking up correct date format as i have attached the image of wrong date format.
The date format should be  "dd/MM/yyyy" (correct format).

Please suggest the solution, on my below code.


<script type="text/javascript">
function edit(e) {              
        var datatype = $("#FLEET_CUSTOM_FIELD_DATATYPE").val();
     
      if (datatype == "D") {          
          $("#FLEET_CUSTOM_FIELD_VALUE").kendoDatePicker();
      }
     else if (datatype == "N") {            
            $("#FLEET_CUSTOM_FIELD_VALUE").keypress(function (e) {
                     if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
                                alert("This is numeric field");
                                 return false;
                            }
                      });
               }
    }
  </script>

 public class CustomFieldValue
    {
        public int FLEET_ID { get; set; }
        public int FLEET_CUSTOM_FIELD_ID { get; set; }
        public string FLEET_CUSTOM_FIELD_VALUE { get; set; }
        public DateTime? DATE_VALUE { get; set; }
        public string FLEET_CUSTOM_FIELD_DESCRIPTION { get; set; }
        public string FLEET_CUSTOM_FIELD_DATATYPE { get; set; }
        public short FIELD_POSITION { get; set; }
        public string USER_UPDATE { get; set; }
    }

@(Html.Kendo().Grid<CustomFieldValue>()
            .Name("CustomFieldValue" ) 
        .Sortable()
        .Pageable(paging =>
        {
            paging.Enabled(true);
            paging.Info(true);
            paging.PageSizes(true);
            paging.Numeric(true);
            paging.PreviousNext(true);
            paging.Refresh(true);
            paging.PageSizes(new int[5] { 5, 10, 15, 20, 25 });
        })
        .DataSource(dataSource => dataSource
            .Ajax()
                .Events(events =>
                {
                    events.RequestEnd("onCustomFieldValueRequestEnd");
                    events.Error("onCustomFieldValueListError"); 
                  
                })
                
            .PageSize(15)
            .Model(model =>
                {
                    model.Id(f => f.FLEET_CUSTOM_FIELD_ID);
                    model.Field(f => f.FLEET_CUSTOM_FIELD_DESCRIPTION).Editable(false);
                })

            .Read(read => read.Action("_CustomFieldValueList", "CustomFieldValueList", new { fleetId = ViewData["FLEET_ID"] }))
            .Update(update => update.Action("_CustomFieldValueListEdit", "CustomFieldValueList"))            
        )
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
        .Editable(editable => 
        {
            editable.Mode(GridEditMode.InLine);            
        })
        .Reorderable(reorder => reorder.Columns(true))
        .Filterable()
        .Columns(columns =>
        {
            columns.Bound(f => f.FLEET_CUSTOM_FIELD_ID).Title(" ").Hidden();
            columns.Bound(f => f.FLEET_CUSTOM_FIELD_DATATYPE).Title(" ").Hidden();
            columns.Bound(f => f.FLEET_CUSTOM_FIELD_DESCRIPTION).Title("Description");
            columns.Bound(f => f.FLEET_CUSTOM_FIELD_VALUE).Title("Field value").Width(250);
            
            columns.Command(command =>
            {
                command.Edit();
            }).Width(250).Title("Commands").HeaderHtmlAttributes(new { @style = "text-align:left; text-decoration:Underline;" });
        })
        .Events(e=>e.Edit("edit"))
            ) 

[Alexander Popov]

Hello Saroj,

I would recommend you to explicitly set the desired format during the DatePicker initialization. For example:  

if (datatype == "D") {
    $("#FLEET_CUSTOM_FIELD_VALUE").kendoDatePicker({
        format: "dd/MM/yyyy"
    });
}

Regards,
Alexander Popov
Telerik