Initialize controls after binding template in popup editor

2 posts, 0 answers
  1. jon
    jon avatar
    3 posts
    Member since:
    Aug 2013

    Posted 17 Aug 2013 Link to this post

    I have a grid that is using a popup editor and in the editor is a listview that I'm binding to a collection on the viewmodel.  After the listview is bound I'd like to initialize the inputs as timepickers.
    However, the time picker inputs don't seem to get initialized.  Everything works as expect except the timepicker isn't getting initialized.

    One thing I noticed is that if use kendo.render and use the template I can get the inputs to initialize as timepickers.

    here's the listview:
    <div class="container" id="list" data-role="listview" data-bind="source: data" data-template="list-tmpl" />
    here's the template:
    <script id="list-tmpl" type="text/x-kendo-template">
      <div class='row'>
     
          <div class="input-append bootstrap-timepicker">
            <input type="text" class="input-small timepicker" data-bind="value:StartTime" required />
            <span class="add-on"><i class="icon-time"></i></span>
          </div>
     
      </div>
    </script>
    here's the jQuery I'm running in the edit event of the grid:
    var items = $(".timepicker");
               $.each(items, function () {
                   var el = $(this);
     
                   el.timepicker({
                       minuteStep: 1
                   });
     
               });
    this is the method that works:

    var tmpl = kendo.template($('#list-tmpl').html());
     
    var results = kendo.render(tmpl, e.model.data);
     
    this.editable.element.data("kendoWindow").element.find("#list").html(results); // populate the listview
     
     var items = $(e.container).find(".timepicker");
                    $.each(items, function () {
                        var el = $(this);
                        console.log(el);
                        //el.kendoTimePicker();
                        el.timepicker({
                            minuteStep: 1
                        }).on('show.timepicker', function (e) {
                            console.log(e);
                        });
     
                    });
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 20 Aug 2013 Link to this post

    Hello Jon,

    We are not sure and which part your logic fails. However can you try to use the dataBound event of the listview to initialize the timepickers? This way you can be sure that the input elements exist in the DOM and cab be transformed into timepicker widgets.

    If it does not help demonstrate the case with a jsbin example so we can see what actually fails.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top