Implement the AutoComplete Dropdown in DataGrid Row Entry

Question

Hello,I have created a Syncfusion GridComponent with three columns: 1)KeyName 2)English 3)FrenchRight now, whenever the user wants to add a row, they have to fill in each row as usual.What I am trying to do is, after filling in the KeyName column and the user goes to the English column, there should be an AutoComplete dropdown to show the same KeyName entry.Secondly, there should also be a AutoComplete dropdown menu apparent when the user traverses to the French column with the translation value developed from an API call.Essentially, I am trying to combine with (https://ej2.syncfusion.com/react/demos/?_gl=1*13gs1q3*_ga*MjE4NTYzNDQ5LjE2NDcyNzI3MDg.*_ga_WC4JKKPHH0*MTY0ODA1ODk1Ni45NS4xLjE2NDgwNTk0ODUuMA..&_ga=2.142035253.640057674.1647956047-218563449.1647272708#/material/auto-complete/default)Kindly provide your guidance.

Software Dev · Accepted Answer

Hello Joseph,Thank you for your reply.Can you please suggest an alternate approach to my issue.For example, upon populating the 'keyName" column and switching to the "enu" and/or the "frc" column, instead of a drop-down menu, is there a popup menu I can implement.Please suggest possible suggestions since the AutComplete approach does not work to my intentions.Looking forward to your response.

Software Dev · Answer

Please note that the reason why there should be a drop down for the English and French 
ColumnDirectives during the row entry is to give a user a choice on which value they want to enter i.e. the suggested French translation developed by the API call or their own translation.

Joseph Christ Nithin Issack · Answer

Based on your requirement, when you add a new row, you want to have 2 autocompletes in two of the columns and need to display the options of second autocomplete based on the value selected from a first autocomplete. You can achieve this by adding the autocomplete using the cell edit template feature and in the change event of the first autoComplete you can set the dataSource of the second autocomplete.

Please refer the below code example.

constructor() {

super(...arguments);

---------------------

this.countryParams = {

create: () => {

this.countryElem = document.createElement('input');

return this.countryElem;

},

destroy: () => {

this.countryObj.destroy();

},

read: () => {

return this.countryObj.text;

},

write: (args) => {

this.countryObj = new AutoComplete({

change: () => {

this.stateObj.enabled = true;

this.stateObj.dataSource = new DataManager(this.stateColl); // can send request to the server and get data here

const tempQuery = new Query().where(

'countryId',

'equal',

this.countryObj.value

);

this.stateObj.query = tempQuery;

this.stateObj.text = '';

this.stateObj.dataBind();

},

filtering: function (e) {

e.preventDefaultAction = true;

let predicate = new Predicate('countryName', 'contains', e.text);

predicate = predicate.or('countryId', 'contains', e.text);

let query = new Query();

//frame the query based on search string with filter type.

query = e.text != '' ? query.where(predicate) : query;

//pass the filter data source, filter query to updateData method.

e.updateData(this.dataSource, query);

},

dataSource: new DataManager(this.country), // set datasource for first autocomplete

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

fields: { value: 'countryId', text: 'countryName' },

filterType: 'StartsWith',

});

this.countryObj.appendTo(this.countryElem);

},

};

this.stateParams = {

create: () => {

this.stateElem = document.createElement('input');

return this.stateElem;

},

destroy: () => {

this.stateObj.destroy();

},

read: () => {

return this.stateObj.text;

},

write: (args) => {

console.log(args);

this.stateObj = new AutoComplete({

enabled: false,

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

fields: { value: 'stateId', text: 'stateName' },

filterType: 'StartsWith',

filtering: function (e) {

e.preventDefaultAction = true;

let predicate = new Predicate('stateName', 'contains', e.text);

predicate = predicate.or('stateId', 'contains', e.text);

let query = new Query();

//frame the query based on search string with filter type.

query = e.text != '' ? query.where(predicate) : query;

//pass the filter data source, filter query to updateData method.

e.updateData(this.dataSource, query);

},

});

this.stateObj.appendTo(this.stateElem);

},

};

}

render() {

return (

<GridComponent

dataSource={cascadeData}

editSettings={this.editOptions}

toolbar={this.toolbarOptions}

height={273}

>

---------------------

<ColumnDirective

field="ShipCountry"

headerText="Ship Country"

width="150"

editType="dropdownedit"

edit={this.countryParams}

textAlign="Right"

/>

<ColumnDirective

field="ShipState"

headerText="Ship State"

editType="dropdownedit"

edit={this.stateParams}

width="150"

/>

</ColumnsDirective>

</GridComponent>

);

}

Sample: https://stackblitz.com/edit/react-fb9dua?file=index.js

Please get back to us for further details.

Software Dev · Answer

Hello Joseph,

I have implemented the dropdown menu but it is only apparent during the write function/during row editing.

Please advise on how to display the dropdown menu during the adding function being triggered.

Kindly, see the attached file to thereby advise me:

import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Page, Sort, Filter, Edit, Toolbar, PageSettingsModel } from "@syncfusion/ej2-react-grids";

