[Solved] Grid with AutoComplete editor not posting data

[Richard]

Hi all,
I've got a mvc grid setup with Ajax databinding where one of the columns uses the AutoComplete control for editing.  All the other columns are posting data on Update events (including columns using the DropDownList control) except this control.  Inside the controller action, when I inspect the HttpContext.Current.Request.Form collection, there's no data posted for this column. Here's some Grid definition:

<%= Html.Telerik()
    .Grid<RecipeIngredientModel>()
    .Editable(editing=>editing.Enabled(true))
    .Name("IngredientsList")
    .DataKeys(keys => keys.Add(o => o.RecipeIngredientId).RouteKey("RecipeIngredientId"))
    .DataBinding(dataBinding => dataBinding.Ajax()
            .Select("SelectAjaxIngredients", "Cookbook", new { recipeId = ViewData.Model.RecipeId })
            .Insert("InsertAjaxIngredient", "Cookbook", new { recipeId = ViewData.Model.RecipeId })
            .Update("UpdateAjaxIngredient", "Cookbook", new { recipeId = ViewData.Model.RecipeId })
            .Delete("DeleteAjaxIngredient", "Cookbook", new { recipeId = ViewData.Model.RecipeId }))
    .Columns(columns =>
                 {
                     columns.Bound(m => m.RecipeIngredientId).Hidden(true);
                     columns.Bound(m => m.Quantity).Width(90);
                     columns.Bound(m => m.Fraction).Width(90).ClientTemplate("<#= Fraction.FractionName #>").Title("Fraction");
                     columns.Bound(m => m.Unit).Width(115).ClientTemplate("<#= Unit.UnitName #>").Title("Unit");
                     columns.Bound(m => m.Ingredient).Width(200).ClientTemplate("<#= Ingredient.IngredientName #>").Title("Ingredient");
                     columns.Bound(m => m.Preparation).Width(250).Title("Preparation");
                 })
    .Editable(editing => editing.Mode(GridEditMode.InLine))
    .Selectable()
    .ClientEvents(events =>
                      {
                          events.OnRowSelect("ingredients_onRowSelected");
                          events.OnLoad("ingredients_resetSelection");
                          events.OnDataBinding("ingredients_resetSelection");
                          events.OnDataBound("ingredients_resetSelection");
                          events.OnEdit("ingredients_onEdit");
                      })
    .Footer(true)
%>

Here's some JavaScript code to trigger the update event:

$("#ingredientAcceptButton").click(function () {
    if (checkIngredientRowSelected()) {
        var grid = $("#IngredientsList").data("tGrid");
        grid.updateRow(selectedIngredientRow);
    }
});

and some code executed in the ingredients_onEdit method:

selectedIngredientRow = $(".t-grid-new-row");

Here's the model:

public class RecipeIngredientModel
{
    public virtual int RecipeIngredientId { get; set; }

    public virtual int RecipeId { get; set; }

    public virtual RecipeEntity Recipe { get; set; }

    public virtual int Order { get; set; }

    [UIHint("Integer")]
    public virtual int? Quantity { get; set; }

    [UIHint("Fraction")]
    public virtual FractionEntity Fraction { get; set; }

    public virtual int UnitId { get; set; }

    [UIHint("Unit")]
    public virtual UnitEntity Unit { get; set; }

    public virtual string IngredientName { get; set; }

    [UIHint("Ingredient"), Required]
    public virtual IngredientEntity Ingredient { get; set; }

    public virtual string Preparation { get; set; }
}

And here's the \Views\Shared\EditorTemplates\Ingredient.ascx file:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Models.RecipeIngredientModel>" %>

<%= Html.Telerik().AutoCompleteFor(m => m.IngredientName)
        .Name("Ingredient")
        .Encode(false)
        .BindTo((IEnumerable<string>)ViewData["ingredients"])
        .AutoFill(true)
        .HighlightFirstMatch(true)
        .Filterable(filtering => filtering.FilterMode(AutoCompleteFilterMode.Contains))
%>

Any help would be greatly appreciated! All the best, Richard.