How can I connect two autocomplete component?

[Henry Flantrmsky]

Hi.

I have two autocomplete components in a template for edit and add items to a DataGrid. How can I connect the second DatASource, so when I change the item in Autocomplete1, I need to filter the Autocomplete2.

[Aishwarya Rameshbabu]

Hi Henry Flantrmsky,

Greetings from Syncfusion support.

After reviewing your inquiry, it appears that you need to display two AutoComplete components in a Grid edit form and update the value of one component based on the other. We have created a sample to meet your requirement. In this sample, we have implemented the AutoComplete component using the columns->edit->params property along with a  specified object that includes the necessary functions for creating, reading, and writing the AutoComplete component in the ‘ShipCountry’ and ‘ShipCity’ columns of the Grid. We have handled the filtering of the ‘ShipCity’ AutoComplete component in the change event of the ‘ShipCountry’ component. For further information, please refer to the code example, sample, and video demonstration provided below.

App.component.html

 

                <e-columns>

                    <e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' isPrimaryKey='true' width=100></e-column>

                    <e-column field='CustomerID' headerText='Customer ID' type= 'string' width=140></e-column>

                    <e-column field='ShipCountry' headerText='Ship Country'

                     [edit]='shipParams' width=150></e-column>

                    <e-column field='ShipState' headerText='Ship State' editType= 'dropdownedit' [edit]='stateParams' 

width=150></e-column>

                </e-columns>

 

App.component.ts

 

    this.shipParams = {

      create: () => {

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

        return this.countryElem;

      },

      read: () => {

        return this.countryObj.text;

      },

      destroy: () => {

        this.countryObj.destroy();

      },

      write: (args: any) => {

        this.countryObj = new AutoComplete({

          allowCustom: true,

          dataSource: this.country,

          fields: { value: 'countryName' },

          placeholder: 'Country',

          change: (args) => {

            this.stateObj.enabled = args.value != null ? true : false;

            // Creating filter query

            var tempQuery: Query = new Query().where(

              'countryId',

              'equal',

              args.itemData.countryId

            );

            this.stateObj.query = tempQuery;

            (this.stateObj.text as string) = '';

            this.stateObj.dataBind();

          },

        });

        this.countryObj.appendTo(this.countryElem);

      },

    };

 

    this.stateParams = {

      create: () => {

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

        return this.stateElem;

      },

      read: () => {

        return this.stateObj.text;

      },

      destroy: () => {

        this.stateObj.destroy();

      },

      write: (args: any) => {

        this.stateObj = new AutoComplete({

          allowCustom: true,

          enabled: false,

          dataSource: this.state,

          placeholder: 'State',

          fields: { value: 'stateName' },

        });

        this.stateObj.appendTo(this.stateElem);

      },

    };

 

Sample: https://stackblitz.com/edit/github-gjc3sp-afpgkn?file=src%2Fapp.component.ts,src%2Fdatasource.ts

If you need any further assistance or have additional questions, please feel free to let us know.

Regards

Aishwarya R

Attachment: AutoCompleteEdit_f9df1820.zip