Grid ColumnChooser Appear In Wrong Place When Use ToolbarItem Tag

[Ahmed Samy]

Hello Syncfusion Team,

The Grid column chooser appear in the middle of screen when I use ToolbarItem tag. I want it to appear near the Columns button.

I have attached the source code, also I am using latest syncfusion nugets.

Best Regards,

Ahmed

Attachment: BlazorDemoServerApp_46559be.rar

[Guhanathan Ramanathan]

Hi Ahmed Samy,

 

Based on your query, you need to pass the X and Y parameters to open the column chooser popup at a specified position on the screen. Please refer to the code snippet and the attached sample below.  

 

<SfGrid @ref="GridRef" DataSource="@Orders" ShowColumnChooser=true>

    <SfToolbar>

        <ToolbarItems>

            <ToolbarItem Type="ItemType.Button" Align="Syncfusion.Blazor.Navigations.ItemAlign.Right" Text="Columns" TooltipText="Columns" OnClick=@OpenColChooser />

        </ToolbarItems>

    </SfToolbar>

        <GridColumn Field=@nameof(OrderData.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

 

    private SfGrid<OrderData>? GridRef;

 

    private async Task OpenColChooser()

    {

        await GridRef!.OpenColumnChooserAsync(400,20);

    }

 

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double Freight { get; set; }

    }

}

 

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

Documentation:https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OpenColumnChooserAsync_System_Nullable_System_Double__System_Nullable_System_Double__

 Regards,

Guhanathan R

[Arturo montes]

Hello, I’m experiencing the same issue. The solution shared by Guhanathan Ramanathan would require me to always calculate the button position before opening the Column Chooser. Previously, it was enough to just add the class CssClass="e-cc e-ccdiv e-cc-toolbar" to the ToolbarItem.

I would like to know if this method for positioning the ShowColumnChooser is still valid, since in my case it now sends the Column Chooser to the far end of the grid.

