ejGrid | Dialog container for excel filter type not aligned properly inside the grid.

[Alexandros Tzoumas]

I am initializing a grid with localData and fitlerType: excel

$("#clients").ejGrid({
dataSource: localData,
allowPaging: true,
allowSorting: true,
allowFiltering: true,
pageSettings: { pageSize: 25 },
filterSettings: { filterType: "excel" },
scrollSettings: { height: 550 },
allowScrolling:true,
columns: [
{ field: "CL_ID", headerText: "ID", width: 20 },
{ field: "CL_NAME", headerText: "Name", width: 80 },
{ field: "MediaShop.MS_NAME", headerText: "Media Shop", width: 75},
{ field: "Company.ET_NAME", headerText: "Company", width: 75 },
{ field: "CL_ACTIVE_YEARS", headerText: "Active Years", width: 80},
{ field: "CL_ADDR", headerText: "Address", width: 110}
]
});

When i click on the last column on the filter icon the dialog that opens is not displayed correctly (Attached screenshot)

The div $("#clients") has 100% width inside a bootstrap .row (under a .col-md-12). That .row has overflow-x:hidden, thus
if the dialog is displayed out of the actual #clients div it doesnt get displayed.

Is there a way to control the position of the grid?

My solution at the moment is adding a css class to the grid when the last column is clicked. And overriding the absolute positioned dialog left and right position, to force it display inside the grid.

Thank you,
Alex

Attachment: edialog_6daf771e.zip

[Saravanan Arunachalam]

Hi Alexandros, 

Thanks for contacting Syncfusion support. 

We are unable to reproduce the reported issue and we have created a sample  based on your query  that can be downloaded from the below link. 

Sample Link: https://jsplayground.syncfusion.com/ccalbat3  

Please share us more details regarding the issue and provide a solution as early as possible.  

Regards, 

Saravanan A. 

[Alexandros Tzoumas]

Unfortunately it does occur also in the example you've send me.

Though its pretty difficult to reproduce. Please check a screen capture (.gif) i took while reproducing it.

In order to do so i changed the size of the window.

In the last frames the context menu is positioned outside of the area of grid

Attachment: Example_gif_8d066991.zip

[Isuriya Rajan]

Hi Alexandros, 

While opening the filter dialog, the pop up offset will be calculated based on the document width rather than the width of the Grid element. So if the pop up exceeds the document, then it will be positioned to accommodate within the document as follows(so that the browser horizontal scroller will not be enabled). 

 

 

In the GIF, we noticed the Grid has sufficient place to show the filter popup , hence it is placed like in the below screenshot. This is the default behavior. 

 

 

Regards, 

Isuriya R.