Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
312 views
in Technique[技术] by (71.8m points)

c# - How to have an autocomplete field inside kendoUI grid using asp.net mvc wrapper

I want to create an autocomplete field inside my kendoUI grid. but I can't find any propper way on net.

This is my view :

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

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can try to do it this way:

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

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

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

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

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

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

Hope this helps.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...