This is a migrated thread and some comments may be shown as answers.

Initialize controls after binding template in popup editor

1 Answer 65 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
jon
Top achievements
Rank 1
jon asked on 18 Aug 2013, 01:47 AM
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);
                    });
 
                });

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 20 Aug 2013, 02:30 PM | edited on 03 Jun 2021, 07:37 AM
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!
serge
Top achievements
Rank 2
Bronze
Iron
Iron
commented on 18 May 2021, 02:20 PM

the link is invalid now
serge
Top achievements
Rank 2
Bronze
Iron
Iron
commented on 18 May 2021, 02:22 PM

the jsbin is invalid now
Georgi Denchev
Telerik team
commented on 20 May 2021, 08:00 AM

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
Top achievements
Rank 2
Bronze
Iron
Iron
commented on 01 Jun 2021, 09:18 AM

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
Telerik team
commented on 03 Jun 2021, 07:41 AM

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.

Tags
General Discussions
Asked by
jon
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or