Using TimePicker within an editor template

10 posts, 0 answers
  1. Shane P
    Shane P avatar
    86 posts
    Member since:
    Sep 2012

    Posted 26 May 2013 Link to this post

    Im trying to use a time picker without any luck.

    @if (Model.OrderEndTime.HasValue)
         {
             @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15).Value(Model.OrderEndTime.Value.ToString("HH:mm tt"))
         }
         else
         {
             @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15)
         }
    My problem is the picker is not getting bound to the value. The value is returned, I have check by 

    @Html.LabelFor(m => m.OrderEndTime)
           @if (Model.OrderEndTime.HasValue)
           {
               @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15).Value(Model.OrderEndTime.Value.ToString("HH:mm tt"))
               <span>@Model.OrderEndTime.Value.ToString("HH:mm tt")</span>
           }
           else
           {
               @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15)
           }
    adding the span and the value is correct. Do I need to do something else to get the time picker working?

    Thank you!
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 28 May 2013 Link to this post

    Hi Shane,

     
    From the provided information it's not clear for us what is the exact setup that you have - could you please provide the following information:

    • Current View code
    • Current Controller code
    • Current Model code

    Also I will recommend to use the following editor template:

    @Html.LabelFor(m => m.OrderEndTime)
    @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15)


    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Shane P
    Shane P avatar
    86 posts
    Member since:
    Sep 2012

    Posted 28 May 2013 Link to this post

    Hi Vladimir,


    So my editor template looks like
    @model Model.DailyOrderTimeSpan
     
    <div class="daily-order">
        <label class="day">@Html.DisplayFor(m => m.Name)</label>
        <div class="order-time">
            @Html.HiddenFor(m => m.Day)
            @Html.LabelFor(m => m.OrderStartTime)
            @if (Model.OrderStartTime.HasValue)
            {
     
                   @Html.Kendo().TimePickerFor(m => m.OrderStartTime).Interval(15).Value(Model.OrderStartTime.Value).Format("hh:mm tt")
            }
            else
            {
                @Html.Kendo().TimePickerFor(m => m.OrderStartTime).Interval(15)
            }
     
        </div>
        <div class="order-time">
            @Html.LabelFor(m => m.OrderEndTime)
            @if (Model.OrderEndTime.HasValue)
            {
                @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15).Value(Model.OrderEndTime.Value).Format("hh:mm tt")
                <span>@Model.OrderEndTime.Value.ToString("hh:mm tt")</span>
            }
            else
            {
                @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15)
            }
        </div>
    </div>
    A reduced view

    @model Model.OrderModel
     
                       
                            @Html.EditorFor(m => m.Monday)
                            @Html.EditorFor(m => m.Tuesday)
                            @Html.EditorFor(m => m.Wednesday)
                            @Html.EditorFor(m => m.Thursday)
                            @Html.EditorFor(m => m.Friday)
                            @Html.EditorFor(m => m.Saturday)
                            @Html.EditorFor(m => m.Sunday)
     
                            <div class="clear"></div>
                       
       Model

    public class OrderModel
    {
     
        public Guid StoreId { get; set; }
        public DailyOrderTimeSpan Monday { get; set; }
        public DailyOrderTimeSpan Tuesday { get; set; }
        public DailyOrderTimeSpan Wednesday { get; set; }
        public DailyOrderTimeSpan Thursday { get; set; }
        public DailyOrderTimeSpan Friday { get; set; }
        public DailyOrderTimeSpan Saturday { get; set; }
        public DailyOrderTimeSpan Sunday { get; set; }
        
    }
      public class DailyOrderTimeSpan
    {
            public int Day { get; set; }
            public string Name { get; set; }
     
        [Display(Name = "First order")]
        public DateTime? OrderStartTime { get; set; }
     
        [Display(Name = "Last order")]
        public DateTime? OrderEndTime { get; set; }
         
    }
    Controller 

    var vm = new StoreOrderModel()
                {
                    BusinessId = BusinessInfo.Id,
                    Monday = new DailyOrderTimeSpan()
                        {
                            Day = 1,
                            Name = "Monday",
                            OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                            OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                        },
                    Tuesday = new DailyOrderTimeSpan()
                    {
                        Day = 2,
                        Name = "Tuesday",
                        OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                        OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                    },
                    Wednesday = new DailyOrderTimeSpan()
                    {
                        Day = 3,
                        Name = "Wednesday",
                        OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                        OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                    },
                    Thursday = new DailyOrderTimeSpan()
                    {
                        Day = 4,
                        Name = "Thursday",
                        OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                        OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                    },
                    Friday = new DailyOrderTimeSpan()
                    {
                        Day = 5,
                        Name = "Friday",
                        OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                        OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                    },
                    Saturday = new DailyOrderTimeSpan()
                    {
                        Day = 6,
                        Name = "Saturday",
                        OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                        OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                    },
                    Sunday = new DailyOrderTimeSpan()
                    {
                        Day = 7,
                        Name = "Sunday",
                        OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                        OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                    }
                };
            return View(vm);
    The span
    <span>@Model.OrderEndTime.Value.ToString("hh:mm tt")</span>
    Always shows the right data however none of the timepickers display the data from the controller.
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 29 May 2013 Link to this post

    Hi Shane,

     
    For convenience I created sample project from the provided information that works as expected on our side - could you please check it and let me know how it differs from your real setup?

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Shane P
    Shane P avatar
    86 posts
    Member since:
    Sep 2012

    Posted 29 May 2013 Link to this post

    Hi again,

     No data is displayed for me in the view.

    See image
  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 29 May 2013 Link to this post

    Hi Shane,

     
    As the provided demo works as expected on our side it seems that the issue it's related to the local system that you are using - I would suggest to try the following:

    • Clear your browser cache
    • Check if the browser is not using emulating another User agent (Overrides tab)
    • If the above point doesn't help please contact your local administrator

    For convenience I also recorded small screencast of the working project on our side, current browser version and the current browser settings that we are using. 

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Shane P
    Shane P avatar
    86 posts
    Member since:
    Sep 2012

    Posted 29 May 2013 Link to this post

    Hi Vladimir,

    I've deleted all old data, tried different browsers yet no luck.

    Spoken to the local administrator - (me) and he can't help.

    What regional & keyboard settings are you using on your computer? this is the only thing I can think of.


  9. Shane P
    Shane P avatar
    86 posts
    Member since:
    Sep 2012

    Posted 29 May 2013 Link to this post

    Ok so I went File > New Project > KendoUI MVC application and copied over the models,editor template,controller action, view into the new project and still the same issue.

    What issue of the KendoUI.dll are you using?

    I have attached the project I created. I had to remove the kendo scripts to make the site fit under the 2mb max file upload

    Please help!!!
  10. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 30 May 2013 Link to this post

    Hi Shane,

     
    After reviewing the provided project I can confirm that you are using the same version as ours (2013.1.514). I would suggest to also try:

    • Rreinstalling KendoUI for ASP.NET MVC and the example project from my previous reply
    • Run the project that I previously provided on another PC 

    Also please note that without a project that reproduced the problem on our side, we could only guess what the reason is and as you can see this approach doesn't work and we are getting out of ideas.


    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 30 May 2013 Link to this post

    Hi Shane,

    After the last bit of information (in the duplicated support thread) we finally able to reproduce the issue on our side by setting the client culture to "en-NZ", however the reason for this behavior is that the cultures on the server and the client side are different which is invalid configuration. I would suggest to check the Globalization article in our documentation which demonstrates how to configure the project correctly. 

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready