kendoComboBox into Template

6 posts, 0 answers
  1. Marco
    Marco avatar
    3 posts
    Member since:
    Dec 2011

    Posted 27 Apr 2012 Link to this post

    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

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 27 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Marco
    Marco avatar
    3 posts
    Member since:
    Dec 2011

    Posted 08 May 2012 Link to this post

    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.

  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 09 May 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Marco
    Marco avatar
    3 posts
    Member since:
    Dec 2011

    Posted 09 May 2012 Link to this post

    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.
  7. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 09 May 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready