Using Autocomplete in ASP.NET Core Grid column using tag helpers

[Rajesh]

Hello I have being looking for examples on  using auto complete using tag helpers  but coulnt find any 

in my grid column i have

        <column field="TechnicianAssigned" width="250" editor="categoryDropDownEditor" />

 

 and the categoryDropDownEditor has  code as below....the code hits the  url but not sure how to pass the data from column to  method and serach the functionality.Any example would be helpful.

 

   function categoryDropDownEditor(data) {
            $('<input data-bind="value: value" name="' + data.field + '"/>')
                .kendoAutoComplete({
                    dataSource: {
                        transport: {
                            read: {
                                url: "/Home/EmpSearchData",
                                dataType: "jsonp"
                            }
                        }
                    },
                    dataTextField: "ename",

                    filter: "contains",
                    minLength: 4
                });
        }

[Alexander]

Hi Rajesh,

Thank you for reaching out and for sharing the currently held AutoComplete implementation thus far. I really appreciate it.

Generally, the client-side DataSource widget incarnation exposes a transport.read.data configuration that is used for supplementing any arbitrary data within the respective endpoint. With that in mind, you can desegregate the event data into two portions:

• container - holding the wrapper element for the given cell.
• options - holding grid information as well as the to-be-edited model.

And from there, alter the client-side implementation in the following manner in order to both supplement the required field value and the respective AutoComplete's value:

<script>
    function categoryDropDownEditor(container, options) {
        function additionalData() {
            return { 
                'tripId': options.model.TripID,
                'text': $(container).find("input").data("kendoAutoComplete").value()
            };
        }
        $('<input data-bind="value: TechnicianAssigned" name="' + options.field + '"/>')
            .appendTo(container)
            .kendoAutoComplete({
                dataSource: {
                    serverFiltering: true,
                    transport: {
                        read: {
                            url: "/Home/EmpSearchData",
                            dataType: "json",
                            data: additionalData
                        }
                    }
                },
                dataTextField: "ename",
                filter: "contains",
                minLength: 4
            });
    }
</script>

This will then ensure that both values are passed within the respective endpoint:

Where the value is changed in the following way:

For your convenience, I am also attaching a runnable sample for you to review that tackles such an approach that could be of use to the community as well.

Kind Regards,
Alexander
Progress Telerik