1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Autocomplete Widget inside Grid

Autocomplete Widget inside Grid

Hi, i'm using Grid widget on MVC EJ2. One of the columns is a foreign key, for example: Cars with the foreing key Models. I have thousands of models. Im trying to use EditType("dropdownedit") for such column, but there's too many Models to choose from (thousands).

Query 1: How can i use the AutoComplete widget inside the Grid for CRUD? I'd like the records be populated as the user types it.

Query 2: Also i tried use DropDownList widget with filter feature, but all records are populated on loading wich makes it slow. I'd like the records be populated as the user types it.

Thank you.

1 Reply 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team December 22, 2020 03:33 AM UTC

Hi Rodrigo, 
 
Thanks for your patience. 
 
Query #1: How can i use the AutoComplete widget inside the Grid for CRUD? I'd like the records be populated as the user types it. 
 
You can achieve your requirement by using celleditTemplate feature. please refer to the below code example and documentation for more information. 
 
 
 
@Html.EJS().Grid("ForeignKey").DataSource((IEnumerable<object>)ViewBag.DataSource1).Columns(col => 
{ 
  col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
  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(); 
 
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
<script> 
    var elem; 
    var dObj; 
    var data = @Html.Raw(Json.Encode(ViewBag.DataSource2)); 
    function create(args) { 
        elem = document.createElement('input'); 
        return elem; 
    } 
    function write(args) { 
// render the autoComplete control 
        dObj = new ej.dropdowns.AutoComplete({ 
            dataSource: 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> 
 
 
 
 
Query #2: i tried use DropDownList widget with filter feature, but all records are populated on loading wich makes it slow. I'd like the records be populated as the user types it 
 
By analyzing your query, you were loading more than 1000 records to the dropdown. By default, it will take some time to load more no of records in the dropdown when click the dropdown icon. This is the behavior of dropdown control. We need to render less no of records in the dropdown for better performance. 
 
To overcome this, we suggested you use virtual scrolling in the dropdown. In which, we have initially loaded few records (Ex. 10) in the dropdownlist using the page query and dynamically loaded the next 10  records when scrolling the dropdown list. By using filtering feature of dropdown, you can filter the records from the whole dataSource.  
 
We have rendered the dropdown control by using cellEdit template feature. Find the below documentation. 
 
 
Please refer to the below code example and sample for more information. 
 
 
@Html.EJS().Grid("ForeignKey").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").InsertUrl("/Home/Insert").UpdateUrl("/Home/Update").RemoveUrl("/Home/Remove").Adaptor("UrlAdaptor"); }).Columns(col => 
{ 
  col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
  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(); 
  col.Field("ShipCity").HeaderText("Ship City").EditType("dropdownedit").Width("150").Add(); 
 
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
<script> 
    var elem; 
    var dObj; 
    let start = 10; 
    let end = 10; 
    var dropdown_query; 
    var predicateQuery1; 
    var data = @Html.Raw(Json.Encode(ViewBag.DataSource2)); 
    function create(args) { 
        elem = document.createElement('input'); 
        return elem; 
    } 
    function write(args) { 
// render the dropdown control 
        dObj = new ej.dropdowns.DropDownList({ 
 
            dataSource: data, 
            value: args.rowData[args.column.field], 
            fields: { text: 'ShipName', value: 'EmployeeID' }, placeholder: 'Ship Name', 
            query: new ej.data.Query().take(10), 
            allowFiltering: true, 
            filtering: filteringdd, 
            actionComplete: actionCompletedd, 
            open: onOpen, 
            popupHeight: "200px" 
        }); 
        dObj.appendTo(elem); 
    } 
 
    function destroy() { 
        dObj.destroy(); 
    } 
    function read(args) { 
        return dObj.value; 
    } 
    function onOpen(args) { 
            { 
                let listElement = this.list; 
                let FilterElement = this.popupObj.element.getElementsByClassName('e-filter-parent'); 
// dynamically load the records when scrolling 
                listElement.addEventListener('scroll', () => { 
                    if ((listElement.scrollTop + FilterElement[0].offsetHeight + listElement.offsetHeight >= listElement.scrollHeight)) { 
                        let filterQuery = predicateQuery1 ? predicateQuery1.clone() : new ej.data.Query(); 
                        var x = new ej.data.DataManager(this.dataSource).executeLocal(filterQuery.skip(start).take(end)); 
                        start = start + 10; 
                        console.log(x); 
                        this.addItem(x); 
                    } 
                }) 
            } 
        } 
// perform filtering in the dropdown 
        function filteringdd(e) { 
            start = 0; 
        end = 10; 
        dropdown_query = new ej.data.Query(); 
        // frame the query based on search string with filter type. 
        var predicateQuery = dropdown_query.where(new ej.data.Predicate('ShipName', 'contains', e.text, true).or('EmployeeID', 'startswith', e.text, true)); 
        predicateQuery1 = predicateQuery.clone(); 
        dropdown_query = (e.text !== '') ? predicateQuery.skip(start).take(end) : new ej.data.Query().skip(0).take(10); 
        start = 10; 
        end = 10; 
        if (e.text != "") { 
            // pass the filter data source, filter query to updateData method. 
            e.updateData(this.dataSource, dropdown_query); 
        } else { 
            predicateQuery1 = new ej.data.Query(); 
        this.query = new ej.data.Query().skip(0).take(10); 
    } 
} 
    function actionCompletedd(args) { 
            start = 10; 
    } 
 
</script> 
 
 
 
Dropdown events 
 
Please get back to us if you need further assistance with this. 
 
Regards,  
Rajapandiyan S

Marked as answer
Loader.
Up arrow icon