BzGrid
DataGrid
Sorting, filtering, paging, selection, nested detail and export.
ButtonsFormsInput groupButton groupsDatePickerAutoCompleteCardsDisplayLoadingDialogsNotificationsOperation messageDrawerContext menuPaginationLightboxTreeDataGridChartsTabs & AccordionNavigationSidebarTimelineWizardCarouselUploaderEditorTextEditorDocumentCalendarIranian tools
No component found.
Disabled rows and selection-aware actions
Paid orders are fully locked. Toolbar actions are enabled for zero, exactly one, or one-or-more selected rows.
نمایش 1 تا 5 از 12
تعداد در صفحه:
1 / 3
Events:— nothing yet —
@using BzCore.Components.Grid
@using BzCore.Enums
<BzGrid TItem="Order" Items="_orders" Pageable PageSize="5" Selectable
HeaderActions="@_headerActions"
RowDisabled="@(o => o.Paid)"
OnRowClick="@(o => Log($"کلیک ردیف #{o.Id}"))"
OnSortChanged="@(e => Log($"مرتب سازی: {e.Field}"))"
OnPageChanged="@(e => Log($"صفحه {e.Page}"))">
<Columns>
<BzColumn TItem="Order" Title="کد" Field="@(o => o.Id)" Sortable Width="90px" />
<BzColumn TItem="Order" Title="مشتری" Field="@(o => o.Customer)" Sortable Filterable />
<BzColumn TItem="Order" Title="مبلغ" Field="@(o => o.Amount)" Format="N0" Align="end" Sortable />
</Columns>
</BzGrid>
@code {
private readonly List<string> _log = new();
private readonly IReadOnlyList<BzGridHeaderAction<Order>> _headerActions =
[
new()
{
Title = "سفارش جدید",
StartIcon = "fa-solid fa-plus",
Color = BzColor.Primary,
OnClick = context => CreateOrderAsync(context.SelectedItems)
},
new()
{
Title = "حذف انتخابشدهها",
StartIcon = "fa-solid fa-trash",
Color = BzColor.Danger,
Variant = BzButtonVariant.Soft,
SelectionRequirement = BzGridActionSelectionRequirement.OneOrMore,
OnClick = context => DeleteAsync(context.SelectedItems)
}
];
private Task CreateOrderAsync(IReadOnlyCollection<Order> selectedItems)
{
Log($"تعداد انتخابشده: {selectedItems.Count}");
return Task.CompletedTask;
}
public class Order
{
public int Id { get; set; }
public string Customer { get; set; } = "";
public decimal Amount { get; set; }
public bool Paid { get; set; }
}
private List<Order> _orders = new()
{
new Order { Id = 1001, Customer = "علی رضایی", Amount = 2_500_000, Paid = true },
new Order { Id = 1002, Customer = "مریم احمدی", Amount = 1_200_000, Paid = false },
new Order { Id = 1003, Customer = "حسن کریمی", Amount = 3_800_000, Paid = true },
};
private void Log(string msg)
{
_log.Insert(0, $"{DateTime.Now:HH:mm:ss} — {msg}");
if (_log.Count > 6) _log.RemoveAt(_log.Count - 1);
StateHasChanged();
}
}Multi-select + nested detail + export
Template customises a column, and DetailTemplate builds an expandable row — even with a nested grid inside.
نمایش 1 تا 5 از 12
تعداد در صفحه:
1 / 3
Selected:
@using BzCore.Components.Grid
@using BzCore.Components.Button
@using BzCore.Enums
<BzGrid TItem="Order" Items="_orders" Pageable PageSize="5"
ShowExport ExportFileName="orders.csv"
Selectable MultiSelect @bind-SelectedItems="_selected">
<Columns>
<BzColumn TItem="Order" Title="کد" Field="@(o => o.Id)" Filterable Width="90px" />
<BzColumn TItem="Order" Title="مشتری" Field="@(o => o.Customer)" Filterable />
<BzColumn TItem="Order" Title="مبلغ" Field="@(o => o.Amount)" Format="N0" Align="end" />
@* A column with no Field renders whatever you put in Template. *@
<BzColumn TItem="Order" Title="وضعیت" Sortable="false" Align="center">
<Template Context="o">
<BzButton Size="BzSize.Small" Variant="BzButtonVariant.Soft"
Color="@(o.Paid ? BzColor.Success : BzColor.Warning)"
Text="@(o.Paid ? "پرداخت شده" : "در انتظار")" />
</Template>
</BzColumn>
</Columns>
@* Expandable row — here it holds a second, nested grid. *@
<DetailTemplate Context="o">
<h4>اقلام سفارش @o.Id</h4>
<BzGrid TItem="OrderLine" Items="o.Lines" Pageable="false" ShowToolbar="false" Dense>
<Columns>
<BzColumn TItem="OrderLine" Title="کالا" Field="@(l => l.Product)" />
<BzColumn TItem="OrderLine" Title="تعداد" Field="@(l => l.Qty)" Align="center" />
</Columns>
</BzGrid>
</DetailTemplate>
</BzGrid>
<p>انتخاب شده: @string.Join("، ", _selected.Select(s => s.Id))</p>
@code {
private IReadOnlyCollection<Order> _selected = new List<Order>();
public class Order
{
public int Id { get; set; }
public string Customer { get; set; } = "";
public decimal Amount { get; set; }
public bool Paid { get; set; }
public List<OrderLine> Lines { get; set; } = new();
}
public class OrderLine
{
public string Product { get; set; } = "";
public int Qty { get; set; }
}
private List<Order> _orders = new()
{
new Order { Id = 1001, Customer = "علی رضایی", Amount = 2_500_000, Paid = true, Lines =
{
new OrderLine { Product = "کیبورد", Qty = 2 },
new OrderLine { Product = "ماوس", Qty = 1 },
}},
new Order { Id = 1002, Customer = "مریم احمدی", Amount = 1_200_000, Paid = false, Lines =
{
new OrderLine { Product = "مانیتور", Qty = 1 },
}},
};
}