This is a migrated thread and some comments may be shown as answers.

AutoComplete in grid column

3 Answers 514 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Ahmad
Top achievements
Rank 1
Ahmad asked on 05 Sep 2013, 08:19 PM
I use AutoComplete in grid column
But i can't send AutoComplete value to server
Please help me.
@(Html.Kendo().Grid<MvcApplication10.Models.Product>()
    .Name("Customers")
    .ToolBar(tb => tb.Create())
    .Pageable()
    .Columns(cols =>
    {
        cols.Bound(c => c.Name).EditorTemplateName("products");
        cols.Bound(c => c.Number);             
        cols.Command(cmd =>
        {
            cmd.Edit();
            cmd.Destroy();           
        });
    })
    .DataSource(dataSource => dataSource.Ajax()
        .Model(model => model.Id(c => c.ProductID))
        .Read("GetCustomers", "Product")
        .Update("UpdateCustomer", "Product")
        .Create("InsertCustomer", "Product")
        .Destroy("DeleteCustomer", "Product"))   
)
and AutoComplete file(products.cshtml) is placed in EditorTemplate folder in this view
 
@(Html.Kendo().AutoComplete()
          .Name("products")
          .DataTextField("Name")
          .Filter("contains")                         
          .MinLength(3)
          .HtmlAttributes(new { style = "width:250px" })
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetProducts", "AutoComplate");                                                                                 
              })
              .ServerFiltering(false);
          })
    )

3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 09 Sep 2013, 10:54 AM
Hello Ahmad,

The widget name should be the same as the property name in order for the value to be bound correctly:

@(Html.Kendo().AutoComplete()
      .Name("Name")
      .DataTextField("Name")
      .Filter("contains")                        
      .MinLength(3)
      .HtmlAttributes(new { style = "width:250px" })
      .DataSource(source => {
          source.Read(read =>
          {
              read.Action("GetProducts", "AutoComplate");                                                                                
          })
          .ServerFiltering(false);
      })
)
You could also remove the Name method and use the AutoCompleteFor helper to generate the correct name automatically based on the expression.

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Toan
Top achievements
Rank 1
answered on 07 Jun 2014, 03:05 AM
The same problem with me. I cannot display the Autocomplete value to grid column : Category . It cannot run in this grid column. But if i put autocomplete outside the Grid, it work. Please help

[quote]  View :

@(Html.Kendo().Grid<VNS1.Models.OrderViewModel>()
                .Name("Orders_#=ShopID#")
        .Columns(columns =>
        {

            columns.Bound(o => o.Category).EditorTemplateName("OrderEditor");
            columns.Bound(o => o.Quantity).Width(140);
            columns.Bound(o => o.Price).Width(200);
            columns.Command(command => { command.Destroy(); }).Width(172);
        })
                                .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); }

                    )
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Pageable()
            .Navigatable()
            .Sortable()
             
        .DataSource(source => source
            .Ajax()
            .Batch(true)
            .PageSize(4)
            .ServerOperation(false)
        .Model(model =>
                    {
                        model.Id(o => o.OID);
                    })

                    .Read(read => read.Action("Order_Read", "Order", new { ShopId = "#=ShopID#" }))
                    .Create(create => create.Action("Order_Create", "Order", new { ShopId = "#=ShopID#" })) // Action invoked when the user saves a new data item
                    .Update(update => update.Action("Order_Update", "Order"))  // Action invoked when the user saves an updated data item
                    .Destroy(destroy => destroy.Action("Order_Destroy", "Order")) // Action invoked when the user removes a data item
                    
                    )[/quote]

[quote]OrderEditor.cshtml :
@(Html.Kendo().AutoComplete()
          .Name("Category")
          .DataTextField("Category")
          .Filter("contains")
          .MinLength(1)
          .HtmlAttributes(new { style = "width:250px" })
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetCategory", "User");
              })
              .ServerFiltering(false);
          })
)

Regards,
0
Daniel
Telerik team
answered on 10 Jun 2014, 04:47 PM
Hello,

The code seems correct. Could you try with the valuePrimitive configuration:
Html.Kendo().AutoComplete()
      .Name("Category")
      .ValuePrimitive(true)
      ...

If the problem persists, then could you provide the code for the model and the controller as well?

Regards,
Daniel
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Susan
Top achievements
Rank 1
commented on 25 Mar 2022, 03:49 PM

@daniel

 

I'm trying out this same way to get autocomplete column working in my kendo grid but its not working. when the autocomplete is outside the grid it works.

could you give more information or a demo code which shows  how to make this work please?

