如何使用asp.net mvc的包装有kendoUI网格内自动完成场 [英] How to have an autocomplete field inside kendoUI grid using asp.net mvc wrapper

问题描述

我要创造我的kendoUI网格内自动完成场。但我无法找到任何网络方式propper

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

假设我想显示自动完成的方式我在哪里可以加我的code名称的列表？
我读过许多线程和职位在网上，但没有指出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.

推荐答案

您可以尝试做这种方式：

You can try to do it this way:

选项＃1：如果您想从Web服务器自动完成控制负载数据

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

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

比你将不得不使用相同的文件名作为模板名称创建模板。在这种exammple它NameAutoCompleteTemplate.cshtml并添加以下code到它：

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

其中，家是你HomeContrller的名称，GetNames就是您的控制器上的操作名称。请确保您添加NameAutoCompleteTemplate.cshtlm下查看\\共享\\ EditorTemplates目录

Where "Home" is name of your HomeContrller and "GetNames" is name of the Action on your controller. Make sure you add "NameAutoCompleteTemplate.cshtlm" under Views\Shared\EditorTemplates directory

选项＃2：如果您想通过剃刀引擎加载自动完成的数据源，所以你不必有单独的服务将数据加载到自动完成。在这种情况下，您可以设置名称为您的视图模型还是在我的例子中，我将它设置为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文件，你会不得不写code是这样的：

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屋！