Adding DatePicker to grid

[SK]

Hello, I am trying to add DatePicker to my grid. I would like for it to display the date from a field but allow users to change the date using DatePicker. The example I found works for standalone but I'm having a hard time figuring out how to implement within my grid, have it default to whatever the current value is, and allow it to be editable. 

View:

                    @(Html.Kendo().Grid<ArusUI.Areas.PODashboard.Models.POModel>()
                        .Name("poGrid")
                        .Columns(columns =>
                        {
                            columns.Command(command => command
                                    .Custom("Print")
                                    .Click("printRow"))
                                .HtmlAttributes(new { title = "PO" })
                                .Width(150);
                            columns.Bound(p => p.poNum).Width(130).HtmlAttributes(new { @class = "disabled-kendo-column" });
                            model.Field(field => field.poReleaseNbr).Editable(false);
                            model.Field(field => field.poRevisionNbr).Editable(false);
                            columns.Bound(p => p.poReviewDT)
                                .Width(150)
                                .ClientTemplate(
                                    Html.Kendo().DatePicker()
                                    .Name("poReviewDT_#=poNum#_#=poReleaseNbr#")
                                    .Value("poReviewDt")
                                    .ToClientTemplate().ToString()
                                    );
                        })
                            .Editable(editable => editable.Mode(GridEditMode.InCell))
                            .Scrollable(scrollable => scrollable.Endless(true))
                            .Scrollable(a => a.Height("650px"))
                            .PersistSelection(true)
                            .Navigatable()
                            .Sortable()
                            .Filterable(filterable => filterable
                                .Extra(true)
                                .Operators(ops => ops
                                .ForString(str => str.Clear()
                                .Contains("Contains")
                                .DoesNotContain("Does not contain")
                                .IsEqualTo("Is equal to")
                                .IsNotEqualTo("Is not equal to")
                                .StartsWith("Starts with")
                                .EndsWith("Ends with")
                                .IsNull("Is null")
                                .IsNotNull("Is not null")
                                .IsEmpty("Is empty")
                                .IsNotEmpty("Is not empty"))))
                        .AutoBind(false)
                        .Excel(excel => excel
                            .FileName("PODashboard.xlsx")
                            .Filterable(true)
                            .AllPages(true)
                            .ProxyURL(Url.Action("Excel_Export_Save", "poGrid")))
                        .Reorderable(reorder => reorder.Columns(true))
                        .ClientDetailTemplateId("template")
                        .Events(e => e.DataBound("poGridDataBound"))
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .ServerOperation(false)
                        .PageSize(25)
                        .Events(x => x.Error("onGridError"))
                        .Read(read => read.Action("GetPO","PO").Data("getPOParams").Type(HttpVerbs.Get))
                        .Model(model =>
                        {
                            model.Id(m => m.poNum);
                            model.Field(field => field.poReleaseNbr).Editable(false);
                            model.Field(field => field.poRevisionNbr).Editable(false);
                            model.Field(field => field.poReviewDT).Editable(true);
                        })
                        ).Resizable(resize => resize.Columns(true))
                        )

 

Property:

[DisplayName("Review Date")]
public string poReviewDT { get; set; }

Currently the calendar button does not render until you click into the column and when you do click the calendar button, it immediately closes - so I'm definitely missing a few steps. 

Thanks

 

 

[Mihaela]

Hello,

I noticed that you have submitted the same query as a support ticket, as I have already answered your question in the ticket, I will post the same here in case someone else has the same question:

1) Adding the DatePicker control as an editor for the field "poReviewDT" - please ensure that the data type of the Model property bound to the DatePicker is "DateTime". The default editor of the DateTime Model properties is the DatePicker, and it is loaded through the EditorTemplates folder: "~Views/Shared/EditorTemplates/Date.cshtml".

For example:

//~Views/Shared/EditorTemplates/Date.cshtml
@model DateTime?

@(Html.Kendo().DatePickerFor(m => m))

//Model
[DisplayName("Review Date")]
public DateTime poReviewDT { get; set; }

//View
@(Html.Kendo().Grid<Model>()
  .Name("poGrid")
  .Columns(columns =>
  {
    columns.Bound(p => p.poReviewDT).Width(150).Format("{0: dd/MM/yyyy}");
    ...
  })
  .Editable(editable => editable.Mode(GridEditMode.InCell))
  ...
)

 

2) Displaying a date in a Grid column by using the DatePicker -  Rendering editors directly in the column template is something that is not supported out of the box. However, a possible solution is demonstrated in the following KB article:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-editors-in-column-templates

You could use the same approach in ASP.NET Core application:

//Model
[DisplayName("Review Date")]
public DateTime poReviewDT { get; set; }

//View
@(Html.Kendo().Grid<Model>()
  .Name("poGrid")
  .Columns(columns =>
  {
    columns.Template("<input name='poReviewDT_#=poNum#' data-role='datepicker' data-bind='value:poReviewDT' class='k-input' />")
    .Title("poReviewDT").Width(150).HtmlAttributes(new { @class = "dpCell" });
    ...
  })
  .Editable(editable => editable.Mode(GridEditMode.InCell))
  .Events(e =>
  {
    e.DataBound("poGridDataBound");
  })
  ...
)

<script>
    function poGridDataBound(e) {
        var grid = e.sender;
        $(".dpCell").each(function () {
            var tr = $(this).closest('tr');
            var item = grid.dataItem(tr);
            kendo.bind($(this), item);
        });
        $("#poGrid").focus();
    }
</script>

In addition, check out the  forum thread below, where is discussed a similar case:

https://www.telerik.com/forums/kendo-ui-mvc-grid-with-date-picker-and-combo-box-(data-of-combo-is-based-on-each-row-data)

Since the rendering of an editor on each column cell would be a huge performance hit, I would recommend also reviewing the following article regarding initializing widgets in each cell.

- https://docs.telerik.com/kendo-ui/controls/data-management/grid/performance/common-mistakes#using-editors-or-widgets-in-cells-excessively

If any additional questions arise, you are more than welcome to let me know.

Regards,
Mihaela
Progress Telerik