let grid: any;

let enuElem: any;

let enuObj: any;

export default class App extends React.Component<{}, {}> {

public pageOptions: PageSettingsModel = {

pageSizes: true,

};

private editSettings = {

allowEditing: true,

allowAdding: true,

allowDeleting: true,

};

public engParams = {

create: () => {

enuElem = document.createElement("input");

return enuElem;

},

destroy: () => {

enuObj.destroy();

},

read: () => {

return enuObj.text;

},

write: (args: any) => {

enuObj = new AutoComplete({

dataSource: new DataManager([args.rowData.keyName]),

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

fields: { value: "enu", text: "English" },

});

enuObj.appendTo(enuElem);

},

};

public render() {

return (

<GridComponent

toolbarClick={this.clickHandler}

ref={(g) => (grid = g)}

actionBegin={this.actionBegin.bind(this)}

actionComplete={this.actionComplete.bind(this)}

toolbar={this.toolbarOptions}

allowPaging={true}

allowSorting={true}

editSettings={this.editSettings}

pageSettings={this.pageOptions}

>

<ColumnDirective

field="keyName"

headerText="KEY"

textAlign="Right"

width="120"

isPrimaryKey={true}

/>

<ColumnDirective

field="enu"

headerText="ENU"

textAlign="Right"

width="120"

edit={this.engParams}

/>

</ColumnsDirective>

</GridComponent>

);

}

Software Dev · Answer

I thought that when adding a new record in my application, there will be no values for the Grid columns and the suggestion will be therefore empty. With that said, I tried setting a DataSource with values to the AutoComplete component inside the write method but that made things worse for both my edit and adding functions because now an empty list is returned for both functions being triggered.

write: (args: any) => {
      const data = grid.dataSource
      enuObj = new AutoComplete({
        dataSource: new DataManager([data.map((item: { keyName: any; }) => item.keyName)]), //The actual data
        value: args.rowData[args.column.field], //Points to which column you are on
        fields: { value: "enu", text: "English" }, //What does fields nested object do
      });
      enuObj.appendTo(enuElem);
    },

Please guide.

Software Dev · Answer

Secondly, where may I find the documentation for:

1) AutoComplete that goes into more depth than (https://ej2.syncfusion.com/react/documentation/auto-complete/getting-started/)

2) How to bridge/implement AutoComplete with Grid
3) Overall documenation as there is not enough depth/missing functions and keywords on this page (https://ej2.syncfusion.com/react/documentation/api/grid )

Please provide any such resources,
Thank you

Joseph Christ Nithin Issack · Answer

Before we proceed with your query, we would like you to share the following details so that we would be able to provide a better solution ASAP. 
  
·       You have used ‘args.rowData.keyName’ to assign value for your datasource of the autocomplete.  
·       Please share complete details how you are providing data to the datasource of the autocomplete. 
·       Please share a issue reproducible sample or reproduce the issue in the sample provided in the previous update. 
·       Please share the video demo of the issue you are facing with. 
  
Documentaiton Queries 
  
Query 1: AutoComplete that goes into more depth than 
  
  https://ej2.syncfusion.com/react/documentation/auto-complete/getting-started/  Please visit the above link and navigate to various topis of autocomplete using the side bar to the left side of the page. 
  
Query 2: How to bridge/implement AutoComplete with Grid 
  
   We have already provided all the details about this in the previous update regarding this please refer the below sample. 
  
Sample: https://stackblitz.com/edit/react-fb9dua-q735gw?file=index.js 
  
Query 3: Overall documenation as there is not enough depth/missing functions and keywords on this page. 
  
   Currently we are facing some issue with the react api documentation page we are working on it, we will fix this in any of our upcoming releases. Until then we suggest you to kindly refer the below javascript api documentation page for more details. 
  
Documentation: https://ej2.syncfusion.com/documentation/api/grid 
  
Please get back to us for further details.

Software Dev · Answer

Hello Joseph, Kindly, see these details to further clarify my issue along with the video and code attached:Please ignore the sample data.What I want AutoComplete to do is after populating the data in the KEY column when adding a new entry and going to the ENU column, once I press the down key, I want the exact same value to populate in the dropdown.As for the dropdown on the FRC column, I am trying to trigger an API Translate call which is currently not triggering.Please note that, when trying to Edit ENU and FRC, both the dropdowns are triggering/working. It is just during adding that causes the problem of AC not triggering.The actual datasource/REST API is of this form: [{"keyName":"dog","enu":"dog", "frc":"chien"},
{"keyName":"cat","enu":"cat", "frc":"chat"}

]Looking forward to your guidance,Software DevAttachment: AutoComplete_5e59ba02.zip

Joseph Christ Nithin Issack · Answer

currently we are validating your query, we will provide further details on or before 4th April 2022. we appreciate your patience until then.

Software Dev · Answer

Sounds good Joseph.

Joseph Christ Nithin Issack · Answer

Thanks for your update. We will provide the details as
promised. We appreciate your patience until then.

Software Dev · Answer

Hello Joseph,Please let me know the status of my query.Thank you.

Joseph Christ Nithin Issack · Answer

Sorry for the late response. We have modified the sample by adding a custom
component to the edit template of the keyName column. When you enter the key
value to the column the change event triggers and in the change event of the
text box you can set the datasource for the Autocomplete components of both enu
and frc columns.Please refer the below code example.

this.keyNameParams = {
        create: () => {
          this.keyNameElem = document.createElement('input');
          return this.keyNameElem;
        },
        destroy: () => {
          this.keyNameObj.destroy();
        },
        read: () => {
          return this.keyNameObj.value;
        },
        write: (args) => {
          this.keyNameObj = new TextBox({
            value: args.rowData[args.column.field],
            change: function (e) {
              let predicate = new Predicate('keyName', 'equal', e.value);
              let query = new Query();
              query = query.where(predicate);
              this.enuObj.dataSource = new DataManager(this.data);
              this.enuObj.query = query;
              this.frcObj.dataSource = new DataManager(this.data);
              this.frcObj.query = query;
            }.bind(this),
          });
          this.keyNameObj.appendTo(this.keyNameElem);
        },
      };

Sample: https://stackblitz.com/edit/react-fb9dua-1umesv?file=index.jsPlease get back to us for further details.

Software Dev · Answer

Hello Joseph,There may have been a misunderstanding.My aim is that during the entry of a new row upon filling in the 'keyName' column then moving to the 'English' column, once I hit the down arrow key to access the dropdown menu, it is expected to see the content inputted in the 'keyName'.Kindly, see the attached video for clarification for what I am trying to implement.If you see that your code yields different results, please send a video too.Looking forward to hearing from you.Attachment: AutoCompleteIssue_f5f7c3eb.zip

Joseph Christ Nithin Issack · Answer

In the sample provided in the last update, we have added
data only for keyNames ‘dog and cat’ so if you type dog or cat in the
keyName column you will be able to get the same for the autocomplete component
in the English and France column. In the sample we have added a edit template
for the keyName column and in the change event of the Textbox, we have
refreshed the datasource for the two Autocomplete components. If you type a key
that is not in the datasource the autocomplete dropdown will show `No
Records Found`.Please refer the below code example:

this.data = [
        { SNo: 1, keyName: 'dog', enu: 'dog', frc: 'chien' },
        { SNo: 2, keyName: 'cat', enu: 'cat', frc: 'chat' },
      ];
   
  this.keyNameParams = {
        create: () => {
          this.keyNameElem = document.createElement('input');
          return this.keyNameElem;
        },
        destroy: () => {
          this.keyNameObj.destroy();
        },
        read: () => {
          return this.keyNameObj.value;
        },
        write: (args) => {
          this.keyNameObj = new TextBox({
            value: args.rowData[args.column.field],
            change: function (e) {
              let predicate = new Predicate('keyName', 'equal', e.value);
              let query = new Query();
              query = query.where(predicate);
              this.enuObj.dataSource = new DataManager(this.data); // set datasource for enu autocomplete.
              this.enuObj.query = query;
              this.frcObj.dataSource = new DataManager(this.data); // set datasource for frc autocomplete.
              this.frcObj.query = query;
            }.bind(this),
          });
          this.keyNameObj.appendTo(this.keyNameElem);
        },
      };

Sample: https://stackblitz.com/edit/react-fb9dua-s8e4r9?file=index.jsWe have also added a video demo for your reference.Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/UNTITL~2324891945Please get back to us for further details.

Software Dev · Answer

Hello Joseph,I see there is still confusion which I will clarify.I am trying to utilize the Auto-complete functionality completely independent of any such data-source. Instead, I am trying to establish communication between the 'keyName' input field with the 'enu' and 'frc' input fields.Basically, how do I have the 'enu' and 'frc' input fields read the value already inputted into the 'keyName' input field?Looking forward to hearing back from you.

Joseph Christ Nithin Issack · Answer

By default, the AutoComplete component provides the matched
suggestion list from the datasource when a character is typed in the input,
from that the user can select one. So it is possible only if you provide the
datasource for the autocomplete to show the suggestion list in the popup. If
there is no datasource provided to the autocomplete and if you try to open the
popup using the down arrow or type any character in the input then the popup
will show `No Records Found`.  If this does not answer your query, kindly share more
detailed information of your requirement.Please get back to us for further details.

Software Dev · Answer

Thank you for creating the branched ticket and for providing guidance.https://support.syncfusion.com/support/tickets/375099

Joseph Christ Nithin Issack · Answer

Hi Rohan,  Thanks for your update.  We have created a new ticket under your Direct trac
account. We suggest you follow up with the incident for further updates. Please
log in using the below link.ticket: https://support.syncfusion.com/support/tickets/375099Regards,Joseph I.