We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

I am initializing a grid with localData and fitlerType: excel

dataSource: localData,
allowPaging: true,
allowSorting: true,
allowFiltering: true,
pageSettings: { pageSize: 25 },
filterSettings: { filterType: "excel" },
scrollSettings: { height: 550 },
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,

Attachment: edialog_6daf771e.zip

3 Replies

SA Saravanan Arunachalam Syncfusion Team June 22, 2016 05:31 AM UTC

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. 
Please share us more details regarding the issue and provide a solution as early as possible.  
Saravanan A. 

AT Alexandros Tzoumas June 24, 2016 01:34 PM UTC

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

IR Isuriya Rajan Syncfusion Team June 27, 2016 12:37 PM UTC

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. 
Isuriya R.   

Live Chat Icon For mobile
Up arrow icon