Date Format not working while edit in Grid

2 posts, 0 answers
  1. saroj
    saroj avatar
    39 posts
    Member since:
    Oct 2011

    Posted 17 Oct 2013 Link to this post

    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"))
                ) 
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1441 posts

    Posted 21 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top