如何使用 asp.net mvc 包装器在 kendoUI 网格中设置自动完成字段 [英] How to have an autocomplete field inside kendoUI grid using asp.net mvc wrapper

问题描述

我想在我的 kendoUI 网格中创建一个自动完成字段.但我在网上找不到任何合适的方法.

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

这是我的看法:

@(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);
                  })
)

假设我想以自动完成方式显示名称列表，我可以在哪里添加我的代码?我在网上阅读了大量主题和帖子，但没有一个指向 asp.net 包装器.

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.

推荐答案

你可以尝试这样做:

Option #1: 如果你想从网络服务器自动完成控制加载数据

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

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

您必须创建与模板名称具有相同文件名的模板.在此示例中，它是 NameAutoCompleteTemplate.cshtml 并向其添加以下代码:

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);
          })
)

其中Home"是您的 HomeContrller 的名称，GetNames"是您控制器上的 Action 的名称.确保在 ViewsSharedEditorTemplates 目录下添加NameAutoCompleteTemplate.cshtlm"

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: 如果您希望通过 razor 引擎加载自动完成的数据源，那么您不必有单独的服务来加载数据以进行自动完成.在这种情况下，您可以将 Name 设置为 ViewModel，或者在我的示例中将其设置为 ViewBag 并将其传递给模板.

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");

并且在您的 NameAutoCompleteTemplate.cshtml 文件中，您必须以这种方式编写代码:

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)
          })
)

希望这会有所帮助.

这篇关于如何使用 asp.net mvc 包装器在 kendoUI 网格中设置自动完成字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！