dropdown search filter not working.

[sunil]

Hi,

I am providing code which i implemented search filter in dropdown list but not working..

html compnent code

 <ejs-dropdownlist floatLabelType="Always" id='documentName' name="documentName"

          [dataSource]='agreementTypeDatas' [fields]='fieldsvalues'  popupHeight='200px'

          (change)='onDocumentSelect($event)' ngModel

          required  [allowFiltering]='true' (filtering)='onFiltering($event)'>

        </ejs-dropdownlist>

      <

 //Bind the filter event

  public onFiltering: EmitType<Object> = (e: FilteringEventArgs) => {

    alert(e);

    let query = new Query();

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

    query = (e.text != "") ? query.where("documentName", "startswith", e.text, true) : query;

    console.log(JSON.stringify(query) + "qury.......................");

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

    e.updateData(this.data, query);

  };

  // Getting Data

  getAgreementTypeData(event) {

    this.documentService.getAllDocuments().subscribe(response => {

      if (response != null) {

        this.agreementTypeDatas = response

        this.agreementTypeDatas.forEach(data => {

          console.log(JSON.stringify(data));

          console.log(JSON.stringify(this.agreementTypeDatas) + "Response Data@@@@@@@@@@@@@@@@@@@@@@@@");

          this.agreementTypeDatas1.push(data.documentName);

          //    this.agreementTypeDatas1.push(data.documentName);

        })

        // for(var i in this.agreementTypeDatas1)

        // {

        //   this.agreementTypeDatas112.push(this.agreementTypeDatas1[i])

        // }

        this.fieldsvalues = { text: "documentName", value: "documentTypeId" };

      } else {

        console.log('Data not fount');

      }

    });

    this.agreementTypeDatas11 = this.agreementTypeDatas1;

  }

[Sureshkumar P]

We will validate the requirement in our component. We update you in two business days (May 27^th, 2022).

[sunil]

Thanks for update.I will wait for your reply.

[Sureshkumar P]

Hi Sunil,

We suggest you provide the data source variable name instead of this.data into the filtering event handler method to achieve your requirement.

Please find the code example:

[app.component.html]

<ejs-dropdownlist id='country' [dataSource]='agreementTypeDatas' [fields]='fields'

            (filtering)='onFiltering($event)' [filterBarPlaceholder]="filterPlaceholder" [popupHeight]='height'

            [allowFiltering]='true' [placeholder]='watermark'></ejs-dropdownlist>

 

[app.component.ts]

 //define the filtering data

  public agreementTypeDatas: { [key: string]: Object; }[] = [

    { Name: 'Australia', Code: 'AU' },

    { Name: 'Bermuda', Code: 'BM' },

    { Name: 'Canada', Code: 'CA' },

    { Name: 'Cameroon', Code: 'CM' },

    { Name: 'Denmark', Code: 'DK' },

    { Name: 'France', Code: 'FR' },

    { Name: 'Finland', Code: 'FI' },

    { Name: 'Germany', Code: 'DE' },

    { Name: 'Greenland', Code: 'GL' },

    { Name: 'Hong Kong', Code: 'HK' },

    { Name: 'India', Code: 'IN' },

    { Name: 'Italy', Code: 'IT' },

    { Name: 'Japan', Code: 'JP' },

    { Name: 'Mexico', Code: 'MX' },

    { Name: 'Norway', Code: 'NO' },

    { Name: 'Poland', Code: 'PL' },

    { Name: 'Switzerland', Code: 'CH' },

    { Name: 'United Kingdom', Code: 'GB' },

    { Name: 'United States', Code: 'US' }

  ];

  // maps the appropriate column to fields property

  public fields: Object = { text: 'Name', value: 'Code' };

  // set the height of the popup element

  public height: string = '220px';

  // set the placeholder to DropDownList input element

  public watermark: string = 'Select a country';

  // set the placeholder to filter search box input element

  public filterPlaceholder: string = 'Search';

  // filtering event handler to filter a Country

  public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {

    let query: Query = new Query();

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

    query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;

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

    e.updateData(this.agreementTypeDatas, query);

  }

 

Find the sample here: https://stackblitz.com/edit/angular-eburzs?file=app.component.ts,app.component.html

Find the screenshot here:

Regards,

Sureshkumar P