Syncfusion Grid Filter Menu UI issue. Menu has gap in between.

[Amarender Tangella]

I have with columnMenuOptions and Filter in the header in a angular project.

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.

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.

Below are the two images of my issue and my expectation.

.TS

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
}
}

​ HTML

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

[Vignesh Sivagnanam]

Hi Amarender 

  

Greetings from Syncfusion support 

  

Based on your query you have faced UI issue while providing custom elements to the filter menu and open the filter in the column menu. We have validated your issue at our side, but we are unable to reproduce the reported issue at our end.  

  

Please refer the below Sample for your reference, 

  

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

  

 

  

If you still faced the reported problem at your end, please share the below details to validate further on this issue, 

  

1. Share full Grid code example 

  

2. If possible, replicate the issue in the above sample or share the issue reproduced sample. 

  

3. Syncfusion package version. 

  

Please get back to us for further assistance. 

  

Regards 

Vignesh Sivagnanam 

[Amarender Tangella]

Hi Vignesh, 

Thanks for your response. OK, I tried removing all the code and just implemented a simple <ejs-grid> with columnMenu and filter. The column menu is fine, but I don't know why the filterMenu have some gap from the filter. Why does this happen? I tried with a brand new project it works fine, for some reason its not working properly in my project. And there is no CSS classes or Code added. It's just same code I used in my new sample project and the current project. What would be the reason of this? Does it has to be something with the version I am using or Bootstrap version etc..

Thanks,

Amar

[Amarender Tangella]

Hi Vignesh,

Even in the example you shared, click on the last column menu. The menu opens in a different column and also the filter menu goes out of the screen. Please find the images below or you can inspect yourself.

Thanks for your response. OK, I tried removing all the code and just implemented a simple with columnMenu and filter. The column menu is fine, but I don't know why the filterMenu have some gap from the filter. Why does this happen? I tried with a brand new project it works fine, for some reason its not working properly in my project. And there is no CSS classes or Code added. It's just same code I used in my new sample project and the current project. What would be the reason of this? Does it has to be something with the version I am using or Bootstrap version etc..

Below is the code I used:

<ejs-grid #unitsGrid [dataSource]='dataSource' id="gridcomp" allowPaging='true' allowGrouping='true' allowSorting='true' showColumnMenu='true' allowFiltering='true' [columnMenuItems]='columnMenuItems' [filterSettings]='filterSettings'>

<e-columns>

<e-column field='unitId' headerText='Order ID' [filter]='filter'>e-column>

<e-column field='description' headerText='Customer Name' showInColumnChooser='false'>e-column>

<e-column field='type' headerText='Freight' format='C2' textAlign='Right'>e-column>

e-columns>

ejs-grid>

const filterSettings = gridFilterSettings(this.translate);

export const gridFilterSettings = ((translate: TranslateService): FilterSettingsModel => {

return {

type: "Menu",

operators: {

stringOperator: [{ value: "Contains", text: translate.instant("shared.grid-filter.contains") }],

dateOperator: [

{ value: "GreaterThan", text: translate.instant("shared.grid-filter.greater-than") },

{ value: "LessThan", text: translate.instant("shared.grid-filter.less-than") },

],

},

};

})

Note: I tried even removing the filterSettings and just use a plain filter and column menu's. But, it is still the same. Is there a event or function to edit the menu position?

Thanks,

Amar

[Amarender Tangella]

Thanks for that. I have replied in that issue forum my availability.

[Padmini Ramamurthy]

Hi Amarender, 

  

Thank you, Please follow up that incident for further updates. 

  

Regards, 

Padmini 

[Luciana Mattiaccio]

Hi All,

I found the same issue while using Bootstrap5 theme, I switched to regular Bootstrap and it works.

I saw the gap on B5 and tried to edit the positioning of the menu so it was overlapped but still wasn't working for me, it kept losing focus. I'll be digging on this later on so let's hope I find a solution.

All the best,
Luciana

[Luciana Mattiaccio]

Hi All, 

While using the regular Bootstrap theme the issue started too but not sure about the reason.
As Boostrap theme uses a shadow I was able to note the z-index was not correct.

Solved by adding one more level.

.e-filter-popup {z-index: 1000000001!important}

Hope this helps.

Regards,
Luciana

[Pavithra Subramaniyam]

Hi Luciana Mattiaccio,

Thanks for updating with the solution you have tried. Please get back to us for further assistance.

Regards,

Pavithra S