如何使用asp.net mvc包装器在kendoUI网格中拥有自动完成字段

Question

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

这是我的看法:

@(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包装器.

Answer 1

您可以尝试这样做:

Option #1: 如果您希望自动完成控制从Web服务器加载数据

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

您将不得不使用与模板名称相同的文件名创建模板.在这个例子中,它是NameAutoCompleteTemplate.cshtml并向其添加以下代码:

@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的名称.确保在Views\Shared\EditorTemplates目录下添加"NameAutoCompleteTemplate.cshtlm"

Option #2: 如果您希望通过razor引擎加载自动完成的数据源,那么您不必使用单独的服务来加载数据以自动完成.在这种情况下,您可以将Name设置为ViewModel,或者在我的示例中,我将其设置为ViewBag并将其传递给模板.

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

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

@model string

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

希望这可以帮助.