Grid in HTML form; overriding editor for DateTime

2 posts, 0 answers
  1. Jason
    Jason avatar
    16 posts
    Member since:
    Dec 2016

    Posted 01 Aug 2019 Link to this post

    I am using the following in a HTML form, where Model.SecheduledActions is a List<ScheduledAction> that contains a member that is a DateTime.

    01.@(Html.Kendo().Grid(Model.ScheduledActions)
    02.          .Name("ScheduledItems")
    03.          .Columns(c =>
    04.          {
    05.              c.Bound(p => p.Id).Hidden().ClientTemplate("#= Id #" +
    06.                  "<input type='hidden' name='ScheduledActions[#= index(data)#].Id' value='#= Id #' />"
    07.              );;
    08.              c.Bound(p => p.Cylinders).ClientTemplate("#= Cylinders #" +
    09.                  "<input type='hidden' name='ScheduledActions[#= index(data)#].Cylinders' value='#= Cylinders #' />"
    10.              );
    11.              c.Bound(p => p.ScheduledDate).ClientTemplate("#= ScheduledDate #" +
    12.                  "<input type='hidden' name='ScheduledActions[#= index(data)#].ScheduledDate' value='#= ScheduledDate #' />"
    13.              );
    14.          })
    15.           
    16.          .DataSource(dataSource => dataSource.Ajax()
    17.              .Model(model =>
    18.              {
    19.                  model.Id(p => p.Id);
    20.                  model.Field(p => p.Id).Editable(false);
    21.              })
    22.              .ServerOperation(false)
    23.          ))

    However when this data is submitted, the datetime is DateTime.Min, and I have no way of editing the datetime in the grid to begin with.
    How might I go about 1) being able to select a date for the ScheduledDate member, and 2) Specify the type of editor for that column?

  2. Teya
    Admin
    Teya avatar
    1 posts

    Posted 05 Aug 2019 Link to this post

    Hi Jason,

    In order to be able to edit a column in the Kendo Grid, you should set the grid's editable configuration option: 

    .Columns(c =>
     {
        ...
     })
    .DataSource(dataSource => dataSource.Ajax()
        ...
    )
    .Editable(editable => editable.Mode(GridEditMode.InCell))


    This will allow the cells to be editable once you click on them.

    By default, the date (datetime) cells have a Kendo UI date (datetime) picker editor. If you wish to use a custom editor for a column, you can follow the instructions in our Kendo Grid Custom Editing Demo for MVC page.

    I hope this helps.


    Regards,
    Teya
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top