Hide coumn by external Button not working

[Unknown]

Hi,

i tried to hide columns on button click and tried a few different approaches. I modified one of your examples. 

Is there also a hint how to efficiently reapply a whole column state? I persist the state of all columns in a database and then reapply the state to the grid. For filter,grouping etc i got it working, just the width, order and visibility of the columns is missing..

Thanks!

@using Syncfusion.Blazor.Grids
@page "/development/gridexample"

<SfButton  @onclick="HideColumn" CssClass="e-flat" IsToggle="true" IsPrimary="true" Content="test"></SfButton>

<SfGrid DataSource="@Orders" Height="315" @ref="grid">
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) @ref="firstCol" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code{
    public List<Order> Orders { get; set; }
    
    public SfGrid<Order> grid { get; set; }
    
    public GridColumn firstCol { get; set; }
    
    public bool Visible { get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }
    
    private async Task HideColumn()
    {
        var columnList = await grid.GetColumns();
        var firstColumn = columnList.First();
        firstColumn.SetVisibility(false);
        firstColumn.Visible = false;
                
        await grid.RefreshColumns();

    }

    public class Order {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

[Renjith Singh Rajendran]

Hi Nils, 

Thanks for contacting Syncfusion support. 

We suggest you to use the “HideColumns” method of Grid to achieve this requirement. Please use the code below, 

 

@code{ 

    ...                                                 

    private async Task HideColumn() 

    { 

        var columnList = await grid.GetColumns(); 

        var firstColumn = columnList.First(); 

        await grid.HideColumns(firstColumn.HeaderText); 

    } 

    ... 

} 

We have also prepared a sample based on the shared codes. Please download the sample form the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1263038990 

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

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.