You can customize grid and column settings using data annotations. In other words, you can mark properties of your model class as grid columns, specify column options, call AutoGenerateColumns method, and GridBlazor will automatically create columns as you describe in your annotations.
There are some attributes for this:
For example a model class with the following data annotations:
[GridTable(PagingEnabled = true, PageSize = 20)]
public class Foo
{
[GridColumn(Title = "Name title", SortEnabled = true, FilterEnabled = true)]
public string Name { get; set; }
[GridColumn(Title = "Active Foo?")]
public bool Enabled { get; set; }
[GridColumn(Title = "Date", Format = "{0:dd/MM/yyyy}")]
public DateTime FooDate { get; set; }
[NotMappedColumn]
public byte[]() Data { get; set; }
}
describes that the grid table must contain 3 columns (Name, Enabled and FooDate) with custom options. It also enables paging for this grid table and page size as 20 rows.
The steps to build a grid razor page using data annotations with GridBlazor are:
Create a service with a method to get all items for the grid. An example of this type of service is:
public class FooService
{
...
public ItemsDTO<Foo> GetFooGridRows(QueryDictionary<StringValues> query)
{
var repository = new FooRepository(_context);
var server = new GridServer<Foo>(repository.GetAll(), new QueryCollection(query),
true, "fooGrid", null).AutoGenerateColumns();
// return items to displays
return server.ItemsToDisplay;
}
}
Notes:
The method must have 1 parameter, a dictionary to pass query parameters such as grid-page. It must be ot type QueryDictionary
The columns parameter passed to the GridServer constructor must be null
You must use the AutoGenerateColumns method of the GridServer
Create a razor page to render the grid. The page file must have a .razor extension. An example of razor page is:
@page "/gridsample"
@inject FooService fooService
@if (_task.IsCompleted)
{
<GridComponent T="Foo" Grid="@_grid"></GridComponent>
}
else
{
<p><em>Loading...</em></p>
}
@code
{
private CGrid<Foo> _grid;
private Task _task;
protected override async Task OnInitAsync()
{
var query = new QueryDictionary<StringValues>();
query.Add("grid-page", "2");
var locale = new CultureInfo("fr-FR");
var client = new GridClient<Foo>(q => fooService.GetFooGridRows(q), query, false,
"fooGrid", null, locale).AutoGenerateColumns();
_grid = client.Grid;
// Set new items to grid
_task = client.UpdateGrid();
await _task;
}
}
Notes:
The columns parameter passed to the GridClient constructor must be null
You must use the AutoGenerateColumns method of the GridClient object to configure a grid.
GridBlazor will generate columns based on your data annotations when the AutoGenerateColumns method is invoked.
You can add custom columns after or before this method is called, for example:
var server = new GridServer<Foo>(...).AutoGenerateColumns().Columns(columns=>columns.Add(foo=>foo.Child.Price))
var client = new GridClient<Foo>(...).AutoGenerateColumns().Columns(columns=>columns.Add(foo=>foo.Child.Price))
You can also overwrite grid options. For example using the WithPaging method:
var server = new GridServer<Foo>(...).AutoGenerateColumns().WithPaging(10)
<- Localization | Render button, checkbox, etc. in a grid cell ->
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。