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

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

这是我的看法：

@(Html.Kendo().Grid() // 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 eg 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); }) ) 

假设我想以自动完成的方式显示名称列表，我可以在哪里添加我的代码？ 我在网上看过很多post和post，但都没有指向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:如果您希望通过剃刀引擎加载自动完成的数据源，那么您不必使用单独的服务来将数据加载到自动完成。 在这种情况下，您可以将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) }) ) 

希望这可以帮助。