Radzen.Blazor.GridColumnVisibilityChooser

Column visibility chooser for Radzen Blazor

Breaking changes

From version 2.0.0.0 RadzenGrid has been replaced with RadzenDataGrid.

From version 1.0.0.4 functionality of preserving column visibility state is introduced.

It is controlled by IsPreserved parameter.

For it to work, configuration must be done in Startup.ConfigureServices method as such: services.ConfigureColumnVisibility();. Failing to include this will result in exceptions.

Nuget package

Available as nuget package at https://www.nuget.org/packages/Radzen.Blazor.GridColumnVisibilityChooser Install it in shared code project.

Usage

Create the control like so:

<Radzen.Blazor.GridColumnVisibilityChooser.RadzenGridColumnVisibilityChooser Grid="@grid" RefreshParentStateAction="@(() => InvokeAsync(StateHasChanged))"/>
<RadzenDataGrid @ref="@grid"/>

@code{
  RadzenDataGrid<TItem> grid;
}

It is required to call InvokeAsync(StateHasChanged); for the first render, if it is not called already while doing page initialisation:

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
        InvokeAsync(StateHasChanged);
}

To set default column visibility, provide GetDefaultVisibility function as a parameter:

<Radzen.Blazor.GridColumnVisibilityChooser.RadzenGridColumnVisibilityChooser Grid="@grid" RefreshParentStateAction="@(() => InvokeAsync(StateHasChanged))" GetDefaultVisibility="@((colName) => GetDefaultColumnVisibility(colName))"/>

@code{
    bool GetDefaultColumnVisibility(string colName)
    {
        return colName == "Test1" || colName == "Test2" ? false : true;
    }
}

Note: Don't use Visible parameter, then switching visibility of the column won't work.

colName is Title on RadzenDataGridColumn.

To preserve state across sessions with local storage, use:

<Radzen.Blazor.GridColumnVisibilityChooser.RadzenGridColumnVisibilityChooser Grid="@grid" RefreshParentStateAction="@(() => InvokeAsync(StateHasChanged))" PreserveState="true"/>
<RadzenDataGrid @ref="@grid"/>

@code{
  RadzenDataGrid<TItem> grid;
}

This will, on each column visibility change, save the state in local storage and load it the next time the page is loaded. Pages are identified uniquely by their relative url without query string.

Note: When using PreserveState the GetDefaultVisibility is not invoked.

To use column visibility chooser preserve state feature with more than one Grid in one page, assing id (html id) to each Grid:

<Radzen.Blazor.GridColumnVisibilityChooser.RadzenGridColumnVisibilityChooser Grid="@grid1" RefreshParentStateAction="@(() => InvokeAsync(StateHasChanged))" PreserveState="true"/>
<RadzenDataGrid @ref="@grid1" id="grid1Id"/>

<Radzen.Blazor.GridColumnVisibilityChooser.RadzenGridColumnVisibilityChooser Grid="@grid2" RefreshParentStateAction="@(() => InvokeAsync(StateHasChanged))" PreserveState="true"/>
<RadzenDataGrid @ref="@grid2" id="grid2Id"/>

@code{
  RadzenDataGrid<TItem> grid1;
  RadzenDataGrid<TItem> grid2;
}

Contributions

Any contributions are welcome in the form of pull requests.

Issues

Issues can be raised in the Issue section where I'll try to address all of them.