Popup Grid Edit Mode with timepicker

3 posts, 0 answers
  1. Evan
    Evan avatar
    2 posts
    Member since:
    Jan 2016

    Posted 19 Apr 2018 Link to this post

    I'm trying to use GridEditMode.PopUp to enter times.  I currently get the full date in a text box (see pic)

    I originally used InLineEditing and was able to use the following:

    columns.Bound(c => c.Arrival).Format("{0: HH:mm}").EditorTemplateName("TimeEdit");


    This however does not work for PopUp editing.  I found out that in order to make the "Name" column not editable in PopUp editing I had to create the following function in the view:


        function EditGrid(e) {
            if (!e.model.isNew()) {
                $('#Name').attr('readonly', 'readonly');


    I am guessing in this function is where I may be able to set the Arrive box to a time picker, but I can't find anything to work. 

  2. Evan
    Evan avatar
    2 posts
    Member since:
    Jan 2016

    Posted 20 Apr 2018 in reply to Evan Link to this post

    The EditorTemplateName("TimeEdit") is a shared editorTemplate as follows:


    <div class="input-group bootstrap-timepicker">
        <label class="delay-label"></label>
        @Html.Kendo().TimePickerFor(m => m).Interval(1)

  3. Stefan
    Stefan avatar
    2913 posts

    Posted 23 Apr 2018 Link to this post

    Hello, Evan,

    Thank you for the details.

    I can assume that the issue occurs due to the reason how the editor templates are handled in Popup Edit mode.

    Please check the following post and StackOverflow describing how custom editors can be placed in Popup Edit mode:


    The other option will be to use completely custom Popup editor template:



    I hope this is helpful.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top