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
close icon

Autocomplete on grid column

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.


11 Replies 1 reply marked as answer

PS Pavithra Subramaniyam Syncfusion Team March 15, 2023 07:52 AM UTC

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



NM Nathan Mead replied to Pavithra Subramaniyam March 29, 2023 08:02 PM UTC

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? 



PS Pavithra Subramaniyam Syncfusion Team April 3, 2023 12:57 PM UTC

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



NM Nathan Mead replied to Pavithra Subramaniyam April 5, 2023 07:12 PM UTC

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? 



PS Pavithra Subramaniyam Syncfusion Team April 6, 2023 04:45 AM UTC

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;

  }

}




NM Nathan Mead replied to Pavithra Subramaniyam April 7, 2023 04:16 PM UTC

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



PS Pavithra Subramaniyam Syncfusion Team April 10, 2023 01:50 PM UTC

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';

  }

}

 




NM Nathan Mead April 10, 2023 10:37 PM UTC

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. 



PS Pavithra Subramaniyam Syncfusion Team April 11, 2023 12:09 PM UTC

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);

  }

}

 



Marked as answer

NM Nathan Mead replied to Pavithra Subramaniyam April 12, 2023 05:26 PM UTC

This works perfect! Thank you!



SG Suganya Gopinath Syncfusion Team April 13, 2023 11:57 AM UTC

Hi Nathan, 

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


Loader.
Live Chat Icon For mobile
Up arrow icon