BzGrid

DataGrid

Sorting, filtering, paging, selection, nested detail and export.

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 —
    razor
    @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:

    razor
    @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 },
            }},
        };
    }