Initialize controls after binding template in popup editor

[jon]

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);
                    });

                });

[Petur Subev]

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

[serge]

the link is invalid now

[serge]

the jsbin is invalid now

[Georgi Denchev]

Hi, Serge,

Here is the updated reference for the dataBound event:

https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/events/databound

As for the jsbin, my colleague asked the customer to provide a sample in jsbin which showcases the problematic behavior, he wasn't providing a solution. If you're experiencing the same issue, please prepare a small dojo sample and send it to us so we can examine it.

[serge]

Hi Georgi, please rather update the OP link, because people reading the answer clicks on the first link, if it does not work, they don't read all comments....

[Georgi Denchev]

Hi, Serge,

I've updated the link to the documentation in the answer as well.

Just as a side note, the previous link that was provided would still redirect you to the updated docs if you proceed with the request. This is also true for any other links that point to the old kendoui domain.