mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
DropDownDataGrid HeaderTemplate and FooterTemplate support added
Fix #1643
This commit is contained in:
Vladimir Enchev
@@ -141,7 +141,7 @@
|
||||
}
|
||||
@if (Template != null)
|
||||
{
|
||||
<RadzenDataGrid EmptyTemplate=@EmptyTemplate AllowVirtualization="@IsVirtualizationAllowed()" VirtualizationOverscanCount="@GetVirtualizationOverscanCount()" AllowRowSelectOnRowClick="@AllowRowSelectOnRowClick" PagerHorizontalAlign="@PagerHorizontalAlign" PagerAlwaysVisible="@PagerAlwaysVisible" Responsive="@Responsive" AllowColumnResize="@AllowColumnResize" ColumnWidth="@ColumnWidth" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate ? Count : count)" LoadData="@OnLoadData"
|
||||
<RadzenDataGrid EmptyTemplate=@EmptyTemplate HeaderTemplate=@HeaderTemplate FooterTemplate=@FooterTemplate AllowVirtualization="@IsVirtualizationAllowed()" VirtualizationOverscanCount="@GetVirtualizationOverscanCount()" AllowRowSelectOnRowClick="@AllowRowSelectOnRowClick" PagerHorizontalAlign="@PagerHorizontalAlign" PagerAlwaysVisible="@PagerAlwaysVisible" Responsive="@Responsive" AllowColumnResize="@AllowColumnResize" ColumnWidth="@ColumnWidth" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate ? Count : count)" LoadData="@OnLoadData"
|
||||
TItem="object" CellRender="@OnCellRender" RowRender="@OnRowRender" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" AllowPaging="@(!IsVirtualizationAllowed())" AllowSorting="@AllowSorting" RowSelect="@OnRowSelect" Style="@(IsVirtualizationAllowed() ? "height:285px" : "")" Density="@Density" IsLoading="@IsLoading" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat">
|
||||
<Columns>
|
||||
<RadzenDataGridColumn TItem="object" Property="@TextProperty" Title="@TextProperty" Type="typeof(string)">
|
||||
@@ -156,7 +156,7 @@
|
||||
{
|
||||
if (!string.IsNullOrEmpty(TextProperty) || Columns != null)
|
||||
{
|
||||
<RadzenDataGrid EmptyTemplate=@EmptyTemplate AllowVirtualization="@IsVirtualizationAllowed()" VirtualizationOverscanCount="@GetVirtualizationOverscanCount()" AllowRowSelectOnRowClick="@AllowRowSelectOnRowClick" PagerHorizontalAlign="@PagerHorizontalAlign" PagerAlwaysVisible="@PagerAlwaysVisible" Responsive="@Responsive" AllowColumnResize="@AllowColumnResize" ColumnWidth="@ColumnWidth" EmptyText="@EmptyText" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate ? Count : count)" LoadData="@OnLoadData"
|
||||
<RadzenDataGrid EmptyTemplate=@EmptyTemplate HeaderTemplate=@HeaderTemplate FooterTemplate=@FooterTemplate AllowVirtualization="@IsVirtualizationAllowed()" VirtualizationOverscanCount="@GetVirtualizationOverscanCount()" AllowRowSelectOnRowClick="@AllowRowSelectOnRowClick" PagerHorizontalAlign="@PagerHorizontalAlign" PagerAlwaysVisible="@PagerAlwaysVisible" Responsive="@Responsive" AllowColumnResize="@AllowColumnResize" ColumnWidth="@ColumnWidth" EmptyText="@EmptyText" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate ? Count : count)" LoadData="@OnLoadData"
|
||||
TItem="object" CellRender="@OnCellRender" RowRender="@OnRowRender" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" AllowPaging="@(!IsVirtualizationAllowed())" AllowSorting="@AllowSorting" RowSelect="@OnRowSelect" Style="@(IsVirtualizationAllowed() ? "height:285px" : "")" Density="@Density" IsLoading="@IsLoading" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat">
|
||||
<Columns>
|
||||
@if (Columns != null)
|
||||
@@ -172,7 +172,7 @@
|
||||
}
|
||||
else
|
||||
{
|
||||
<RadzenDataGrid EmptyTemplate=@EmptyTemplate AllowVirtualization="@IsVirtualizationAllowed()" VirtualizationOverscanCount="@GetVirtualizationOverscanCount()" AllowRowSelectOnRowClick="@AllowRowSelectOnRowClick" PagerHorizontalAlign="@PagerHorizontalAlign" PagerAlwaysVisible="@PagerAlwaysVisible" Responsive="@Responsive" AllowColumnResize="@AllowColumnResize" ColumnWidth="@ColumnWidth" EmptyText="@EmptyText" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate ? Count : count)" LoadData="@OnLoadData"
|
||||
<RadzenDataGrid EmptyTemplate=@EmptyTemplate HeaderTemplate=@HeaderTemplate FooterTemplate=@FooterTemplate AllowVirtualization="@IsVirtualizationAllowed()" VirtualizationOverscanCount="@GetVirtualizationOverscanCount()" AllowRowSelectOnRowClick="@AllowRowSelectOnRowClick" PagerHorizontalAlign="@PagerHorizontalAlign" PagerAlwaysVisible="@PagerAlwaysVisible" Responsive="@Responsive" AllowColumnResize="@AllowColumnResize" ColumnWidth="@ColumnWidth" EmptyText="@EmptyText" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate ? Count : count)" LoadData="@OnLoadData"
|
||||
TItem="object" CellRender="@OnCellRender" RowRender="@OnRowRender" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" AllowPaging="@(!IsVirtualizationAllowed())" AllowSorting="@AllowSorting" RowSelect="@OnRowSelect" Style="@(IsVirtualizationAllowed() ? "height:285px" : "")" Density="@Density" IsLoading="@IsLoading" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat">
|
||||
<Columns>
|
||||
<RadzenDataGridColumn TItem="object" Property="it" Title="Item" Type="typeof(string)">
|
||||
|
||||
@@ -42,6 +42,13 @@ namespace Radzen.Blazor
|
||||
[Parameter]
|
||||
public Action<DataGridCellRenderEventArgs<object>> CellRender { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Gets or sets the footer template.
|
||||
/// </summary>
|
||||
/// <value>The footer template.</value>
|
||||
[Parameter]
|
||||
public RenderFragment FooterTemplate { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Gets or sets a value indicating whether the selected items will be displayed as chips. Set to <c>false</c> by default.
|
||||
/// Requires <see cref="DropDownBase{T}.Multiple" /> to be set to <c>true</c>.
|
||||
|
||||
@@ -1,199 +0,0 @@
|
||||
@using System.Linq.Dynamic.Core
|
||||
@using RadzenBlazorDemos.Data
|
||||
@using RadzenBlazorDemos.Models.Northwind
|
||||
|
||||
@inherits DbContextPage
|
||||
|
||||
|
||||
<RadzenRow Gap="2rem" RowGap="2rem" class="rz-m-0 rz-m-md-12">
|
||||
<RadzenColumn Size="12" SizeMD="6">
|
||||
<RadzenCard>
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Binding to simple collection</RadzenText>
|
||||
<RadzenDropDownDataGrid @bind-Value="@simpleValue" TValue="string" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" AllowClear="true"
|
||||
Data=@(customers.Select(c => c.CompanyName).Distinct().AsQueryable())
|
||||
Change=@(args => OnChange(args, "DropDownDataGrid")) Style="width: 100%"/>
|
||||
</RadzenCard>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="12" SizeMD="6">
|
||||
<RadzenCard>
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Filtering by all string columns</RadzenText>
|
||||
<RadzenDropDownDataGrid TValue="string" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" AllowClear="true"
|
||||
Data=@(customers) Style="width: 100%" AllowColumnResize="true"
|
||||
TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)" AllowFilteringByAllStringColumns="true"
|
||||
Change=@(args => OnChange(args, "DropDownDataGrid with filtering by all string columns"))>
|
||||
<Columns>
|
||||
<RadzenDropDownDataGridColumn Property="CustomerID" Title="CustomerID" Width="100px"/>
|
||||
<RadzenDropDownDataGridColumn Property="CompanyName" Title="CompanyName" Width="200px"/>
|
||||
<RadzenDropDownDataGridColumn Property="@nameof(Employee.City)" Title="City" Width="100px"/>
|
||||
<RadzenDropDownDataGridColumn Property="@nameof(Employee.Country)" Title="Country" Width="100px"/>
|
||||
</Columns>
|
||||
</RadzenDropDownDataGrid>
|
||||
</RadzenCard>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="12" SizeMD="6">
|
||||
<RadzenCard>
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Filter operator</RadzenText>
|
||||
<RadzenDropDownDataGrid TValue="string" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.StartsWith"
|
||||
AllowFiltering="true" AllowClear="true" Data=@customers TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)"
|
||||
Change=@(args => OnChange(args, "DropDownDataGrid with custom filter operator")) Style="width: 100%"/>
|
||||
</RadzenCard>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="12" SizeMD="6">
|
||||
<RadzenCard>
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Custom filtering</RadzenText>
|
||||
<RadzenDropDownDataGrid TValue="string" LoadData="@LoadData" AllowFiltering="true" AllowClear="true"
|
||||
Data=@customCustomersData Count="@count" TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)"
|
||||
Change=@(args => OnChange(args, "DropDownDataGrid with custom filtering")) Style="width: 100%"/>
|
||||
</RadzenCard>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="12" SizeMD="6">
|
||||
<RadzenCard>
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3" style="float:left;">Multiple selection</RadzenText>
|
||||
<div style="float: right;">
|
||||
<RadzenCheckBox @bind-Value=@allowRowSelectOnRowClick Name="CheckBox1" Style="margin: 0 8px 0 40px;" />
|
||||
<RadzenLabel Text="Row select on row click" Component="CheckBox1" class="rz-text-body2" />
|
||||
</div>
|
||||
<RadzenDropDownDataGrid @ref="grid" Chips="true" AllowRowSelectOnRowClick="@allowRowSelectOnRowClick" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowClear="true" @bind-Value=@multipleValues
|
||||
Multiple="true" Placeholder="Select..." Data=@customers TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)"
|
||||
Change=@(args => OnChange(args, "DropDownDataGrid with multiple selection")) Style="width: 100%">
|
||||
<Columns>
|
||||
<RadzenDropDownDataGridColumn Width="60px" Sortable="false">
|
||||
<HeaderTemplate>
|
||||
<RadzenCheckBox Disabled="@(!grid.AllowSelectAll)" TriState="false" TValue="bool" Value="@(customers.Any(c => multipleValues != null && multipleValues.Contains(c.CustomerID)))"
|
||||
Change="@(args => multipleValues = args ? grid.View.Cast<Customer>().Select(c => c.CustomerID) : multipleValues = Enumerable.Empty<string>())"/>
|
||||
</HeaderTemplate>
|
||||
<Template Context="data">
|
||||
<RadzenCheckBox TriState="false" Value="@(multipleValues != null && multipleValues.Contains(((Customer) data).CustomerID))"
|
||||
TValue="bool" Change=@(args => { if(!allowRowSelectOnRowClick) { grid.SelectItem(data); }})/>
|
||||
</Template>
|
||||
</RadzenDropDownDataGridColumn>
|
||||
<RadzenDropDownDataGridColumn Property="CustomerID" Title="CustomerID" Width="80px"/>
|
||||
<RadzenDropDownDataGridColumn Property="CompanyName" Title="CompanyName" Width="200px"/>
|
||||
<RadzenDropDownDataGridColumn Property="@nameof(Employee.City)" Title="City" Width="100px"/>
|
||||
<RadzenDropDownDataGridColumn Property="@nameof(Employee.Country)" Title="Country" Width="100px"/>
|
||||
</Columns>
|
||||
</RadzenDropDownDataGrid>
|
||||
</RadzenCard>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="12" SizeMD="6">
|
||||
<RadzenCard>
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Custom template</RadzenText>
|
||||
<RadzenDropDownDataGrid AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowClear="true"
|
||||
@bind-Value="value" Placeholder="Select..." Data=@customers TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)"
|
||||
Change=@(args => OnChange(args, "DropDownDataGrid with placeholder")) Style="width: 100%">
|
||||
<Template>
|
||||
Company: @((context as Customer).CompanyName)
|
||||
</Template>
|
||||
</RadzenDropDownDataGrid>
|
||||
</RadzenCard>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="12" SizeMD="6">
|
||||
<RadzenCard>
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Virtualization using IQueryable</RadzenText>
|
||||
<RadzenDropDownDataGrid TValue="string" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.StartsWith" AllowVirtualization="true"
|
||||
AllowFiltering="true" AllowClear="true" Data=@customers TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)"
|
||||
Change=@(args => OnChange(args, "DropDownDataGrid with virtualization using IQueryable")) Style="width: 100%">
|
||||
<Columns>
|
||||
<RadzenDropDownDataGridColumn Property="CustomerID" Title="Customer ID"/>
|
||||
<RadzenDropDownDataGridColumn Property="CompanyName" Title="Company Name"/>
|
||||
</Columns>
|
||||
</RadzenDropDownDataGrid>
|
||||
</RadzenCard>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="12" SizeMD="6">
|
||||
<RadzenCard>
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Virtualization using LoadData event</RadzenText>
|
||||
<RadzenDropDownDataGrid TValue="string" LoadData="@LoadDataVirtualization" AllowFiltering="true" AllowClear="true" AllowVirtualization="true"
|
||||
Data=@customCustomersDataVirtualization Count="@customCustomersDataVirtualizationCount" TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)"
|
||||
Change=@(args => OnChange(args, "DropDownDataGrid with virtualization using LoadData event")) Style="width: 100%"/>
|
||||
</RadzenCard>
|
||||
</RadzenColumn>
|
||||
</RadzenRow>
|
||||
|
||||
<EventConsole @ref=@console />
|
||||
|
||||
@code {
|
||||
bool allowRowSelectOnRowClick = true;
|
||||
RadzenDropDownDataGrid<IEnumerable<string>> grid;
|
||||
IEnumerable<Customer> customers;
|
||||
|
||||
IEnumerable<string> multipleValues = new string[] { "ALFKI", "AROUT" };
|
||||
string value;
|
||||
string simpleValue = "Around the Horn";
|
||||
|
||||
int count;
|
||||
IEnumerable<Customer> customCustomersData;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await base.OnInitializedAsync();
|
||||
|
||||
customers = dbContext.Customers.ToList();
|
||||
}
|
||||
|
||||
EventConsole console;
|
||||
|
||||
void OnChange(object value, string name)
|
||||
{
|
||||
var str = value is IEnumerable<object> ? string.Join(", ", (IEnumerable<object>)value) : value;
|
||||
|
||||
console.Log($"{name} value changed to {str}");
|
||||
}
|
||||
|
||||
void LoadData(LoadDataArgs args)
|
||||
{
|
||||
var query = dbContext.Customers.AsQueryable();
|
||||
|
||||
if (!string.IsNullOrEmpty(args.Filter))
|
||||
{
|
||||
query = query.Where(c => c.CustomerID.Contains(args.Filter) || c.ContactName.Contains(args.Filter));
|
||||
}
|
||||
|
||||
count = query.Count();
|
||||
|
||||
if (!string.IsNullOrEmpty(args.OrderBy))
|
||||
{
|
||||
query = query.OrderBy(args.OrderBy);
|
||||
}
|
||||
|
||||
if (args.Skip != null)
|
||||
{
|
||||
query = query.Skip(args.Skip.Value);
|
||||
}
|
||||
|
||||
if (args.Top != null)
|
||||
{
|
||||
query = query.Take(args.Top.Value);
|
||||
}
|
||||
|
||||
customCustomersData = query;
|
||||
|
||||
InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
int customCustomersDataVirtualizationCount;
|
||||
IEnumerable<Customer> customCustomersDataVirtualization;
|
||||
|
||||
void LoadDataVirtualization(LoadDataArgs args)
|
||||
{
|
||||
var query = dbContext.Customers.AsQueryable();
|
||||
|
||||
if (!string.IsNullOrEmpty(args.Filter))
|
||||
{
|
||||
query = query.Where(c => c.CustomerID.ToLower().Contains(args.Filter.ToLower()) || c.ContactName.ToLower().Contains(args.Filter.ToLower()));
|
||||
}
|
||||
|
||||
if (!string.IsNullOrEmpty(args.OrderBy))
|
||||
{
|
||||
query = query.OrderBy(args.OrderBy);
|
||||
}
|
||||
|
||||
console.Log($"LoadData with virtualization: Skip:{args.Skip}, Top:{args.Top}, OrderBy:{args.OrderBy}, Filter:{args.Filter}");
|
||||
|
||||
customCustomersDataVirtualizationCount = query.Count();
|
||||
|
||||
customCustomersDataVirtualization = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList();
|
||||
|
||||
InvokeAsync(StateHasChanged);
|
||||
}
|
||||
}
|
||||
@@ -35,7 +35,7 @@
|
||||
</RadzenExample>
|
||||
|
||||
<RadzenText Anchor="dropdown-datagrid#template" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
|
||||
DropDownDataGrid with template
|
||||
DropDownDataGrid with custom header, footer, value and item templates
|
||||
</RadzenText>
|
||||
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridTemplate">
|
||||
<DropDownDataGridTemplate />
|
||||
|
||||
@@ -5,12 +5,18 @@
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="0.5rem" class="rz-p-12">
|
||||
<RadzenLabel Text="Select Value" Component="DropDownDataGridTemplate" />
|
||||
<RadzenDropDownDataGrid @bind-Value=@value Data=@customers TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)" Name="DropDownDataGridTemplate">
|
||||
<HeaderTemplate>
|
||||
Custom header
|
||||
</HeaderTemplate>
|
||||
<Template>
|
||||
Company: @((context as Customer).CompanyName)
|
||||
</Template>
|
||||
<ValueTemplate>
|
||||
Company: @((context as Customer).CompanyName)
|
||||
</ValueTemplate>
|
||||
<FooterTemplate>
|
||||
<RadzenStack AlignItems="AlignItems.Center">Custom footer</RadzenStack>
|
||||
</FooterTemplate>
|
||||
</RadzenDropDownDataGrid>
|
||||
</RadzenStack>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user