New to Kendo UI for jQueryStart a free 30-day trial

Bind the viewModel in the noData Template of the ComboBox

Environment

ProductProgress® Kendo UI® ComboBox for jQuery
Operating SystemWindows 8.1
BrowserIE For PC
Browser VersionIE11

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>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support