How to add button column picker visibility to ridzen grid?

Question

I work on blazor server side . I need to add button column picker visibility

so by click button if I select column application id and application name then 2 columns only will display and another columns will hide

ahmed salah · Answer

How to add dialog service please can you give me full solution sample code if possible please thanks advanced for help

Rajkiran Swain · Answer

Add a button to your Blazor component: Column Picker Define a list of available columns in your component: private readonly List > _allColumns = new List > { new RadzenGridColumn { Property="applicationId", Title="Application ID", Visible=false }, new RadzenGridColumn { Property="applicationName", Title="Application Name", Visible=true }, new RadzenGridColumn { Property="commonName", Title="Common Name", Visible=true }, new RadzenGridColumn { Property="typeOfApplication", Title="Type Of Application", Visible=true } }; Define a list of visible columns that will be displayed in the grid initially: private List > _visibleColumns = new List > { new RadzenGridColumn { Property="applicationName", Title="Application Name", Visible=true }, new RadzenGridColumn { Property="commonName", Title="Common Name", Visible=true }, new RadzenGridColumn { Property="typeOfApplication", Title="Type Of Application", Visible=true } }; Handle the click event of the button to show a popup or modal dialog with checkboxes to allow the user to select which columns to show or hide: private void ShowColumnPicker() { var visibleColumns = _visibleColumns.Select(c => c.Property); var dialog = DialogService.Open ("Select Columns", new Dictionary { { "AllColumns", _allColumns }, { "VisibleColumns", visibleColumns } }); dialog.OnClose = async result => { if (!result.Cancelled) { var selectedColumns = (List )result.Data; _visibleColumns = _allColumns.Where(c => selectedColumns.Contains(c.Property)).ToList(); StateHasChanged(); } }; } In this code, we're passing the list of all columns and the list of visible columns to a custom dialog component called ColumnPickerDialog . The OnClose event of the dialog is used to update the list of visible columns based on the user's selection. Update the RadzenGrid component to use the _visibleColumns list: @foreach (var column in _visibleColumns) { @column } In this code, we're iterating over the _visibleColumns list and rendering each column using the @column syntax. Create a custom dialog component called ColumnPickerDialog that allows the user to select which columns to show or hide

How to add button column picker visibility to ridzen grid?

Answers (2)