I'm trying to add an kendo autocomplete column to my kendo grid and its not working. I tried using the telerik example with a datasource function instead of view bag as there will be lots of data to pull from. I used an kendo autocomplete widget outside the grid and it worked. all i need is to get it to work on the grid column.I tried the editor templates and its not working. I cant even see the column "Vendor" appearing on the grid.Here's my code.

@(Html.Kendo().Grid<Budget.ProductFieldsTRC>().Name("GridProductsTrc").Columns(columns =>{columns.Bound(p => p.ValidationErrors).Title("Validation Errors").Width(300);columns.Bound(p => p.VendorNo).Title("Vendor No").Width(250);columns.Bound(p => p.Vendor).EditorTemplateName("VendorEditor");columns.Bound(p => p.VendorName).Title("Vendor Name").Width(250);columns.Bound(p => p.Project).Title("Project").Width(250);columns.Bound(p => p.ZZZValue).Title("Prefix").Width(250);columns.Bound(p => p.Manf).Title("Manf").Width(250);columns.Bound(p => p.Type).Title("Type").Width(250);columns.Bound(p => p.Component).Title("Component").Width(250);columns.Bound(p => p.Description).Title("Description").Width(250); columns.Command(command => { command.Edit(); } ) .Width(200); }) .Editable(editable => editable.Mode(GridEditMode.InLine)) .Navigatable() .Pageable() .Filterable(ftb => ftb.Mode(GridFilterMode.Row)) .Selectable(selectable => selectable .Mode(GridSelectionMode.Multiple) .Type(GridSelectionType.Cell)) .HtmlAttributes(new { style = "height:400px" }) .Resizable(conf => conf.Columns(true)) .Scrollable() .Pageable(pager => pager .PageSizes(true) .Messages(messages => messages.ItemsPerPage("items are currently displayed")) ) .Reorderable(reorder => reorder.Columns(true)) .DataSource(dataSource => dataSource .Ajax() .Events(events => events.Error("error_handler")) .Update(update => update.Action("UpdateGridTrc", "Customer")) .PageSize(20) .Model(model => { model.Id(x => x.RowID); model.Field(fld => fld.VendorNo).Editable(true); model.Field(fld => fld.Vendor).Editable(true); model.Field(fld => fld.VendorName).Editable(true); model.Field(fld => fld.Project).Editable(true); model.Field(fld => fld.ZZZValue).Editable(true); model.Field(fld => fld.Manf).Editable(true); model.Field(fld => fld.Type).Editable(true); model.Field(fld => fld.Component).Editable(true); model.Field(fld => fld.Description).Editable(true); model.Field(fld => fld.ValidationErrors).Editable(false); }) .Read(read => read.Action("ViewProductGridTRC", "Customer")) ) )

MY EDITOR TEMPLATE -in the views/ shared/ editor template folder - called VENDOREDITOR

@model string

@(Html.Kendo().AutoComplete().Name("Vendor").DataTextField("VendorName")

.Placeholder("Type a vendor name")

.Template("#= VendorNo # | For: #= VendorName #").ValuePrimitive(true)

.Filter("contains").MinLength(1).DataSource(source =>{source.Read(read =>{read.Action("GetVendorList", "Customer")

.Data("onAdditionalData");}).ServerFiltering(true);}))

my filtering method for the autocomplete onAdditionalData method

function onAdditionalData() { return { text: $("#Vendor").val() }; }

 

MY CONTROLLER ACTION METHOD FOR THE AUTOCOMPLETE DATASOURCE

    public JsonResult GetVendorList(string text)
    {

        var result = GetVendors();

        if (!string.IsNullOrEmpty(text))
        {
            result = result.Where(p => p.VendorName.Contains(text)).ToList();
        }

        return Json(result, JsonRequestBehavior.AllowGet);

    }

AND

private static IEnumerable<Vendor> GetVendors()
{var result = Enumerable.Range(0, 10).Select(i => new Vendor{VendorNo = "" + i,VendorName = "Vendor " + i});        return result;    
 }
MY CONTROLLER ACTION METHOD FOR THE AUTOCOMPLETE DATASOURCE

    public JsonResult GetVendorList(string text)
    {

        var result = GetVendors();

        if (!string.IsNullOrEmpty(text))
        {
            result = result.Where(p => p.VendorName.Contains(text)).ToList();
        }

        return Json(result, JsonRequestBehavior.AllowGet);

    }

AND

private static IEnumerable<Vendor> GetVendors()
{var result = Enumerable.Range(0, 10).Select(i => new Vendor{VendorNo = "" + i,VendorName = "Vendor " + i});        return result;    
 }
Tags
AutoComplete
Asked by
Ahmad
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Toan
Top achievements
Rank 1
Share this question
or