Autocomplete Widget inside Grid using URL Adapter

[Robert Horowitz]

How can I use the AutoComplete widget inside the Grid for CRUD? I'd like the records to be populated as the user types it.  I want the data source for the autocomplete to be a URL Adapter.  The lookup tables that drive the autocomplete can get rather large so the URL Adapter is more appropriate as I can narrow down the amount of data sent to the browser.

My question is an extension to a question that was answered in the following thread:

https://www.syncfusion.com/forums/160823/autocomplete-widget-inside-grid

I tried to extend the code for query #1 in that post but I could not get a URL adapter to work for this example.

[Rajapandiyan Settu]

Hi Robert, 

Thanks for contacting Syncfusion support. 

Query: How can I use the AutoComplete widget inside the Grid for CRUD? I'd like the records to be populated as the user types it.  I want the data source for the autocomplete to be a URL Adapter.  

You can achieve your requirement by using cellEditTemplate feature of Grid. Find the below code example and sample for more information. 

cellEditTemplate: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/#cell-edit-template   

AutoComplete with URL Adaptor: https://ej2.syncfusion.com/aspnetmvc/documentation/auto-complete/data-binding/#bind-to-url-adaptor 

col.Field("EmployeeID").ForeignKeyField("EmployeeID").ForeignKeyValue("ShipName").DataSource((IEnumerable<object>)ViewBag.DataSource2).HeaderText("Ship Name").Width("150").ValidationRules(new { required = true }).Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Add(); 

 

<script> 

    var elem; 

    var dObj; 

    var data = new ej.data.DataManager({ 

        url: '/Home/UrlDatasourceCountry', 

        adaptor: new ej.data.UrlAdaptor(), 

    }); 

 

    function create(args) { 

        elem = document.createElement('input'); 

        return elem; 

    } 

    function write(args) { 

        // render the autoComplete control 

        dObj = new ej.dropdowns.AutoComplete({ 

            dataSource: data,  // bind the urlAdaptor data 

            value: args.rowData[args.column.field], 

            fields: { text: 'ShipName', value: 'EmployeeID' }, placeholder: 'Ship Name', 

            // set placeholder to AutoComplete input element 

            placeholder: "Select ShipName" 

        }); 

        dObj.appendTo(elem); 

    } 

 

    function destroy() { 

        dObj.destroy(); 

    } 

    function read(args) { 

        // return the value to Grid 

        return dObj.value; 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc_grid_autoComplete_url1511066467.zip 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S 

[Robert Horowitz]

Thank you.  This solved the issue for me.

[Rajapandiyan Settu]

Hi Robert, 

We are glad to hear that you have resolved the issue with the provided solution. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandiyan S