mvc Kendo grid with an kendo autocomplete column not working - asp.net-mvc

Question

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