How to avoid syncfusion Blazor Dropdown is overlaying on the gird header and footer?

[Dulitha Hewa Kankanamge]

When Scrolling Grid up or down, syncfusion Blazor drop down is overlaying like this. how to fix that?

[Prathap Senthil]

Hi Dulitha Hewa Kankanamge,

We are unable to reproduce the reported issue when attempting to do so using the latest version 26.2.11. For your reference, we have attached a gif and a simple sample. So, to proceed with the reporting problem, we require some additional clarification from you. Please share the details below to proceed further at our end.

• Could you please share with us the version of the NuGet package you have used?
• Are you using custom CSS modifications on your SfDropDownButton component?
• To analyze the reported issue, could you please share a simple and reproducible sample that demonstrates the problem? Or Kindly share your attempts to replicate the issue using the attached simple sample.

Sample: https://blazorplayground.syncfusion.com/embed/BNVTtFhbzfxYVRgW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

Regards,
Prathap Senthil

Attachment: GIF_DropDownButton_836ce16c.zip

[Dulitha Hewa Kankanamge]

Hi,

The version of Nuget package is 25.2.5.

yes. I am using custom CSS modifications on my SfDropDownButton component.

<GridColumn HeaderText="Actions" Width="60">

    <Template>

        @{

            var user = (context as UserHelper);

            bool switchcheck = user.IsActive;

            string userId = $"{user.UserId}";

            <div class="action-div">

                <SfSwitch @ref="SwitchObj" @bind-Checked="@switchcheck" CssClass="switch-btn" @ontouchstart="(() => CheckSwitchButtonStatus(user))"></SfSwitch>

                <SfDropDownButton CssClass="e-caret-hide" IconCss="fa-solid fa-ellipsis-vertical">

                    <DropDownButtonEvents ItemSelected="ItemSelected"></DropDownButtonEvents>

                    <DropDownMenuItems>

                        <DropDownMenuItem IconCss="e-icons e-eye" Text="View" Id="@userId"></DropDownMenuItem>

                        <DropDownMenuItem IconCss="e-icons e-trash" Text="Delete" Id="@userId"></DropDownMenuItem>

                    </DropDownMenuItems>

                </SfDropDownButton>

            </div>

</Template>

</GridColumn>

Here, how I was use the dropdown in the grid for every rows.

[Prathap Senthil]

Based on the reported problem, we recommend using the following approach to open the specific SfDropDownButton in the column template to resolve the issue. Below is a sample code snippet that you can use as a reference.

<SfGrid DataSource="@Employees" EnableAdaptiveUI AllowPaging="true">

    <GridPageSettings PageSizes=true></GridPageSettings>

    <GridColumns>

 

    

        <GridColumn Field=@nameof(EmployeeData.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>

        <GridColumn Field=@nameof(EmployeeData.OrderDate) HeaderText=" Order Date" EditType="Syncfusion.Blazor.Grids.EditType.DatePickerEdit" Format="d" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="130" Type="Syncfusion.Blazor.Grids.ColumnType.Date"></GridColumn>

        <GridColumn Field=@nameof(EmployeeData.Freight) HeaderText="Freight" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" EditType="Syncfusion.Blazor.Grids.EditType.NumericEdit" Width="120"></GridColumn>

        <GridColumn HeaderText="Actions" Width="60">

            <Template>

 

                @{

 

                    var employee = (context as EmployeeData);

 

                    var dropdownID = employee.EmployeeID.ToString();

 

                    <SfDropDownButton CssClass="@dropdownID"  @ref="dropDownObj" >

 

                        <DropDownMenuItems>

 

                            <DropDownMenuItem Text="Local" Id="LocalID"></DropDownMenuItem>

 

                            <DropDownMenuItem Text="Web" Id="WebID"></DropDownMenuItem>

 

                            <DropDownMenuItem Text="data" Id="DataID"></DropDownMenuItem>

 

 

 

                        </DropDownMenuItems>

 

                    </SfDropDownButton>

 

 

 

                }

 

            </Template>

 

        </GridColumn>

 

 

    </GridColumns>

 

</SfGrid>

 

 

 

@code {

 

 

 

    SfDropDownButton dropDownObj { set { ddbRefs.Add(value); } }

 

    List<SfDropDownButton> ddbRefs = new List<SfDropDownButton>();

 

    public List<EmployeeData> Employees { get; set; }

 

}

Sample:https://blazorplayground.syncfusion.com/embed/hthTZFraUohonije?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5