O'Reilly logo

Learning Kendo UI Web Development by John Adams

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using Templates to Customize AutoComplete

Kendo templates can be used to customize the appearance of the items in your AutoComplete. This can even get quite fancy with images and special styles. Here is a simple example. Update the Razor portion of the AutoCompletePage.cshtml page to look like this:

@{
var template = "#= Name # - #= IsState #";
}
@(Html.Kendo().AutoComplete()
    .Name("statesAndTerritories")
    .Placeholder("Choose state or territory...")
    .DataTextField("Name")
    .Filter("startswith")
    .DataSource(source =>
    {
      source.Read(read =>
      {
        read.Action("AutoCompleteData", "Kendo")
                    .Data("onAdditionalData");
      })
    .ServerFiltering(false);
    })
    .Template(template)
)

Here we have added a variable called template that is holding our Kendo template definition. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required