Syncfusion Grid Filter create UI is targeting wrong element for appending the html element

Question

So, I just started on Syncfusion and it's annoying. I have <ejs-grid> with columnMenuOptions and Filter in the header in a angular project. When I try to create UI for the Filter menu, I am doing as follows:

Code

public filter: IFilter = {
  ui: {
    create: (args: {
      target: Element;column: Column
    }) => {
      const flValInput: HTMLElement = createElement("input", {
        className: "flm-input",
      });

      args.target.appendChild(flValInput);
    });
  read: //read
    write: //write
}
}

<ejs-grid [columnMenuItems]="columnMenuItems" [allowFiltering]="true">
  <e-columns>
    <e-column field="Id" headerText='OrderNo' [filter]="filter">
    </e-column>
  </e-columns>
</ejs-grid>

My Issue

So, from what I understood is that the Filter menu created using ui is appending to the table column. So, my issue here is as my filter menu is a sub-menu of filter as in the image. But, the sub menu is appended to the table column. This makes the UI break. Since, the UI element created is appended to the table column its alignment is respective to the table header and not the filter menu.

My issue with UI

What I need

I want the created element to be respective to the Filter menu and not the table column. Any idea how to fix this. I want to append the element to another element instead of the column.

score 1 · Answer 1 · edited Sep 29 '21 at 21:31

Based on your requirement you have added a custom filter component to a particular column in EJ2 Grid, when you try open the sub menu of the filter menu it is getting appended to the table column.

Using the code example and the screenshot provided we have prepared a sample, but we were not able to reproduce the mentioned issue. Hence we would like you to provide the following details so that we provide you a better solution. • If possible replicate the mentioned problem in below sample. • Share the complete Grid rendering code. • Ensure whether you have rendered the grid in any third party component or inside any EJ2 components. • If you have rendered the grid inside any third party component or EJ2 components, please provide the complete details of the component. • Share the Syncfusion package version you are using.

Sample: https://stackblitz.com/edit/angular-ykhisf?file=app.component.ts

Syncfusion Grid Filter create UI is targeting wrong element for appending the html element

1 Answers1