c# - Cómo tener un campo de autocompletar dentro de la grilla kendoUI usando el envoltorio asp.net mvc

grid razor

Question

Quiero crear un campo de autocompletar dentro de mi grilla kendoUI. pero no puedo encontrar ningún camino adecuado en la red.

Esta es mi opinión:

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

Supongamos que quiero mostrar la lista de nombres en una forma de autocompletar, ¿dónde puedo agregar mi código? He leído muchos hilos y publicaciones en la red, pero ninguno apunta al contenedor asp.net.

Answer 1

Puedes intentar hacerlo de esta manera:

Option #1: si desea que el control de autocompletar cargue datos del servidor web

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

Luego tendrá que crear una plantilla con el mismo nombre de archivo que el nombre de la plantilla. En este ejemplo, es NameAutoCompleteTemplate.cshtml y agrega el siguiente código:

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

Donde "Inicio" es el nombre de su HomeContrller y "GetNames" es el nombre de la Acción en su controlador. Asegúrese de agregar "NameAutoCompleteTemplate.cshtlm" en el directorio Views / Shared / EditorTemplates

Option #2: si desea que el origen de datos de autocompletar se cargue a través del motor de afeitado, no necesita tener un servicio por separado para cargar los datos y autocompletarlos. En este caso, puede establecer Nombre para su ViewModel o, en mi ejemplo, configurarlo en ViewBag y pasarlo a la plantilla.

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

y en su archivo NameAutoCompleteTemplate.cshtml tendrá que escribir el código de esta manera:

@model string

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

Espero que esto ayude.