@page
@using DXApp.TemplateKitProject.Models

<h2 class="content-block">Home</h2>

@(Html.DevExtreme().DataGrid<SampleOrder>()
    .ElementAttr(new { @class = "dx-card wide-card" })
    .DataSource(d => d.Mvc().Controller("SampleData").LoadAction("Get").Key("OrderID"))
    .ShowBorders(false)
    .FilterRow(f => f.Visible(true))
    .FocusedRowEnabled(true)
    .FocusedRowIndex(0)
    .ColumnAutoWidth(true)
    .ColumnHidingEnabled(true)
    .Columns(columns => {
        columns.AddFor(m => m.OrderID);
        columns.AddFor(m => m.OrderDate);
        columns.AddFor(m => m.CustomerName);
        columns.AddFor(m => m.ShipCountry);
        columns.AddFor(m => m.ShipCity);
    })
    .Paging(p => p.PageSize(10))
    .Pager(p => p
        .ShowPageSizeSelector(true)
        .AllowedPageSizes(new[] { 5, 10, 20 })
        .ShowInfo(true)
    )
)