ColumnChooser failed with Autofit and auto-width

[Stefan Limpert]

Hi there,

I've created grid columns by my own gridcolumn parameter class.

For Example:

 @foreach (var col in myGridCols){ <GridColumn [email protected] HeaderText="@col.HeaderText" ...}

This works fine, but i there is a situation with the ColumnChooser at unvisible columns by init. I searched for the cause and (maybe) found it. In combination of the parameters Width="auto" and Autofit="true" on a column that Visible=false, the ColumnChooser is not changing the visibilty of these columns. I tested these settings on your example project template in VS2019 and was able to reproduce the behavior.

<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Visible="false" ... width="auto" AutoFit="true"></GridColumn>

<GridColumn Field=@... Visible="true" width="auto" AutoFit="true"></GridColumn>

If the parameter width is not set or set by a specific value the Columnchooser is working.

So, what is the Best Practice for width and Autofit?

Perhabs this is a Bug?

Regards

Stefan

[Vignesh Natarajan]

Hi Stefan,  

 

Thanks for contacting Syncfusion support.  

 

Query: “In combination of the parameters Width="auto" and Autofit="true" on a column that Visible=false, the ColumnChooser is not changing the visibilty of these columns.” 

 

We have analyzed your query and we are able to reproduce the reported behavior at our end also. This is because Grid content’s width will developed based on available visible column. While changing the visibility of column using ColumnChooser,  we will change the visible property alone. We will not change the columns width. 

 

So to overcome the reported query, we suggest you to Refresh the Grid component in OnActionComplete event of Grid. OnActionComplete event will be triggered after changing the column (visibility) state, here we suggest you to refresh the Grid.  

 

Refer the below code example.   

 

<SfGrid @ref="Grid" DataSource="@Employees" ShowColumnChooser="true" Toolbar=@ToolbarItems> 

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

    <GridColumns> 

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) Visible="false" Width="auto" AutoFit="true" TextAlign="TextAlign.Center" HeaderText="Employee ID"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" ShowInColumnChooser="false" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.LastName) Visible="true" Width="auto" AutoFit="true" HeaderText="Last Name"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Right" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

  

    SfGrid<EmployeeData> Grid { get; set; } 

    public string[] ToolbarItems = new string[] { "ColumnChooser" }; 

  

    public void ActionComplete(ActionEventArgs<EmployeeData> Args) 

    { 

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

        { 

            Grid.Refresh(); 

        } 

    } 

 

 

For your convenience we have attached the sample which can be downloaded from below 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170433/ze/DataGrid_Server1051314108.zip 

 

Refer our Ug documentation for your reference 

 

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

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan 

[Stefan Limpert]

Dear Vignesh

Thanks for the explanation, it helps me a lot for a better understanding of the grid routines.

I helped myself to set the width (in background) automatically to an explizit value, when property Autofit was set to true. But your solution is also a great idea and it works also.

Thank you for your fast support

Regards

Stefan

[Vignesh Natarajan]

Hi Stefan,  

Thanks for the update.  

We are glad to hear that you have resolved your query.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan