Data Grid Filter is cut off

[Kenney Phan]

Hi when my data grid table is shorter than the length of the column checkbox filter, it gets cut off as shown in the video.

How do I set the z-index of the column filter to be greater than the data grid? Or how else can I resolve this issue?

Thank you

Attachment: Filter_cut_off_e29254a7.zip

[Rahul Narayanasamy]

Hi Kenney, 

Greetings from Syncfusion. 

Query: Data Grid Filter is cut off 

We have validated your query with the provided information. We suspect that you have rendered accordion component inside the Grid detail template and rendered another Grid within the accordion component. In this scenario while opening the filter dialog in Grid(which is rendered inside accordion control), the filter dialog is hidden. 

If yes, then you show the full filter dialog by using below CSS. Find the below code snippets  and sample for your reference. 

 

<style> 

    . . . 

 

    .e-accordion .e-acrdn-item, 

    .e-accordion .e-acrdn-item .e-acrdn-panel, 

    .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content, 

    .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content > * { 

        overflow: visible; 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/forum/166306/ze/Sample-1449297672  

If you have faced any other scenarios, then could you please share more details(Full code snippets, how you are rendering the Grid(whether did you render Grid in another component)). It will be helpful to validate and provide a better solution. 

Regards, 

Rahul 

[Kenney Phan]

Yes, you are correct. I am rendering accordion component inside Grid detail template and rendered another Grid within the accordion component.

However, your solution does not resolve the issue. The filter dialog is still be truncated below by the table.

I want the filter to overflow over the table below like this

[Rahul Narayanasamy]

Hi Kenney, 

Thanks for the update. 

We have validated your query and with the provided details. In the previously provided sample, we have provided solution to show the filter dialog over the accordion control item. It will show the dialog without any issues. Find the below screenshots and sample for your reference. 

[Before applying the CSS solution] 

 

[After applying the CSS solution] 

 

Also, in the previously provided sample Grid Height is set as static. So you can see the exceeded Grid content by scrolling. You can see the filter dialog by scrolling the content. Now we have set the Grid Height as auto.  

Please find the below sample for reference. 

Sample: https://www.syncfusion.com/downloads/support/forum/166306/ze/SampleNew1752007052  

Please let us know if you have any concerns. 

Regards, 

Rahul 

 

[Kenney Phan]

Thank you for your help

[Rahul Narayanasamy]

Hi Kenney, 

Thanks for the update. 

Please get back to us if you need further assistance. 

Regards, 

Rahul