Add Item when item not found for AutoComplete

[Jennifer]

Hello,

I'm using AutoComplete to read and list from the database a list of locations as the user types in the textbox. I would like to 'Add a new item' if the item does not appear from the AutoComplete list - similar to the one found here: https://demos.telerik.com/kendo-ui/autocomplete/addnewitem. Below is the code that I'm working with. Thank you in advance for any help.

Index.cshtml

01.    @(Html.Kendo().AutoComplete()
02.          .Name("Location")
03.          .HtmlAttributes(new { style = "width:100%" })
04.          .DataSource(source => source.Ajax()
05.        .Read(read => read.Action("GetLocations", "Home").Data("sendAntiForgery"))
06.           )
07.          )
08.    )
09.
10.<script type="text/javascript">
11.    function sendAntiForgery() {
12.        return { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() }
13.    }
14.</script>

 

HomeController.cs

1.[HttpPost]
2.[ValidateAntiForgeryToken]
3.public ActionResult GetLocations([DataSourceRequest] DataSourceRequest request)
4.{
5.    return Json(LocationRepo.GetLocations(Conn.MyStruct.GetSqlConnection(new SqlConnection(), Constants.defaultConnection).ConnectionString).ToDataSourceResult(request));
6.}

 

LocationRepository.cs

01.public List<Location> GetLocations(string conn)
02.{
03.    List<Location> locations = new List<Location>();
04.    using (rContext db = new rContext(conn))
05.    {
06.        locations = (from l in db.Locations
07.                               select l).ToList();
08.    }
09.    return locations;
10.}

asdf

[Ianko]

Hello Jennifer,

The same can be implemented with the MVC wrapper as well. 

The only difference is that the DataSource cannot be used to push a change, but a simple AJAX request to a controller will do the same:

<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("Location")
    .HtmlAttributes(new { style = "width:100%" })
    ...
    .NoDataTemplateId("noDataTemplate")

)


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

        $.ajax({
            url: // Send an AJAX reuqest to a controller to send the value and save the item
            data: {
                value: value
            },
            ...
        })

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

 

 

Regards,
Ianko
Progress Telerik