Add a Button in nodatatemplate of Autocomplete in MVC

[Ajith]

How to add a kendo button in nodatatemplate of autocomplete widget in MVC. Sample screenshot is attached.

[Ivan Danchev]

Hello Ajith,

You can add a button to the MVC AutoComplete through its .NoDataTemplateId option. Here's an example:

<script id="noDataTemplate" type="text/x-kendo-tmpl">
	<div>
		No data found. Do you want to add new item - '#: instance.element.val() #' ?
	</div>
	<br />
	<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.element.val() #')">Add new item</button>
</script>

@(Html.Kendo().AutoComplete()
	.Name("products")
	.DataTextField("Text")
	.Filter("contains")
	.NoDataTemplateId("noDataTemplate")
	.BindTo(new List<SelectListItem>() {
		new SelectListItem() {
			Text = "Black",
			Value = "1"
		},
		new SelectListItem() {
			Text = "Orange",
			Value = "2"
		},
		new SelectListItem() {
			Text = "Grey",
			Value = "3"
		}
	})
)

<script>
    function addNew(widgetId, value) {
        var widget = $("#" + widgetId).getKendoAutoComplete();
        var dataSource = widget.dataSource;

        if (confirm("Are you sure?")) {
            dataSource.add({
            	Value: 0,
                Text: value
            });

            dataSource.one("sync", function() {
                widget.close();
            });

            dataSource.sync();
        }
    };
</script>

Regards,
Ivan Danchev
Progress Telerik

[Ajith]

Thanks Danchev