Grid EnablePersistence w/ Hidden Columns

[Seth]

I have a grid with certain columns whose Visible property is set to "false" in the definition of their .razor file.  This works just fine.  In my "LoadData" method, I'm checking the visibility of certain columns and adjusting the SQL that's run to make the database access as efficient as possible.

I'm having an issue that seems to stem from when the grid loads its visible columns from local storage.  In my LoadData() method, I have the following code:

       var cols = Grid!.Columns.Where(c => c.Visible);

       this.productFilter.IncludeLicensorStatus = cols.Any(w => w.Field == "LicensorMilestoneStatus");
       this.productFilter.IncludeTestingStatus = cols.Any(w => w.Field == "LicensorTestingStatus");
       this.productFilter.IncludeSampleStatus = cols.Any(w => w.Field == "SampleMilestoneStatus");
       this.productFilter.IncludeArtistStatus = cols.Any(w => w.Field == "ArtistMilestoneStatus");
       this.productFilter.IncludePortalStatus = cols.Any(w => w.Field == "PortalStatus");

The code itself works fine, except that the cols variable is being populated with the visible columns that exist in design time, not what the users has shown/hidden.  The end result is that the grid loads without data in the columns that they made visible.  When stepping through the code, I can see that, at the time my LoadData() method is called, the columns are in fact hidden.  So the above code is working properly.  But the column is ultimately made visible at some point after LoadData() completes.

Is there an event I can move my code to so the Grid!.Columns is guaranteed to be loaded properly?  So far, the only solution I found that consistently works is to make all the above columns visible in Design Time.  I don't like that because it requires running much more expensive queries than necessary.  Can you help?

[Naveen Palanivel]

Hi Seth,

We have reviewed your query and would like to suggest using the DataBound event to get the current visibility of columns in persistence. Based on this, you can customize at you end or use the ResetPersistDataAsync method to clear any user-changed visibility of the columns. Please refer to the code snippet and documentation sample for your reference.

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

     <GridEvents DataBound="DataBoundHandler" TValue="Order"></GridEvents>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID"

    </GridColumns>

</SfGrid>

 

@code {

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

 

    bool visi = false;

 

    SfGrid<Order> Grid;

 

    public void click()

    {

        visi = true;

    }

 

    public void DataBoundHandler()

    {

        var cols = Grid!.Columns.Where(c => c.Visible);

    }

 

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

[Seth]

Correct me if I'm wrong but wouldn't DataBoundHandler be happening too late for what I'm trying to do?  My goal is to limit the underlying query that's being run by checking which grid columns are visible.  I have my LoadData() function being called when the page loads (in OnInitializedAsync) so I need to know the visible columns before​ the Grid itself is loading.

Am I right that the DataBound event is too late?

[Prathap Senthil]

Hi Seth,

Before the grid is loaded, it is not feasible to get the grid instance columns before the grid render. Therefore, we suggest using the OnLoad grid  event or OnAfterRenderAsync method is called after the component has rendered,the firstRender parameter ensures that the logic runs only once. You can achieve your requirement using any one of these options .Please refer to the code snippet and sample below for your reference.

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Grids

 

<SfGrid DataSource="@Orders" @ref="Grid">

    <GridEvents OnLoad="LoadHandler"  TValue="Order"></GridEvents>

    <GridColumns>

        ------------

    </GridColumns>

</SfGrid>

 

@code {

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

 

    SfGrid<Order> Grid { get; set; }

 

    public void LoadHandler(object args)

    {

        var cols = Grid!.Columns.Where(c => c.Visible);

    }

 

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            // Perform actions that require the grid to be rendered

         

        }

    }

  

}

 

Sample: https://blazorplayground.syncfusion.com/embed/hXLJXmgCqxPdGKvO?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

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

Regards,
Prathap Senthil

[Seth]

I'm not sure that answers my original question though.  In order to know query I need to run to populate the grid to begin with, I need to know which columns are, in fact, visible.  Is there a way to read the data stored in local storage (assuming that's where the information about which columns are hidden and/or visible)?

[Prathap Senthil]

Yes, we suggest using the grid's public method GetPersistDataAsync, this method will return the persistent data, which you can save to an external service when destroying the grid. Then, you can retrieve the persistent data using the initial setup to achieve your requirement of getting the grid columns information. Kindly refer to the code snippet and sample below for your reference.

 

    protected override void OnInitialized()

    {

       

        string Griddata = Service.GetGridState();

        if (Griddata != null)

        {

            var PersistProp = JsonSerializer.Deserialize<Dictionary<string, object>>(Griddata.ToString());

 

 

            // Extract and deserialize the  Gridcolumns.

            var Columns = JsonSerializer.Deserialize<List<GridColumn>>(PersistProp["columns"].ToString());

         

   

 

        }

   

    }

Reference:
https://blazor.syncfusion.com/documentation/datagrid/state-management#handling-grid-state-manually

Attachment: BlazorApp1_603d5eb2.zip