Grid

Basic usage

Declared using the

OGrid

tag, and configured by setting the

Opt

parameter, here's a basic example that uses local data:

@inject IDbContextFactory<MyContext> cxf

@if (dinners is not null)
{
    <OGrid Opt="gopt" />
}    

@code
{
    private IEnumerable<Dinner> dinners;

    private GridOpt<Dinner> gopt;

    protected override async Task OnInitializedAsync()
    {
        initGrid();

        using var cx = cxf.CreateDbContext();        
        dinners = await cx.Dinners.Include(p => p.BonusMeal).Take(100).ToArrayAsync();             
    }

    private void initGrid()
    {
        gopt = new();
        gopt.Height = 350;
        gopt.KeyProp = m => m.Id;

        gopt.GetQuery = () => dinners.AsQueryable();

        gopt.Columns = new[] {
            new Column<Dinner>()
            {
                For = o => o.Id,
                Width = 100
            },
            new Column<Dinner>
            {
                For = o => o.Name,
                Grow = 1.2
            },
            new Column<Dinner>
            {
                For = o => o.Date,
            },
            new Column<Dinner>
            {
                Header = "Bonus Meal",
                For = o => o.BonusMeal.Name
            },
        };
    }
}

Entity Framework

In our demos a custom extension method is used (

EFData

which you can copy into your solution), it will use an

IDbContextFactory

to create a

DbContext

a for each data request, so all you'll have to specify is the initial query (e.g.

cx.Dinners

) and calls to

Include

if necessary:

gopt.EFData(cxf, cx => cx.Dinners
    .Include(p => p.Meals)
    .Include(p => p.Chef)
    .Include(p => p.BonusMeal));

GridOpt

Grid options model

BeginLoadFunc	Action to execute on begin load
Columns	Grid columns
ColumnWidth	Default column width
ContentHeight	Grid content height
CssClass	CSS class for the main div
DefaultKeySort	Default sort type
FilterRow	Enable filter row
FrozenColumnsLeft	Frozen columns on the left
FrozenColumnsRight	Frozen columns on the right
GetBindValue	Custom func for getting column value
GetChildren	Get row children nodes given row model, and current node level
GetKeyFunc	Get get key from row model func
GetQuery	Get intial query func; query before we apply FilterRow filtering, sorting, paging
Groupable	Default value for Column.Groupable
Height	Grid height
InlineEdit	Inline Editing options
Key	Grid key property name
KeyProp	set grid key
Load	Load grid on init
LoadData	Load data function
LoadFunc	Action to execute on load
LoadLazyNodeAsync	Function to execute when a lazy load node is expanded
MakeFooter	Function for creating a group footer
MakeHeader	Function for creating a group header
OrderBy	Custom order by
Page	Initial page
PageSize	Initial page size
Reorderable	Default value for Column.Reorderable
Resizable	Default value for Column.Resizable
RowClassFunc	Function to set row css class based on row model
RowClickFunc	Row on click function, gets row key as parameter
Sortable	Default value for Column.Sortable
State	Get grid state
StateChangeFunc	Function to execute on grid state change

Column

Grid column

Bind	Grid model property or properties this column is bound to, can use dot to indicate a nested property (example: Country.Name), and/or comma to bind to multiple properties (example: FirstName,LastName); binding to "Name" will make the grid orderBy "Name" when this column has sorting Ast or Desc
CssClass	Css class to set for each cell in this grid column
For	Set Column.Bind using Expression;
GetStr	Function to get cell string value from the row model
Group	Grouped column
Groupable	Can group this column
Grow	By default all columns (without width defined) have Grow = 1; When the grid width is greater than the sum of widths of all columns ( Width or MinWidth or grid.ColumnWidth, whichever is defined) the remaining width is distributed to all the columns according to their Grow value
Header	Header text
HeaderCssClass	Css class to set for header cell
Hidden	Is column hidden
Id	Column id, defaults to bind or header, can be autogenerated when not set or duplicate
Label	Label, can be used instead of header or bind for the columns picker dropdown
MinWidth	Min width
NoHide	Cannot hide this column
Opt	Additional column options
Rank	Initial sorting rank
Reorderable	Can reorder this column
Resizable	Can resize this column
Sort	Initial column sort type
Sortable	Can sort this column
Width	Width