Grid Context Menu within SfSplitter

[Toby Short]

Hi, 

I've got an issue with the SfGrid Context menu not showing when within your splitter panels component.

When trying to use the SfGrid Context Menu functionality from within the SfSplitter component, it doesn't seem to generate correctly and therefore does not display...
The code can be seem below:

<SfSplitter Orientation="Syncfusion.Blazor.Layouts.Orientation.Horizontal" CssClass="border-0" SeparatorSize="3">

            <SplitterPanes>

                <SplitterPane Size="80%" Collapsible="false">

                    <ContentTemplate>

                        <div class="h-100 pe-2">

                            <SfSplitter ID="inner-splitter" SeparatorSize="3" CssClass="border-0" Orientation="Syncfusion.Blazor.Layouts.Orientation.Vertical">

                                <SplitterPanes>

                                    <SplitterPane Size="50%" Collapsible="true">

                                        <div class="d-flex flex-column h-100 pb-2" style="min-width: 0;">

                                            <div class="d-flex justify-content-between pb-2">

                                                <SfButton IconCss="bi bi-plus" CssClass="me-1" OnClick="@AddProductItem" title="@_loc["Add Product Item"]" IsPrimary>@_loc["Add Product Item"]</SfButton>

                                                <SfButton IconCss="bi bi-copy" CssClass="mx-1" OnClick="@DuplicateProductItem" title="@_loc["Duplicate Product Item"]" IsPrimary>@_loc["Duplicate Product Item"]</SfButton>

                                                <SfButton IconCss="bi bi-trash" CssClass="ms-1" OnClick="@ShowDeleteProductPrompt" title="@_loc["Delete Product Item"]" IsPrimary>@_loc["Delete Product Item"]</SfButton>

                                                <div class="flex-fill"></div>

                                                <SfButton CssClass="me-2" IconCss="bi bi-grid-3x2" title="@_loc["Column Chooser"]" IsPrimary OnClick="ShowProductColumnChooser"></SfButton>

                                                <SfButton IconCss="bi bi-arrow-clockwise" title="@_loc["Refresh"]" IsPrimary OnClick="RefreshProductData"></SfButton>

                                            </div>

                                            <div class="flex-fill min-height-0">

                                                <SfGrid Width="100%" Height="100%" DataSource="@_productItemsExpando" @ref="_productGrid" ContextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "Group", "SortAscending", "SortDescending"})" AllowPaging ShowColumnChooser AllowSorting AllowFiltering AllowGrouping AllowReordering AllowResizing>

                                                    <Syncfusion.Blazor.Spinner.SfSpinner @bind-Visible="_productsLoading" />

                                                    <GridGroupSettings EnableLazyLoading />

                                                    <GridPageSettings PageSize="50" PageSizes="@(new string[] { "10", "25", "50", "100", "200", "500"})" />

                                                    <GridColumns>

</GridColumns>

                <GridEvents RowSelected="ProductItemSelected" ContextMenuOpen="ProductGridContextMenuOpen" ContextMenuItemClicked="ProductGridContextMenuClick" Searching="@(() => ShowProductGridSpinner())" Searched="@(() => HideProductGridSpinner())" Grouping="@(() => ShowProductGridSpinner())" Grouped="@(() => HideProductGridSpinner())" TValue="System.Dynamic.ExpandoObject" />

            </SfGrid>

        </div>

    </div>

</SplitterPane>

                                </SplitterPanes>

                            </SfSplitter>

As you can see from the HTML screenshot above, on rendering it appears to be putting the context menu container within the grid rather than the main body (as it does when just putting the grid directly on the page) which looks like it's then losing the element and not rendering from there?

Any ideas how to fix this issue as the context menu functionality is critical to the software requirements.

thanks!

[Prathap Senthil]

Hi Toby,

We are unable to reproduce the reported issue when attempting to reproduce the issue in the version 25.1.42 . For your reference we have attached screen shot and simple sample .So, to
further proceed with the reporting problem, we require some additional clarification from your end. Please share the below details to proceed further at our end.

• To analyze the reported issue, could you please share a simple and reproducible sample that demonstrates the problem? This will assist us in identifying the issue more efficiently and providing a resolution.
• kindly share your attempt to replicate the issue using the attached simple sample.

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.

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

Additionally, we would like to clarify that you mentioned the context menu items "AutoFit", "AutoFitAll", "Group", "SortAscending", and "SortDescending" only appear when right-clicking the header. For reference, we have attached documentation.

Reference: https://blazor.syncfusion.com/documentation/datagrid/context-menu

Regards,
Prathap Senthil