Click here to Skip to main content
15,867,568 members
Articles / Web Development / ASP.NET / ASP.NET Core

Implementing an AutoComplete Control on ASP.NET Core using Telerik

Rate me:
Please Sign up or sign in to vote.
2.88/5 (5 votes)
25 Feb 2019CPOL3 min read 9.2K   1   10
Implementing an AutoComplete Control on ASP.NET Core using Telerik

Introduction

I was looking for an “autocomplete” solution that would allow the user to type any value in for a username search, and not have the web application bring back so much data that it slows down the app. So, the solution I had initially worked with was Telerik autocomplete for ASP.NET Core. It was fairly straightforward to get client or server filtering working, but the big disadvantage with that is that every single item from the search results will be returned, potentially resulting in a huge amount of data sent at once, which is never good. You could also directly code the paging mechanism into your controller, which will only bring back a page at a time, but there is an easier way! There is a virtualization option, but according to the demo on Telerik’s website, there are many other functions besides the main controller action to return all the data from a particular search. The sample code shows many functions that are not written that you would potentially have to write:

@(Html.Kendo().AutoComplete()
        .Name("orders")
        .DataTextField("ShipName")
        .Filter("contains")
        .HtmlAttributes(new { style = "width:100%" })
        .Placeholder("Type a ship name")
        .Template("#= OrderID | For: #= ShipName #, #= ShipCountry #")
        .Height(520)
        .DataSource(source => {
        source.Custom()
            .ServerFiltering(true)
            .ServerPaging(true)
            .PageSize(80)
            .Type("aspnetmvc-ajax")
                .Transport(transport =>
                {
                    transport.Read("Virtualization_Read", "AutoComplete");
                })
                .Schema(schema =>
                {
                    schema.Data("Data").Total("Total");
                });
         })
         .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
   )
   
   <div class="demo-hint">Hint: type "an"<
</div>
<script>
    function convertValues(value) {
        var data = {};
        value - $.isArray(value) ? value : [value];
        for (var idx = 0; idx < value.length; idx++) {
            data["values[" + idx + "]"] = value[idx];
        }
        return data;
    }
</script>

The value mapper controller action is missing from the demo, and it is not obvious what you need to write. This also may not work on ASP.NET core, as there is no obvious way to send the Request Verification Token back to the controller, (if you use a POST request.) But, according to the documentation for virtualization, the implementation of the valueMapper function is now optional, and is only required when the autocomplete widget contains an initial value or if the value method is used. So, now we can simply create our HTML markup as follows:

@(Html.Kendo().AutoCompleteFor(m => m.UserName)
.DataTextField("UserName")
.Events(e =>
{
e.Select("onRegistrationIdSelect");
})
.Filter("contains")
.MinLength(3)
.HtmlAttributes(@getHtmlAttributes())
.DataSource(source =>
{
    source.Custom()
    .ServerFiltering(true)
    .ServerPaging(true)
    .PageSize(80)
    .Type("aspnetmvc-ajax")
    .Transport(transport =>
    {
        transport.Read(r => r.Action("GetUsers", "Admin").Data("onAdditionalData").Type(HttpVerbs.Get));
    }).Schema(schema =>
    {
        schema.Data("Data) //define the [data](http://doc.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
        .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
    });
})
.Virtual(v => v.ItemHeight(26))
)

The controller code is basically the same as the ASP.NET Core demo code, so, no additional changes have to be made to accommodate virtualization, as that will be handled by Telerik Ajax code. It will essentially pass the correct parameters into your controller code, to only retrieve whatever page of data (or less) that it needs at any given point in time:

public DataSourceResult GetUsers([DataSourceRequest] DataSourceRequest request, string text)
{
    var users = userService.GetUsers{text);
    return users.ToDataSourceResult(request);
}

Now, you have complete markup and controller code, and can begin testing the behaviour and performance of the autocomplete functionality. It is interesting to compare it with only the Server Filtering option enabled, where when the autocomplete controller action is called, the entire dataset is returned (unless, of course, as I mentioned previously, you want to implement custom paging on the server side). So, with a potentially large user database, this won’t be a practical solution.

This is the same markup, but with only server filtering enabled, no virtualization. So, as you can see on each call, the entire dataset is returned:

Image 1

Now, let's see the big difference with virtualization enabled for autocomplete:

Image 2

The first few requests are the controller returning a particular page (or less than a page), per request. So, you can see a substantial reduction in the amount of data returned, which will increase the autocomplete responsiveness, and in turn the user experience.

So, as you can see, the new simplified virtualization feature on Telerik’s Autocomplete function is fairly simple to implement (if you have the patience to take their incomplete demo code, and also read most of the documentation). You definitely need to have a good understanding on how to actually implement the functionality, so you can fine-tune it if necessary. This is also an ideal solution for applications with very large datasets that need to be searched on demand, and yet provide a responsive user interface.

Source code on github can be found here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
CEO Kolaberate Software inc.
Canada Canada
Chris is a .NET Architect with over 17 years of experience working with various Microsoft technologies including most recently ASP.NET, SSRS, SSIS, SSAS and Sharepoint. Chris is now C.E.O. of Kolaberate Software, based in Vancouver, B.C.

Comments and Discussions

 
QuestionDemo Code? Pin
Jo-Anne19-Feb-19 10:41
Jo-Anne19-Feb-19 10:41 
AnswerRe: Demo Code? Pin
Chris A. Johnson19-Feb-19 11:15
professionalChris A. Johnson19-Feb-19 11:15 
GeneralRe: Demo Code? Pin
Jo-Anne19-Feb-19 11:26
Jo-Anne19-Feb-19 11:26 
GeneralRe: Demo Code? Pin
Jo-Anne23-Feb-19 1:55
Jo-Anne23-Feb-19 1:55 
GeneralRe: Demo Code? Pin
Chris A. Johnson25-Feb-19 14:42
professionalChris A. Johnson25-Feb-19 14:42 
GeneralRe: Demo Code? Pin
Jo-Anne25-Feb-19 18:17
Jo-Anne25-Feb-19 18:17 
QuestionImages... Pin
OriginalGriff17-Feb-19 20:56
mveOriginalGriff17-Feb-19 20:56 
AnswerRe: Images... Pin
Chris A. Johnson19-Feb-19 8:48
professionalChris A. Johnson19-Feb-19 8:48 
GeneralRe: Images... Pin
OriginalGriff19-Feb-19 10:14
mveOriginalGriff19-Feb-19 10:14 
GeneralRe: Images... Pin
Chris A. Johnson20-Feb-19 6:16
professionalChris A. Johnson20-Feb-19 6:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.