Skip to content

Commit

Permalink
DataGrid column picking demo improved with context menu option
Browse files Browse the repository at this point in the history 
Close #1735
  • Loading branch information
@enchev
enchev committed Oct 14, 2024
1 parent 769f4ba commit 661b38e
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 26 deletions.
87 changes: 62 additions & 25 deletions RadzenBlazorDemos/Pages/DataGridColumnPicking.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,50 @@

@inherits DbContextPage

<RadzenButton Text="Toggle EmployeeID column visibility" Click=@(() => EmployeeIDVisible = !EmployeeIDVisible) class="rz-my-4"/>
<RadzenDataGrid Data="@employees" TItem="Employee" AllowFiltering=true ColumnWidth="300px" AllowColumnPicking="true" PickedColumnsChanged="@PickedColumnsChanged">
<Columns>
<RadzenDataGridColumn Visible="@EmployeeIDVisible" Property="@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 Property="@nameof(Employee.FirstName)" Title="First Name" />
<RadzenDataGridColumn Property="@nameof(Employee.LastName)" Title="Last Name" Width="150px"/>
<RadzenDataGridColumn Property="@nameof(Employee.Title)" Title="Title" />
<RadzenDataGridColumn Property="@nameof(Employee.TitleOfCourtesy)" Title="Title Of Courtesy" />
<RadzenDataGridColumn Property="@nameof(Employee.BirthDate)" Title="Birth Date" FormatString="{0:d}" />
<RadzenDataGridColumn Property="@nameof(Employee.HireDate)" Title="Hire Date" FormatString="{0:d}" />
<RadzenDataGridColumn Property="@nameof(Employee.Address)" Title="Address" />
<RadzenDataGridColumn Property="@nameof(Employee.City)" Title="City" />
<RadzenDataGridColumn Property="@nameof(Employee.Region)" Title="Region" />
<RadzenDataGridColumn Property="@nameof(Employee.PostalCode)" Title="Postal Code" />
<RadzenDataGridColumn Property="@nameof(Employee.Country)" Title="Country" />
<RadzenDataGridColumn Property="@nameof(Employee.HomePhone)" Title="Home Phone" />
<RadzenDataGridColumn Property="@nameof(Employee.Extension)" Title="Extension" />
<RadzenDataGridColumn Property="@nameof(Employee.Notes)" Title="Notes" />
</Columns>
</RadzenDataGrid>
@inject ContextMenuService ContextMenuService

<RadzenCard Variant="Variant.Outlined" class="rz-my-4">
<RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
<div>Column picker type:</div>
<RadzenSelectBar @bind-Value="@columnPickerType" TextProperty="Text" ValueProperty="Value"
Data="@(Enum.GetValues(typeof(ColumnPickerType)).Cast<ColumnPickerType>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" />
</RadzenStack>
</RadzenCard>

<RadzenStack ContextMenu=@(args => { if(columnPickerType == ColumnPickerType.ContextMenu) ShowColumnPicker(args); })>
<RadzenButton Text="Toggle EmployeeID column visibility" Click=@(() => EmployeeIDVisible = !EmployeeIDVisible) class="rz-my-4" style="width:fit-content"/>
<RadzenDataGrid @ref=grid Data="@employees" TItem="Employee" AllowFiltering=true ColumnWidth="300px" AllowColumnPicking="@(columnPickerType == ColumnPickerType.Default)" PickedColumnsChanged="@PickedColumnsChanged">
<Columns>
<RadzenDataGridColumn Visible="@EmployeeIDVisible" Property="@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 Property="@nameof(Employee.FirstName)" Title="First Name" />
<RadzenDataGridColumn Property="@nameof(Employee.LastName)" Title="Last Name" Width="150px"/>
<RadzenDataGridColumn Property="@nameof(Employee.Title)" Title="Title" />
<RadzenDataGridColumn Property="@nameof(Employee.TitleOfCourtesy)" Title="Title Of Courtesy" />
<RadzenDataGridColumn Property="@nameof(Employee.BirthDate)" Title="Birth Date" FormatString="{0:d}" />
<RadzenDataGridColumn Property="@nameof(Employee.HireDate)" Title="Hire Date" FormatString="{0:d}" />
<RadzenDataGridColumn Property="@nameof(Employee.Address)" Title="Address" />
<RadzenDataGridColumn Property="@nameof(Employee.City)" Title="City" />
<RadzenDataGridColumn Property="@nameof(Employee.Region)" Title="Region" />
<RadzenDataGridColumn Property="@nameof(Employee.PostalCode)" Title="Postal Code" />
<RadzenDataGridColumn Property="@nameof(Employee.Country)" Title="Country" />
<RadzenDataGridColumn Property="@nameof(Employee.HomePhone)" Title="Home Phone" />
<RadzenDataGridColumn Property="@nameof(Employee.Extension)" Title="Extension" />
<RadzenDataGridColumn Property="@nameof(Employee.Notes)" Title="Notes" />
</Columns>
</RadzenDataGrid>
</RadzenStack>
<EventConsole @ref=@console />

@code {
bool EmployeeIDVisible = false;
IEnumerable<Employee> employees;
EventConsole console;
RadzenDataGrid<Employee> grid;

protected override async Task OnInitializedAsync()
{
Expand All @@ -49,4 +61,29 @@
EmployeeIDVisible = args.Columns.Select(c => c.Property).Contains(nameof(Employee.EmployeeID));
console.Log($"Picked columns: {string.Join(", ", args.Columns.Select(c => c.Title))}");
}

void ShowColumnPicker(MouseEventArgs args) => ContextMenuService.Open(args, ds =>
@<RadzenListBox TValue="object" Style="height:200px;background-color:#fff"
SelectAllText="@grid.AllColumnsText" AllowSelectAll="@grid.AllowPickAllColumns"
MaxSelectedLabels="@grid.ColumnsPickerMaxSelectedLabels"
SelectedItemsText="@grid.ColumnsShowingText" FilterCaseSensitivity=FilterCaseSensitivity.CaseInsensitive
Multiple="true" AllowFiltering="@grid.ColumnsPickerAllowFiltering"
Placeholder="@grid.ColumnsText"
Data="@grid.ColumnsCollection"
TextProperty="ColumnPickerTitle"
Value="@(grid.ColumnsCollection.Where(c => c.GetVisible()))"
Change=@(args => {
var checkedColumns = ((IEnumerable<object>)args).Cast<RadzenDataGridColumn<Employee>>();
grid.ColumnsCollection.ToList().ForEach(c => c.Visible = checkedColumns.Contains(c));
EmployeeIDVisible = checkedColumns.Select(c => c.Property).Contains(nameof(Employee.EmployeeID));
})
/>
);

ColumnPickerType columnPickerType;
public enum ColumnPickerType
{
Default,
ContextMenu
}
}
2 changes: 1 addition & 1 deletion RadzenBlazorDemos/Pages/DataGridColumnPickingPage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
DataGrid <strong>Column Picker</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Enable column picker by setting the AllowColumnPicking property to true.
Enable default column picker by setting the AllowColumnPicking property to true or use the code example for context menu to create your own custom column picker.
</RadzenText>

<RadzenExample ComponentName="DataGrid" Example="DataGridColumnPicking">
Expand Down

0 comments on commit 661b38e

Please sign in to comment.