'mvc Kendo grid with an kendo autocomplete column not working

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


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source