New to Kendo UI for jQuery? Download free 30-day trial

Bind the viewModel in the noData Template of the ComboBox


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


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


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">
            <button class="k-button" data-bind="click: addNew">Add new fruit</button>

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

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">

    $(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);


In this article