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