I’m sharing a small example below.

 <div id="layout-content-target" class="d-flex flex-column">
        <div style="height:Calc(100vh - 135px);overflow-y: auto;">
            @if (isCreating)
            {
                <div class="px-2">
                    @EditionForm
                </div>
            }
            else
            {
                <TarifasExecelActions @ref="ExcelSettings" TValue="TValue" ExportExcelName="@Title" UrlImport="@UrlImpor" />
                <SfGrid ID="@($"catalog-{typeof(TValue).Name}")" @ref="Grid" TValue="TValue"
                        AllowExcelExport AllowPaging AllowFiltering AllowSorting AllowResizing AllowSelection AllowReordering
                        ShowColumnChooser EnablePersistence
                        Width="100%" Height="100%">
                    <GridSelectionSettings PersistSelection CheckboxOnly></GridSelectionSettings>
                    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel" ImmediateModeDelay="5000" Mode="FilterBarMode.OnEnter">
                        <GridFilterColumns>
                            <GridFilterColumn Field="@nameof(ModelFetchBase.Status)" Operator="Syncfusion.Blazor.Operator.Equal" Predicate="and" Value="@StatusTarifa.Activa"></GridFilterColumn>
                        </GridFilterColumns>
                    </GridFilterSettings>
                    <GridSortSettings>
                        <GridSortColumns>
                            <GridSortColumn Field="@nameof(ModelFetchBase.Id)" Direction="SortDirection.Descending" />
                        </GridSortColumns>
                    </GridSortSettings>
                    <GridPageSettings PageSize="20" PageSizes="@pagesize" />
                    <GridEvents TValue="TValue" DataBound="OnDataBound" OnActionComplete="ActionCompletedHandler"
                                RowSelecting="RowSelecting" RowDeselected="Rowdeseled"
                                FilterDialogOpening="FilterDialogOpening" CheckboxFilterSearching="CheckboxFilterSearching" />
                    <SfDataManager Url="@Urls" Adaptor="Adaptors.ODataV4Adaptor" CrossDomain />
                    <GridTemplates>
                        <ToolbarTemplate>
                            <SfToolbar>
                                <ToolbarItems>
                                    <ToolbarItem Text="@Localizer.Grid_Add" PrefixIcon="e-add e-icons" Align="ItemAlign.Left" Visible="@(EditionForm != null)" OnClick="@(() => isCreating = true)" />
                                    <ToolbarItem Text="Cancelar Tarifa" PrefixIcon="e-delete e-icons" OnClick="OnCancelTarifas" Align="ItemAlign.Left" />
                                    <ToolbarItem Text="@Localizer.Grid_Excelimport" PrefixIcon="e-import e-icons" Align="ItemAlign.Left" OnClick="ExcelSettings.OpenImportModal" Visible="@AllowImport" />
                                    <ToolbarItem Text="@Localizer.Grid_Excelexport" PrefixIcon="e-export-excel e-icons" Align="ItemAlign.Left" OnClick="ExcelSettings.Export" />
                                    <ToolbarItem Text="Excel desde el server" PrefixIcon="e-export-excel e-icons" Align="ItemAlign.Left" OnClick="DownLoadExcelServer" />
                                    <ToolbarItem Text="@Localizer.Grid_ClearFilter" PrefixIcon="e-filter-clear e-icons" Align="ItemAlign.Left" OnClick="ClearFilteringAsync" />
                                    <ToolbarItem SuffixIcon="e-columnchooser-btn" Text="@Localizer.Grid_Columnchooser" CssClass="e-cc e-ccdiv e-cc-toolbar" OnClick="@ToolbarClickHandler" Align="ItemAlign.Right" />
                                    <ToolbarItem SuffixIcon="e-icons e-settings" TooltipText="Reset Grid" Align="ItemAlign.Right" OnClick="ResetGrid" />
                                </ToolbarItems>
                            </SfToolbar>
                        </ToolbarTemplate>
                    </GridTemplates>
                    <GridColumns>
                        <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn>
                        <GridColumn Field="Id" HeaderText="Id" Width="85" IsIdentity IsPrimaryKey Visible="false" />
                        <GridColumn Field="@nameof(ModelFetchBase.ZzFechaElimino)" HeaderText="@Localizer.Tarifa_CanceladaEl" Width="160" Format="dd/MM/yyyy" Type="ColumnType.Date" Visible="false" />
                        <GridColumn Field="@nameof(ModelFetchBase.ZzQuienElimino)" HeaderText="@Localizer.Tarifa_CanceladaPor" Width="160" Visible="false" />
                        <GridColumn Field="@nameof(ModelFetchBase.Validez)" HeaderText="@Localizer.Tarifa_Validez" MinWidth="120"  Width="140" Format="dd/MM/yyyy" Type="ColumnType.Date" />
                        <GridColumn Field="@nameof(ModelFetchBase.Vigencia)" HeaderText="@Localizer.Tarifa_Vigencia" MinWidth="170" Width="160" Format="dd/MM/yyyy" Type="ColumnType.Date">
                            <Template>
                                @{
                                    var vigencia = (context as ModelFetchBase)?.Vigencia;
                                }
                                @if (isAnySeleceed)
                                {
                                    <SfDatePicker Value="@vigencia">
                                        <DatePickerEvents TValue="DateTime?" ValueChange="@ValueChangeHandler" />
                                    </SfDatePicker>
                                }
                                else
                                {
                                    @vigencia?.ToString("dd/MM/yyyy")
                                }
                            </Template>
                        </GridColumn>
                        <GridColumn Field="@nameof(ModelFetchBase.Status)" FilterSettings=@(new FilterSettings() { Type = Syncfusion.Blazor.Grids.FilterType.CheckBox })
                                    HeaderText="Status" Width="140">
                            <FilterItemTemplate>
                                @{
                                    var status = (context as FilterItemTemplateContext)!.Value.ToString()!;
                                }
                                <div class="d-flex align-items-start justify-content-start">
                                    <span class="@GetCssClass(status)">
                                        @status
                                    </span>
                                </div>
                            </FilterItemTemplate>
                            <Template>
                                @{
                                    var status = (context as ModelFetchBase)?.Status;
                                }
                                <div class="d-flex align-items-center justify-content-center">
                                    <span class="@GetCssClass(status!.Value.GetEnumDisplayName())">
                                        @status.GetEnumDisplayName()
                                    </span>
                                </div>
                            </Template>
                        </GridColumn>
                        @Columns
                    </GridColumns>
                </SfGrid>
            }
        </div>
    </div>

Thank you in advance for your support. I look forward to your response.

Regards.

[Guhanathan Ramanathan]

Hi Arturo montes ,

We have considered it as a bug and logged an issue  “ColumnChooser opens incorrectly when CssClass is applied to toolbarItem in Grid ToolbarTemplate.” for the same. Thank you for taking the time to report this issue and helping us to improve our product. At Syncfusion, we are committed to fix all validated defects (subject to technological feasibility and Product Development Life Cycle) and this fix will be included in our upcoming patch release which is expected to be rolled out on or before 9th June 2026.

 You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    

FeedBack :Column Chooser Opens at End of Grid Instead of Below Toolbar Button When CssClass Is Applied in Blazor | Feedback Portal

We will get back to you once the release is rolled out. Until then we appreciate your patience.

Regards,

Guhanathan R

[Sanjay Kumar Suresh]

Hi Arturo montes,

Thanks for your patience.

We are glad to announce that, we have included the fix for the “ColumnChooser opens incorrectly when CssClass is applied to toolbarItem in Grid ToolbarTemplate” in our “33.2.12” release.  So please upgrade to our latest version of Syncfusion NuGet package to resolve the reported issue. Please find the NuGet package for latest fixes and features from below.

NuGet: https://www.nuget.org/packages/Syncfusion.Blazor.Grid

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/33.2.12?type=all

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

Root Cause:

The Column Chooser position logic depended on a fixed element ID, which became invalid when a custom CSS class was applied to the toolbar item, preventing proper element targeting.

Corrective Actions Taken:

The positioning logic was updated to use a CSS class selector (e.g., .e-cc-toolbar) instead of an ID, ensuring consistent and accurate dialog placement across custom configurations.

Regards,

Sanjay Kumar Suresh