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

其中＆＃34; Home＆＃34;是HomeContrller的名称和＆＃34; GetNames＆＃34;是控制器上Action的名称。确保添加＆＃34; NameAutoCompleteTemplate.cshtlm＆＃34;在Views \ Shared \ EditorTemplates目录下

Option #2:如果您希望通过剃须刀引擎加载自动完成的数据源，那么您就不必拥有单独的服务来将数据加载到自动完成功能。在这种情况下，您可以将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)
          })
)

希望这有帮助。

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

1 个答案: