Grid In-Line edit with AutoComplete results in [object Object]

[Jonathan]

I've got a Grid with a cell that has an editor template that contains an auto complete object.

When the edit for this cell is complete, the grid displays the data as "[object Object]".

If the user goes back and uses the auto complete to select a field, the correct string is passed back to the Grid from the Editor template, however the auto complete functionality becomes buggy. (no javascript errors are thrown)

 Grid Code:

@(Html.Kendo().Grid<PendingBatchListingInput>()
    .Name("PendingBatchListingInputGrid")
    .Columns(c=>
    {
c.Bound(a => a.InputDebtorName).Title("Debtor").EditorTemplateName("InputDebtorName") //Shows valued of [object Object] the first time it is edited, shows correct value if user goes back to edit cell again
})
    .DataSource(ds => ds.Ajax()

    .Model(m =>
    {
        m.Id(p =>p.InputId);

    })
    .Create(create => create.Action("PendingBatchListingInputCreate", "PendingBatchListing"))
    .Update(update => update.Action("PendingBatchListingInputUpdate", "PendingBatchListing"))
    .Read(r => r.Action("PendingBatchListingInputRead", "PendingBatchListing")
        .Data("getData")
        .Type(HttpVerbs.Post))
        .ServerOperation(false)
    )
.Editable(e=>e.Mode(GridEditMode.InCell))
)

Editor Template Code:

@model object
<script>
    function onAdditionalDataDebtorSearch() {
        $('#InputDebtorName').data("kendoAutoComplete").list.width(500);
        return {
            debtorName: $("#InputDebtorName").val(),
            clientId: null
        };
    }
</script>
@(Html.Kendo().AutoCompleteFor(m=>m)
    .HighlightFirst(true)
    .Filter(FilterType.StartsWith)
    .Height(500)
    .Placeholder("Select Debtor")
    .DataTextField("Name")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("ReadDebtorSearch", "PendingBatchListing")
                .Data("onAdditionalDataDebtorSearch");
        })
        .ServerFiltering(true);
    })
.MinLength(5)
    .Template(
        "<span>" +
            "#=data.Name#  | #=data.City#, #=data.State#" +
        "</span>"
    )
)

[Nikolay Rusev]

Hello Jonathan,

 

This behavior is due to the fact that you are binding the AutoComplete with objects as data. Thus when you choose a value the field in the Grid will be set as that object instead as the string.

 

In order to avoid this you should set ValuePrimitive(true) of the AutoComplete. Thus the widget will use the DataTextField, i.e the Name field, from the selected item to set as value of the InputDebtorName.

 

Regards,
Nikolay Rusev
Telerik