kendoComboBox into Template

[Marco]

I have a ListView  that render this template:

<script type="text/x-kendo-tmpl" id="template_token_list">
            <div id="token" class="k-header">
                <h3>${codice}</h3>
                <div id='token_status' class='${colore}'></div>
                <img src="/upload/token/${codice}_small.jpg"><br>
                <button class="k-button info"><span class="k-icon k-warning"></span></button>
                <input style="display:none;" class="comboAction" />
            </div> 
</script>


<script>
...
$("#listView").kendoListView({
        dataSource: dataSource,
        template: kendo.template($("#template_token_list").html())
    });

 $(".comboAction").kendoComboBox({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: items,
            placeholder: "Action..."
        });
...

but, when I call the listView refresh

var listView = $("#listView").data("kendoListView");
listView.refresh();

all the kendoComboBox return to normal input 

Please help me

[Rosen]

Hi Marco,

You should use the ListView dataBound event to instantiate the inner ComboBoxes. This will ensure that they will be recreated when the ListView is rebound/re-rendered.

Greetings,
Rosen
the Telerik team

[Marco]

tks, but I have this problem now:

my code:
$("#listView").kendoListView({
        dataSource: dataSource,
        dataBound: function() {
            $(".comboAction").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: items
            });
        },
        template: kendo.template($("#template_token_list").html())
    });

A timerInterval call  

var listView = $("#listView").data("kendoListView");
listView.refresh();

but my my page are creating every time the timer was called :
<div class="k-list-container k-popup k-group k-reset" id="action-list" data-role="popup" style="position: absolute; font-family: arial, helvetica, sans-serif; width: 142px; height: auto; display: none; "><ul unselectable="on" class="k-list k-reset" style="overflow-x: auto; overflow-y: auto; "><li class="k-item k-state-focused"> </li><li class="k-item">riavviare totem</li><li class="k-item">riavviare software</li><li class="k-item">refresh image</li><li class="k-item">attivare assistenza</li></ul></div>

<div class="k-list-container k-popup k-group k-reset" id="action-list" data-role="popup" style="position: absolute; font-family: arial, helvetica, sans-serif; width: 142px; height: auto; display: none; "><ul unselectable="on" class="k-list k-reset" style="overflow-x: auto; overflow-y: auto; "><li class="k-item k-state-focused"> </li><li class="k-item">riavviare totem</li><li class="k-item">riavviare software</li><li class="k-item">refresh image</li><li class="k-item">attivare assistenza</li></ul></div>

<div class="k-list-container k-popup k-group k-reset" id="action-list" data-role="popup" style="position: absolute; font-family: arial, helvetica, sans-serif; width: 142px; height: auto; display: none; "><ul unselectable="on" class="k-list k-reset" style="overflow-x: auto; overflow-y: auto; "><li class="k-item k-state-focused"> </li><li class="k-item">riavviare totem</li><li class="k-item">riavviare software</li><li class="k-item">refresh image</li><li class="k-item">attivare assistenza</li></ul></div>

and so my page crash.

[Rosen]

Hi Marco,

I'm afraid that it is not clear what the problem might be by looking at the provided information. Therefore, please provide a jsFIddle test page in which the behavior can be observed. 

Regards,
Rosen
the Telerik team

[Marco]

my test page: 
http://jsfiddle.net/YmayZ/

if you inspect the html page you can see that kendo add the html tags for kendoComboBox
 every 5 seconds.

[Rosen]

Hello Marco,

In this scenario you should manually destroy the ComboBox widgets before refreshing the ListView. Here is a modified version of the sample. 

All the best,
Rosen
the Telerik team