c# - 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<SamuraiListing.Data.Company>()
        // Grid Name
    .Name("CompanyGrid")

    // Declare grid column


    .Columns(columns =>
                 {
                     // Cretae all the columns base on Model
                     columns.Bound(r => r.Name);
                     columns.Bound(r => r.Telephone);
                     columns.Bound(r => r.Email);
                     columns.Bound(r => r.GPS);

                     // Edit and Delete button column
                     columns.Command(command =>
                                         {
                                             command.Edit();
                                             command.Destroy();
                                         }).Width(200);
                 })

    // Declare ajax datasource.
        // CRUD operation are wired back to ASP MVC Controller/Action e.g. HomeController, GetAll
        // Set the model Id
    .DataSource(datasoure => datasoure.Ajax()
                                .Model(model => model.Id(record => record.Id))
                                .Read(read => read.Action("GetAll", "Home"))
                                .Create(create => create.Action("Add", "Home"))
                                .Update(update => update.Action("Update", "Home"))
                                .Destroy(delete => delete.Action("Delete", "Home"))
                                .PageSize(10)
    )

    // Add tool bar with Create button
    .ToolBar(toolbar => toolbar.Create())

    // Set grid editable.
    .Editable(editable => editable.Mode(GridEditMode.InLine))

    // Set grid sortable.
    .Sortable()

    // Set grid selectable.
    .Selectable()
    .Navigatable()

    // Set grid pagable.
    .Pageable(pageable =>
                  {
                      pageable.Refresh(true);
                      pageable.PageSizes(true);
                  })
)

Suppose I want to show list of Names in an autocomplete manner where can I add my code? I've read plenty of threads and posts on the net but none pointed to asp.net wrapper.

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 ViewsSharedEditorTemplates 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.