Opening Column Chooser dialog below custom button

[Shoaib Ahmed]

I am opening Column Chooser in SfGrid using custom button,



<div class="row p-2">
    <div class="col pr-0">
        <SearchBoxComponent Placeholder="Search"
                            SearchTextChanged="@OnSearch">
        </SearchBoxComponent>
    </div>
    <div class="col-auto">
        <i title="Advanced Filter" class="mi-filter-list grid-options-icon p-1" role="button" @onclick="@ToggleQueryBuilder"></i>
        <i title="Download CSV" class="@(IsDownloading ? "icon-spinner2 spinner" : "mi-get-app") grid-options-icon mr-2 p-1" role="button" @onclick="@DownloadCsv"></i>
        <button type="button" class="btn btn-secondary btn-labeled btn-labeled-left" @onclick="@ToggleColumnChooser"> Columns</button>
            </div>
</div>

<SfGrid @ref="Grid"
        TValue="PowerGridItem"
        AllowSelection="@AllowSelection"
        EnableHover="true"
        AllowSorting="true"
        AllowFiltering="true"
        Height="100%"
        EnablePersistence="true"
        ShowColumnChooser="true"
        DataSource=@FetchedData.Items>
    <GridFilterSettings Type="FilterType.Menu" IgnoreAccent="true"></GridFilterSettings>
    <GridEvents TValue="PowerGridItem"
                RowSelected="@OnRowSelected"
                OnActionBegin="@ActionBeginHandler"
                CellSelected="@OnCellSelected"
                RowDeselected="@OnRowDeselected">
    </GridEvents>
</SfGrid>

private void ToggleColumnChooser()
{
   Grid.OpenColumnChooserAsync(1118,0);
}

The problem is whenever I move to a different size screen, the column chooser seems not to be in appropriate position. I want it to open the dialog below the manually added 'Columns' button. Is there any way to achieve this? I don't want to use ToolbarItems.  Also, how do I access BeforeOpenColumnChooser event when the columnchooser is not implemented using toolbar?

[Prathap Senthil]

Hi Shoaib,

Based on your requirements, we have prepared a JavaScript solution. Kindly check the attached sample and code snippet for your reference. Here, we have obtained the coordinate values using JavaScript and assigned them to the ColumnChooser method.

<SfButton id="openColumnChooserButton"  OnClick="ToggleColumnChooser">OpenColumnChooser</SfButton>

 

 

<SfGrid @ref="Grid"

        TValue="PowerGridItem"

        AllowSelection="true"

        EnableHover="true"

        AllowSorting="true"

        AllowFiltering="true"

        Height="100%"

        EnablePersistence="true"

        ShowColumnChooser="true"

        DataSource=@Items>

 

 

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu" IgnoreAccent="true"></GridFilterSettings>

 

</SfGrid>

 

 

@code

{

 

    SfGrid<PowerGridItem>  Grid { get; set; }

    public class Coordinates

    {

        public double X { get; set; }

        public double Y { get; set; }

    }

 

public async Task ToggleColumnChooser()

    {

    

           // Get the coordinates of the button

        var coordinates = await JS.InvokeAsync<Coordinates>("getClickCoordinates", "openColumnChooserButton");

 

     

        Xvalue = coordinates.X;

        Yvalue = coordinates.Y;

        await Grid.OpenColumnChooserAsync(Xvalue, Yvalue);

 

    }

 

 

}
JavaScript.js

function getClickCoordinates(buttonId) {

 

 

    var button = document.getElementById(buttonId);

    if (button) {

        var rect = button.getBoundingClientRect();

        return {

            x: rect.left,

            y: rect.top

        };

    }

    return { x: 0, y: 0 };

 

}

Additionally, since the Column Chooser is not implemented using the toolbar, you want to know how to access it. We suggest using the BeforeOpenColumnChooser event to achieve your requirement. Kindly refer to the below documentation for your reference.

Reference:https://blazor.syncfusion.com/documentation/datagrid/events#beforeopencolumnchooser

 

Regards,
Prathap Senthil

Attachment: BlazorServerApp_(7)_3cf6809e.zip