Declined
Last Updated: 29 May 2019 06:48 by ADMIN
Amber
Created on: 15 May 2019 19:52
Category: AutoComplete
Type: Feature Request
0
Have AutoComplete control submit value also
I was looking into why the data value of the Autocomplete control was not submitting to my controller via an ajax form and came across this article: https://www.telerik.com/forums/autocomplete-send-selected-dataitem-to-controller#-BRzEKVnbUyebqxFKYWpcA. Would it be possible in a future release to include a dataValueField option so that the value of the data item selected can be used by the controller? What's weird is this is not an issue when using the autocomplete control inside a grid. I was able to get the value and update my model.
3 comments
ADMIN
Veselin Tsvetanov
Posted on: 29 May 2019 06:48
Hello Amber,

Thank you for sharing your approach. I believe it would be of use to other developers too.

Regards,
Veselin Tsvetanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Amber
Posted on: 22 May 2019 13:17

Hello. Thanks for your reply. I was not aware of the ComboBox. I will have to check it out. I actually got this working after all using the AutoComplete control by utilizing the Select event and saving dataItem value to hidden field inside the AJAX form. 

Here is the razor code, controller and service that handles the Grid with AutoComplete update functionality. The AutoComplete is hooked up to an object with Id and Name properties.

RAZOR

@(Html.Kendo().Grid<AppTracker.ViewModels.QueuedAgentViewModel>()
                .Name("gridAgents")
                .Columns(columns =>
                {
                    columns.Select().Width(50);
                    columns.Bound(a => a.Agent).ClientTemplate("#= data.Agent ? Agent.FullName : '' # ").Title("Existing Agent").EditorTemplateName("AgentAutoComplete");
                    columns.Bound(c => c.FirstName);
                    columns.Bound(b => b.MiddleName).ClientTemplate("#= MiddleName == 'NA' || MiddleName == null ? '' : MiddleName #");
                    columns.Bound(p => p.LastName);
                    columns.Bound(p => p.Suffix).ClientTemplate("#= Suffix == 'NA' || Suffix == null ? '' : Suffix #");
                    columns.Bound(a => a.Dba).Editable("dbaEditable");
                    columns.Bound(a => a.Npn).Title("NPN");
                })
                .ToolBar(toolbar => {
                    toolbar.Custom().IconClass("fal fa-plus-circle").Text(" Add New Agents").HtmlAttributes(new { id = "btnAddAgents", @class="btn-warning"}).Url("#");
                    toolbar.Save();
                })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Sortable()
                .Filterable()
                .Pageable()
                .NoRecords()
                .PersistSelection()
                .HtmlAttributes(new { @class="table"})
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .ServerOperation(false)
                    .Events(events => events.Error("errorHandler"))
                    .Model(model =>
                    {
                        model.Id(p => p.AgentId);
                        model.Field(e => e.AgentId).Editable(false);
                        model.Field(e => e.Dba).Editable(false);
                    })
                    .PageSize(25)
                    .Read(read => read.Action("QueuedAgentViewModel_Read", "Data", new { importId = Model.Import_Id }))
                    .Update(update => update.Action("QueuedAgentViewModel_Update", "Data"))
                )
            )

 

CUSTOM EDITOR

@model ResultEntryViewModel

@(Html.Kendo().AutoComplete()
    .Name("Agent")
    .DataTextField("FullName")
    .Filter("contains")
    .MinLength(3)
    .HtmlAttributes(new { style = "width:100%" })
    .DataSource(source => {
        source.Read(read =>
        {
            read.Action("GetAgents", "Data")
                .Data("onAdditionalData");
        })
        .ServerFiltering(true);
    })
)

CONTROLLER

[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult QueuedAgentViewModel_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<QueuedAgentViewModel> agents)
        {
            if(agents != null && ModelState.IsValid)
            {
                foreach(var agent in agents)
                {
                    QueuedAgentGridService.Update(agent);
                }
            }

            return Json(agents.ToDataSourceResult(request, ModelState));
        }

 

SERVICE

public static void Update(QueuedAgentViewModel agent)
        {
            AgentDataActions.UpdateQueuedAgent(db, agent.AgentId, agent.FirstName, agent.MiddleName, agent.LastName, agent.Suffix, agent.Npn, agent.Dba ?? "", agent.Agent == null ? 0 : Convert.ToInt32(agent.Agent.Id));

        }

ADMIN
Veselin Tsvetanov
Posted on: 22 May 2019 12:01
Hello Amber,

By design the AutoComplete widget is intended to store and bind only the text value of the selected item. That makes it different from the ComboBox widget, which would be bound to the value of the selected item, or to the entire selected data item. Similarly to the AutoComplete, the ComboBox also accepts custom text, which in such scenario, will be used as a value of the widget. Having that said, if you need dataItem value binding, I would recommend you to use the ComboBox instead.

As per the Grid scenario in question, may I ask you to prepare and send us a small isolated sample, where the AutoComplete editor works with the dataItem value instead of the text?

Regards,
Veselin Tsvetanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.