This is a migrated thread and some comments may be shown as answers.

Add a Button in nodatatemplate of Autocomplete in MVC

2 Answers 214 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Ajith
Top achievements
Rank 1
Ajith asked on 30 Jan 2020, 03:24 PM
How to add a kendo button in nodatatemplate of autocomplete widget in MVC. Sample screenshot is attached.

2 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 03 Feb 2020, 10:03 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Ajith
Top achievements
Rank 1
answered on 03 Feb 2020, 02:25 PM
Thanks Danchev 
Tags
AutoComplete
Asked by
Ajith
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Ajith
Top achievements
Rank 1
Share this question
or