filterBarTemplate is not updated dynamically with changing select options

[Ryan Costache]

Potentially related:

Value does not update properly after changing it from the component in Blazor | Feedback Portal (syncfusion.com)

<e-column
  field="difficulty"
  headerText="{{'NIVEAU'|uppercase}}"
  textAlign="left"
  [filterBarTemplate]="templateOptionsDropDownDifficulty"
></e-column>

public _templateOptionsDropDownDifficulty: IFilterUI = {};

public get templateOptionsDropDownDifficulty(): IFilterUI | undefined {
  return this._templateOptionsDropDownDifficulty;
}

onInit:

this._templateOptionsDropDownDifficulty = {
  create: () => {
    this.dropdownDifficulty = document.createElement('select');
    if (this.dropdownDifficulty) this.dropdownDifficulty.id = 'NIVEAU';

    this.dropdownDifficulty?.replaceChildren();

    const option = document.createElement('option');
    option.value = '';
    option.innerText = 'tout';
    this.dropdownDifficulty?.appendChild(option);

    this.difficultyDistinctData
      .forEach((item: object) => {
        const option = document.createElement('option');
        option.value = (item as ItemType).difficulty;
        option.innerText = (item as ItemType).difficulty;
        (this.dropdownDifficulty as HTMLElement).appendChild(option);
      });

    return this.dropdownDifficultyGetter;
  },
  write: () => {
    const dropdownlist = new DropDownList({
      change: this.dropdownFunctionDifficulty.bind(this),
    });

    dropdownlist.appendTo(this.dropdownDifficulty);
  },
};

and after the user picks an option from a different filterBarTemplate:

this._templateOptionsDropDownDifficulty = {
  create: () => {
    this.dropdownDifficulty = document.createElement('select');
    if (this.dropdownDifficulty) this.dropdownDifficulty.id = 'NIVEAU';

    this.dropdownDifficulty?.replaceChildren();

    const option = document.createElement('option');
    option.value = '';
    option.innerText = 'tout';
    this.dropdownDifficulty?.appendChild(option);

    if (this.selectedCompetency) {
      this.currentCompetency = (this.competencies ?? [])?.find(
        (competency) => competency.name === this.selectedCompetency,
      ) as CompetenceDetail;

      console.log('currentCompetency: ', this.currentCompetency);

      (
        this.currentCompetency as CompetenceDetail & {
          groupDifficultyLevels: { name: string }[];
        }
      ).groupDifficultyLevels
        .forEach((item: object) => {
          const option = document.createElement('option');
          option.value = (item as ItemType).id;
          option.innerText = (item as ItemType).name;
          (this.dropdownDifficulty as HTMLElement).appendChild(option);
        });
    }

    return this.dropdownDifficultyGetter;
  },
  write: () => {
    const dropdownlist = new DropDownList({
      change: this.dropdownFunctionDifficulty.bind(this),
    });

    dropdownlist.appendTo(this.dropdownDifficulty);
  },
};

[Johnson Soundararajan S]

Hi Ryan Costache,

We have reviewed your query and shared relevant feedback. Based on our understanding, you want to filter the data dynamically by selecting a dropdown option. We have successfully created a sample that meets your requirements.

Sample : Syncfusion-content - Ej2 Angular Docs (forked) - StackBlitz

If this does not meet your requirements, Kindly provide the following details:

1. Would you like to filter the data by pressing the "Enter" key after selecting an option from the dropdown?

2. Could you kindly provide further details regarding the requirements?
3. Please share your complete grid rendering code along with the associated event.
4. Could you please provide a simple replicating sample and the replication procedures in a step-by-step manner?
5. If possible, could you share a video demonstration of the reported issue?
6. If feasible, please share your attempts to reproduce the reported issue using the provided sample. 

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Johnson Soundararajan S