AutoComplete in grid column

[Ahmad]

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

[Daniel]

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

[Toan]

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,

[Daniel]

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

 

 

[Susan]

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