DateTimePicker inside a Kendo Template

[Kevin]

Hi,

 

I've placed an MVC wrapped DateTimePicker inside a kendo template, but the problem I'm having is setting the value.  Here's the code I'm using:

 

(Html.Kendo().DateTimePicker()
                .Name("activeTime-#=Ordinal#")
                .Min(new System.DateTime(1970, 1, 1, 0, 0, 0)) // Epoch
                .Format("MM-dd-yyyy HH:mm")
                .TimeFormat("HH:mm")
                .HtmlAttributes(new { style = "width:100%" })
                .Value("#: kendo.toString(ActiveDT, 'MM-dd-yyyy HH:mm') #")
                .ToClientTemplate()
            )​

 This loads a DateTimePicker inside the list view, however the value of the picker is always blank.  I've tried a few things to fix it (deferring, outputting a javascript date object instead of a string, changing everything to create the datetimepicker through javascript rather than the wrapper) and I'm at a bit of a dead end, I was just wondering where exactly I'm going wrong.

 

Thanks,

Kevin

[Daniel]

Hello Kevin,

The Value method expects a DateTime value or a string that can be converted to DateTime on the server which will not be the case because the ClientTemplate is evaluated on the client. It should be possible to set the value with a template expression by setting the string to the value attribute using HtmlAttributes method:

.HtmlAttributes(new { style = "width:100%", value = "#: kendo.toString(ActiveDT, 'MM-dd-yyyy HH:mm') #"})

Regards,
Daniel
Telerik

[Kevin]

That worked perfectly, thanks Daniel!

Kevin

[n/a]

Hi Daniels,

I tried with same code in details template but the value of the picker is  blank.

I have tried with below code

first one

  .HtmlAttributes(new { style = "width:100%", value = "#: kendo.toString('07/07/2020', 'MM-dd-yyyy HH:mm') #" })

Second 

 .HtmlAttributes(new { style = "width:100%", value = "#: kendo.toString("#=Edate#", 'MM-dd-yyyy HH:mm') #" })

Regards,

Himanshu Bhardwaj

 

[Nikolay]

Hello Bharat,

When setting a Component in column ClientTemplate, the latter must be evaluated in the DataBound event handler:

@(Html.Kendo().Grid<Student>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(x => x.Birthday).HtmlAttributes(new
            {
                @class = "templateCell"

            }).ClientTemplate(
                Html.Kendo().DatePicker()
                 .Name("FDPicker_#=Id#")
                 .Format("{0:dd/MM/yyyy}")
                 .HtmlAttributes(new { style = "width:100%", value = "#: kendo.toString('07/07/2020', 'MM-dd-yyyy HH:mm') #" })
                 .ToClientTemplate().ToString()
             );
...
        .Events(events => events.DataBound("db"))
...
    <script type="text/javascript">
        function db(e) {
            var grid = this;
            $(".templateCell").each(function () {
                eval($(this).children("script").last().html());
                var tr = $(this).closest('tr');
                var item = grid.dataItem(tr);
                kendo.bind($(this), item);
            });
        }
    </script>

For your convenience, I am attaching a small MVC demo project demonstrating the above.

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik