Dialog edit template component filter

[Szoke]

Dear Support !

If a razor component (which has an excel type filter) 

is used as part as a Datagrid dialog edit Template and opened for editing:

<GridEditSettings AllowAdding="false" AllowDeleting="false" AllowEditing="true" Mode="EditMode.Dialog" ShowDeleteConfirmDialog=true>
        <Template >
            @{
                sor = (context as GanttEroforrasokNezo);
                <GanttEroforrasSzerkeszt sor="sor" TetelCsatolo="sor.GanttAdatTetelCsatolo" FejCsatolo="sor.GanttFejId" EroforrasCsatolo="sor.GanttEroforrasId" ></GanttEroforrasSzerkeszt>
            }
        </Template>
    </GridEditSettings>

The Excel-type filter box does not appear (it seems that it remains in the background due to the z-index) :(

How can it be solved so that the filter box can be viewed even when opened as a Dialog edit template?

Thank you in advance for your help!

[Monisha Saravanan]

Hi Szoke,

Thank you for reaching out to us about your issue with the grid.

We suggest trying the provided CSS code to see if it resolves the issue you are experiencing.

<style>

    .e-grid .e-dialog.e-filter-popup.e-popup {

   overflow: unset;

        z-index: 1001 !important;   /* to change the z-index/overflow based on your layout */

 

  }

 

</style>

If the issue persists, please provide us with the requested details (entire grid code snippet, video demonstration of the issue, and a reproducing sample if possible) so we can further investigate and provide a solution.

We look forward to helping you resolve this issue as soon as possible.

Regards,

Monisha

[Szoke]

Dear Monisha !

We tried the solution, but unfortunately it did not bring good results: the filter window did not appear.

Here is a test application that we tested with:

https://github.com/lszoke66/GridFilter2

​

Thank you in advance for your help!

[Monisha Saravanan]

Hi Szoke,

After reviewing your sample, we have determined that the issue is caused by the fact that you have used the same ID for both the parent and child components. We recommend using different ID properties for both the grids in order to resolve this issue.

To help you implement this change, we have provided a modified sample and code snippet for your reference. We hope this helps to resolve the issue and that you are able to continue using our product without any further issues. If you have any further questions or concerns, please don't hesitate to reach out to us again.

@page "/EditComponent"

@using Syncfusion.Blazor.Grids

<h2>Edit component:Below Grid Excel Filter is not visible</h2>

<br/>

<div id = "ControlRegion">

<SfGrid  ID="Grid1" DataSource="@Orders"...

@page "/"

@using Syncfusion.Blazor.Grids

<h2>DataGrid</h2>

<br/>

<div id = "ControlRegion">

<SfGrid  ID="Grid"...

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridFilter2-607013786.zip

Regards,

Monisha

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Szoke]

Yes, the same ID was the problem! Thanks for your help !

[Monisha Saravanan]

Hi Szoke,

Welcome. Kindly get back to us if you have further queries. As always we will be happy to assist you.