Autocomplete in grid edit.

[Adam Nester]

Can the grid support Autocomplete instead of Dropdownlist? 

[Thavasianand Sankaranarayanan]

Hi Adam, 

Greetings from Syncfusion support. 

We can achieve your requirement using the cell edit template feature of our Grid. 

In the below code example we have bound autocomplete for “ShipCountry” column in Grid. 

[index.js] 

var elem; 

var dObj; 

var shipCountryData = ["Italy", "Mexico", "Ireland", "USA", "France", "Germany", "UK", "Finland", "Spain", "Sweden"]; 

 

var grid = new ej.grids.Grid({ 

  dataSource: window.orderDataSource.splice(0, 20), 

  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition: 'Top' }, 

  allowPaging: true, 

  pageSettings: { pageSize: 5 }, 

  toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 

  columns: [ 

 

      . . . . .  

 

    { 

      field: 'ShipCountry', headerText: 'Ship Country', width: 150, 

      edit: { 

        create: function () { 

          elem = document.createElement('input'); 

          return elem; 

        }, 

        read: function () { 

          return dObj.value; 

        }, 

        destroy: function () { 

          dObj.destroy(); 

        }, 

        write: function (args) { 

          dObj = new ej.dropdowns.AutoComplete({ 

            dataSource: shipCountryData, 

            value: args.rowData["ShipCountry"] ? args.rowData["ShipCountry"] : "", 

          }); 

          dObj.appendTo(elem); 

        } 

      } 

    } 

  ], 

}); 

We have prepared a simple sample in the following link. 

Link: https://stackblitz.com/edit/ebpnnk?file=index.js 

Refer the  help documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/grid/edit/?no-cache=1#cell-edit-template 

Regards, 

Thavasianand S.