Bind the viewModel in the noData Template of the ComboBox

Environment

Product	Progress® Kendo UI® ComboBox for jQuery
Operating System	Windows 8.1
Browser	IE For PC
Browser Version	IE11

Description

How can I trigger the click event of a button which is nested in the noDataTemplate of the ComboBox?

Solution

The noDataTemplate is initially hidden which means that the binding of the model is not applied to it. This logic causes the inability to trigger events of widgets that are nested in the template. As a result, once the template is rendered, you have to manually bind of the viewModel in the dataBound event of the Combobox.

1. Check the number of rendered items. Zero items suggest that the noDataTemplate is rendered.
2. Manually invoke the binding of the viewModel by using the client API of the ComboBox.

<div id="example">
    <script type="text/x-kendo-tmpl" id="template">
        <div>
            #=fruit#
            <button class="k-button" data-bind="click: addNew">Add new fruit</button>
        </div>
    </script>

    <script type="text/x-kendo-tmpl" id="noDataTemplate">
        <div>
            No fruit found. Do you want to add a new one - '#: instance.text() #' ?
        </div>
        <br />
        <button id="btnNoData" class="k-button" data-bind="click: addNew">Add new fruit</button>
</div>
</script>

Fruits: <select id="combobox" data-role="combobox" data-filter="startswith" data-bind="source:fruits,
                            events: {                              
                              dataBound: onDataBound
                              }" data-text-field="fruit" data-value-field="id" data-no-data-template="noDataTemplate" data-template="template">
            </select>
<br/><br/>

<script>
    $(document).ready(function(e) {
        var viewModel = kendo.observable({
            fruits: [{
                    fruit: "Apple",
                    id: 1
                },
                {
                    fruit: "Orange",
                    id: 2
                },
                {
                    fruit: "Cherry",
                    id: 3
                }
            ],
            addNew: function() {
                if (confirm("Are you sure?")) {}
            },

            onDataBound: function(e) {
                if(e.sender.items().length == 0)
                {
                    kendo.bind($("#btnNoData"), viewModel);
                }
            }

        });

        kendo.bind($("#example"), viewModel);

    })
</script>