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

2 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    1 posts
    Member since:
    Jun 2014

    Posted 22 Apr 2015 Link to this post

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

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 24 Apr 2015 Link to this post

    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.

     
Back to Top