How to have an autocomplete field inside kendoUI grid using asp.net mvc wrapper

Question

I want to create an autocomplete field inside my kendoUI grid. but I can\'t find any propper way on net.

This is my view :

@(Html.Kendo().Grid

        

Answer 1

You can try to do it this way:

Option #1: if you would like autocomplete control load data from web server

columns.Bound(r => r.Name)
       .EditorTemplateName("NamesAutoCompleteTemplate");

Than you will have to create template with the same file name as template name. In this exammple it's NameAutoCompleteTemplate.cshtml and add following code to it:

@model string

@(Html.Kendo().AutoCompleteFor(m => m)       
          .DataTextField("Name")
          .Filter(FilterType.StartsWith)
          .Suggest(true)
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetNames", "Home");
              })
              .ServerFiltering(false);
          })
)

Where "Home" is name of your HomeContrller and "GetNames" is name of the Action on your controller. Make sure you add "NameAutoCompleteTemplate.cshtlm" under Views\Shared\EditorTemplates directory

Option #2: If you would like autocomplete's datasource to be loaded via razor engine, so you don't have to have separate service to load data to autocomplete. In this case you can set Name to your ViewModel or in my example I set it to ViewBag and pass it to template.

columns.Bound(r => r.Name)
       .EditorViewData(new {ViewBag.Names})
       .EditorTemplateName("NamesAutoCompleteTemplate");

and in your NameAutoCompleteTemplate.cshtml file you will have to write code this way:

@model string

@(Html.Kendo().AutoCompleteFor(m => m)       
          .DataTextField("Name")
          .Filter(FilterType.StartsWith)
          .Suggest(true)
          .BindTo(ViewBag.Names)
          })
)

Hope this helps.