-
Notifications
You must be signed in to change notification settings - Fork 839
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(demos): simplify DataGridColumnPicking example (#1883)
- Loading branch information
1 parent
bd4b1e4
commit 00eb31c
Showing
4 changed files
with
183 additions
and
73 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
118 changes: 118 additions & 0 deletions
118
RadzenBlazorDemos/Pages/DataGridColumnPickingContextMenu.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| @using RadzenBlazorDemos.Data | ||
| @using RadzenBlazorDemos.Models.Northwind | ||
| @using Microsoft.EntityFrameworkCore | ||
|
|
||
| @inherits DbContextPage | ||
|
|
||
| @inject ContextMenuService ContextMenuService | ||
|
|
||
| <RadzenStack ContextMenu=@ShowContextMenuColumnPicker> | ||
| <RadzenDataGrid | ||
| @ref=grid | ||
| Data="@employees" | ||
| TItem="Employee" | ||
| ColumnWidth="300px" | ||
| AllowColumnPicking="false" | ||
| > | ||
| <Columns> | ||
| <RadzenDataGridColumn | ||
| @attributes=@GetAttributes(nameof(Employee.EmployeeID)) | ||
| Title="ID" | ||
| Width="80px" | ||
| TextAlign="TextAlign.Center" | ||
| Frozen="true" | ||
| /> | ||
| <RadzenDataGridColumn Title="Photo" Sortable="false" Width="200px" Pickable="false"> | ||
| <Template Context="data"> | ||
| <RadzenImage Path="@data.Photo" class="rz-gravatar" AlternateText="@(data.FirstName + " " + data.LastName)" /> | ||
| </Template> | ||
| </RadzenDataGridColumn> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.FirstName)) Title="First Name" /> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.LastName)) Title="Last Name" Width="150px"/> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.Title)) Title="Title" /> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.TitleOfCourtesy)) Title="Title Of Courtesy" /> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.BirthDate)) Title="Birth Date" FormatString="{0:d}" /> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.HireDate)) Title="Hire Date" FormatString="{0:d}" /> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.Address)) Title="Address" /> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.City)) Title="City" /> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.Region)) Title="Region" /> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.PostalCode)) Title="Postal Code" /> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.Country)) Title="Country" /> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.HomePhone)) Title="Home Phone" /> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.Extension)) Title="Extension" /> | ||
| <RadzenDataGridColumn @attributes=@GetAttributes(nameof(Employee.Notes)) Title="Notes" /> | ||
| </Columns> | ||
| </RadzenDataGrid> | ||
| </RadzenStack> | ||
| <EventConsole @ref=@console /> | ||
|
|
||
| @code { | ||
| IEnumerable<Employee> employees; | ||
| EventConsole console; | ||
| RadzenDataGrid<Employee> grid; | ||
|
|
||
| /// <summary> | ||
| /// Stores the set of selected column property names. | ||
| /// When null - all columns are selected. | ||
| /// </summary> | ||
| private HashSet<string> selectedColumns; | ||
|
|
||
| protected override async Task OnInitializedAsync() | ||
| { | ||
| await base.OnInitializedAsync(); | ||
|
|
||
| employees = dbContext.Employees; | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// Returns a set of key-value pairs to splat as column attributes. | ||
| /// </summary> | ||
| IEnumerable<KeyValuePair<string, object>> GetAttributes(string columnName) | ||
| { | ||
| var isSelected = selectedColumns?.Contains(columnName) ?? true; | ||
| return new KeyValuePair<string, object>[] { | ||
| new ("Property", columnName), | ||
| new ("Visible", isSelected), | ||
| }; | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// Displays the column picker in a context menu. | ||
| /// </summary> | ||
| void ShowContextMenuColumnPicker(MouseEventArgs args) | ||
| { | ||
| ContextMenuService.Open(args, ds => | ||
| @<RadzenListBox | ||
| TValue="object" | ||
| Style="height:200px;background-color:#fff" | ||
| SelectAllText="All" | ||
| AllowSelectAll="true" | ||
| AllowFiltering="true" | ||
| FilterCaseSensitivity=FilterCaseSensitivity.CaseInsensitive | ||
| Multiple="true" | ||
| Placeholder="All" | ||
| Data="@grid.ColumnsCollection.Where(c => c.Pickable)" | ||
| TextProperty="Title" | ||
| Value="@(grid.ColumnsCollection.Where(c => c.Pickable && c.GetVisible()))" | ||
| Change=@RadzenListBoxSelectionChange | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// Reacts to the changes of selected columns in the context menu. | ||
| /// </summary> | ||
| void RadzenListBoxSelectionChange(object args) | ||
| { | ||
| var selectedColumnNames = ((IEnumerable<object>)args) | ||
| .Cast<RadzenDataGridColumn<Employee>>() | ||
| .Select(c => c.Title); | ||
|
|
||
| console.Log($"Picked columns: {string.Join(", ", selectedColumnNames)}"); | ||
|
|
||
| this.selectedColumns = ((IEnumerable<object>)args) | ||
| .Cast<RadzenDataGridColumn<Employee>>() | ||
| .Select(c => c.Property) | ||
| .ToHashSet(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters