DateTimePicker inside a Kendo Template

5 posts, 1 answers
  1. Kevin
    Kevin avatar
    22 posts
    Member since:
    Feb 2014

    Posted 11 Nov 2015 Link to this post



    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:


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

     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.




  2. Answer
    Daniel avatar
    2231 posts

    Posted 13 Nov 2015 Link to this post

    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') #"})

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Kevin
    Kevin avatar
    22 posts
    Member since:
    Feb 2014

    Posted 13 Nov 2015 in reply to Daniel Link to this post

    That worked perfectly, thanks Daniel!


  4. Bharat Saoji
    Bharat Saoji avatar
    2 posts
    Member since:
    Apr 2019

    Posted 30 Jul 2020 in reply to Daniel Link to this post

    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') #" })


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


    Himanshu Bhardwaj


  5. Nikolay
    Nikolay  avatar
    293 posts

    Posted 03 Aug 2020 Link to this post

    Hello Bharat,

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

            .Columns(columns =>
                columns.Bound(x => x.Birthday).HtmlAttributes(new
                    @class = "templateCell"
                     .HtmlAttributes(new { style = "width:100%", value = "#: kendo.toString('07/07/2020', 'MM-dd-yyyy HH:mm') #" })
            .Events(events => events.DataBound("db"))
        <script type="text/javascript">
            function db(e) {
                var grid = this;
                $(".templateCell").each(function () {
                    var tr = $(this).closest('tr');
                    var item = grid.dataItem(tr);
                    kendo.bind($(this), item);

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

    Let me know if you have any questions.

    Progress Telerik

Back to Top