How to programmatically hide and show grid

[Barry]

How to programmatically hide and show the grid? There is no Visible property for SfGrid.

i saw you can use attributes to disable and enable. Using this technique i can hide the grid but not able to show it again.

<SfGrid @ref="SfGrid" @attributes="@GridAttributes" DataSource="@GridData" AllowTextWrap="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" />

private Dictionary<string, object> GridAttributes { get; set; } = new Dictionary<string, object>();

GridAttributes.Add("hidden", "yes");

GridAttributes.Remove("hidden");

[Balamurugan Lakshmanan]

Hi Barry,

Greeting from Syncfusion support.

From your query, we understood that you need to hide/ show the grid programmatically. We would like to inform you that by using grid attribute you can achieve enable/disable operations only. We suggest you to use the Boolean variable to achieve your requirement. We have prepared the sample as per your requirement. Kindly refer the attached code snippet and sample file to resolve your issues.

@page "/"

 

 

 

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Buttons

 

<SfButton OnClick="Show">SHOW</SfButton>

<SfButton OnClick="Hide">HIDE</SfButton>

 

<SfGrid @ref="Grid" TValue="Order" DataSource="@Orders"  AllowPaging="true">

      <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) 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>

 

@if (IsVar)

{

    <style>

        .e-grid{

 

          visibility:hidden;

        }

    </style>

}

else

{

    <style>

        .e-grid{

            visibility:visible;

        }

    </style>

}

 

@code{

    public bool IsVar { get; set; }

    private SfGrid<Order> Grid;

    private Dictionary<string, object> GridAttributes { get; set; } = new Dictionary<string, object>();

    public List<Order> Orders { get; set; }

 

    protected override void OnInitialized()

    {

        //Task.Delay(1000);

        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();

    }

 

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

    public void Hide()

    {

        IsVar = true;

    }

    public void Show()

    {

        IsVar = false;

    }

 

}

Please get back to us if you have further queries.

Regards,

Bala.

Attachment: BlazorApp1_b6281556.zip