This is a migrated thread and some comments may be shown as answers.

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

1 Answer 59 Views
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Jonathan asked on 22 Apr 2015, 02:40 PM

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>"
    )
)

1 Answer, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 24 Apr 2015, 07:58 AM

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
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
Grid
Asked by
Jonathan
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Share this question
or