Autofit all columns after selection of columns in Columnchooser

[Michael Østerberg]

Is there an event that I can use to perform a AutoFitColumns() after change which columns are visible using the column chooser?

Also. Can I change the text of the ColumnChooser button?

Thank you

[Vignesh Natarajan]

Hi Michael,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Is there an event that I can use to perform a AutoFitColumns() after change which columns are visible using the column chooser? Also. Can I change the text of the ColumnChooser button?” 

 

Yes,  we suggest you to achieve your requirement using OnActionComplete event of the Grid when RequestType is ColumnState. OnActionComplete event will trigger when certain action gets completed. This event will be triggered when column is shown / hide using column chooser with a RequestType as ColumnState.  

 

And also we do not have direct support to change the column chooser text. But we can achieve you requirement by rendering a Custom toolbar item in Grid and show the Column Chooser dialog on the button click.  

 

Refer the below code example.  

 

<SfGrid @ref="DefaultGrid" DataSource="@Employees" ShowColumnChooser="true" Toolbar=@Toolbaritems>     

    <GridEvents OnToolbarClick="ToolbarClickHandler" OnActionComplete="ActionComplete" TValue="EmployeeData"></GridEvents> 

</SfGrid> 

  

@code{ 

    private SfGrid<EmployeeData> DefaultGrid; 

  

    private List<ItemModel> Toolbaritems = new List<ItemModel>(); 

  

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

    public void ActionComplete(ActionEventArgs<EmployeeData> Args) 

    { 

        //will be triggered when column state is changed 

        if(Args.RequestType == Syncfusion.Blazor.Grids.Action.ColumnState) 

        { 

            DefaultGrid.AutoFitColumns(); // autofit the columns 

        } 

    } 

    public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) 

    { 

        if (args.Item.Text == "Show Column") 

        { 

            // open column chooser dialog on specific position provided x and y co ordinates 

            await this.DefaultGrid.OpenColumnChooser(700, 50);  

        } 

    } 

 

   

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/161939/ze/Grid-1215719583  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/tool-bar/#custom-toolbar-items  

https://blazor.syncfusion.com/documentation/datagrid/events/#onactioncomplete  

https://blazor.syncfusion.com/documentation/datagrid/events/#ontoolbarclick  

https://blazor.syncfusion.com/documentation/datagrid/columns/#open-column-chooser-by-external-button  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan