We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Autocomplete in grid edit.

Can the grid support Autocomplete instead of Dropdownlist? 

1 Reply

TS Thavasianand Sankaranarayanan Syncfusion Team August 22, 2019 05:42 AM UTC

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. 


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 () { 
        write: function (args) { 
          dObj = new ej.dropdowns.AutoComplete({ 
            dataSource: shipCountryData, 
            value: args.rowData["ShipCountry"] ? args.rowData["ShipCountry"] : "", 

We have prepared a simple sample in the following link. 

Refer the  help documentation. 

Thavasianand S. 

Live Chat Icon For mobile
Up arrow icon