Autocomplete on grid column

[Nathan Mead]

I am trying to add an autocomplete function when adding a row to a grid that is pulling data from a data table being passed to it by the controller. I need the autocomplete to pull data from a viewbag.

[Pavithra Subramaniyam]

Hi Nathan,

Thanks for contacting Syncfusion support.

You can achieve your requirement by using the “Cell Edit Template” feature which provides the option for rendering a custom editor component for the required column. Please refer to the below code example and documentation link for more information.

 <e-grid-column field="CustomerID"  type="string" headerText="Customer Name" type="string" width="150" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"></e-grid-column>

 

<script>

  var autoCompleteEle;

  var element

    function create(args) {

    element = document.createElement('input');

        return element;

    }

    function read(e) {

        return autoCompleteEle.value;

    }

    function destroy() {

    autoCompleteEle.destroy();

    }

    function write(args) {

    autoCompleteEle = new ej.dropdowns.AutoComplete({

      allowCustom: true,

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

      dataSource: @Html.Raw(Json.Serialize(ViewBag.DataSource));,

      fields: {value: 'CustomerID', text: 'CustomerID' }

    });

        autoCompleteEle.appendTo(element);

    }

</script>

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/edit-types#render-autocomplete-component-while-editing

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

Regards,

Pavithra S

[Nathan Mead]

Thank you! I have gotten this working as needed. One small issue that I need to fix though. Is there a way to prevent the user from clicking on the "Save" command icon if the input is not found in the AutoComplete list? 

[Pavithra Subramaniyam]

Hi Rahul Rai,

You can achieve your requirement by setting the style inside the “change” event. Please refer to the below code example for more information.

function write(args) {

  autoCompleteEle = new ej.dropdowns.AutoComplete({

    .  .  .

   change: (e) => {

    var saveButton = e.element.closest('tr').querySelector('.e-savebutton');

    if(e.value == null) {

    saveButton.classList.add('e-disabled');

    saveButton.style.pointerEvents = 'none';

  } else {

    saveButton.classList.remove('e-disabled');

    saveButton.style.pointerEvents = '';

  }

},

  });

 

autoCompleteEle.appendTo(element);

}

 

Regards,

Pavithra S

[Nathan Mead]

Thank you! Another thing I didnt realize I would need. Is there a way to only enable the input field when clicking on the "add" command and not when editing? 

[Pavithra Subramaniyam]

Nathan Mead,

You can dynamically enable the editing for a particular column inside the “actionBegin” event. Please refer to the below code example in which we have initially disabled the editing for a column and dynamically enable it inside the “actionBegin” event with “add” request type.

<e-grid-column field="CustomerID" headerText="Customer ID" allowEditing="false" type="string" width="120">

</e-grid-column>

 

 

function actionBegin(e) {

  if (e.requestType == 'add') {

    grid.columns[1].allowEditing = true;

  }

  if (e.requestType == 'save' || e.requestType == 'cancel') {

    grid.columns[1].allowEditing = false;

  }

}

[Nathan Mead]

Hello, this method does not work because the autocomplete input field is still showing up. Although it isnt allowing me to change the value it still activating the autocomplete. I do not want the input to get created at if the requestType is not 'add'. 

Thank you

[Pavithra Subramaniyam]

Hi Nathan Mead,

In our previous update we have disabled the editing of the column which will only disable the Autocomplete component. It will not prevent the creation of input element. However, you can hide the input element based on the add/edit action inside the “write” function. Please refer to the below code example for more information.

function write(args) {

  .  .  .

  autoCompleteEle.appendTo(element);

 

  if (args.requestType == 'beginEdit') {

    autoCompleteEle.inputWrapper.container.style.display = 'none';

  }

}

 

[Nathan Mead]

Thank you! I think the last thing I need with this change is to show the current data for the line while edits are being made. Currently, when running the code with this update, it shows a blank field instead of the current value. 

[Pavithra Subramaniyam]

Nathan,

You can achieve your requirement by adding a span element inside the “write” function. Please refer to the below code example for more information.

function write(args) {

  .  .  .

  autoCompleteEle.appendTo(element);

  if (args.requestType == 'beginEdit') {

    autoCompleteEle.inputWrapper.container.style.display = 'none';

    var span = document.createElement('span');

    span.innerHTML = args.rowData[args.column.field];

    autoCompleteEle.inputWrapper.container.parentElement.appendChild(span);

  }

}

 

[Nathan Mead]

This works perfect! Thank you!

[Suganya Gopinath]

Hi Nathan, 

We are glad that the provided solution helped to solve the issue. We are marking this thread as solved.