How To Create A Reusable Grid Component For Blazor

Ankit Sharma
Dec 10, 2018 · 7 min read

Introduction

Prerequisites

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

Source Code

Creating Blazor Library project

dotnet new blazorlib -o BlazorGridComponent

Creating BlazorGrid component

@typeparam TableItem

<table>
<thead>
<tr class="jsgrid-grid-header">@GridHeader</tr>
</thead>
<tbody>
@foreach (var item in ItemList)
{
<tr class="jsgrid-row-item">@GridRow(item)</tr>
}
</tbody>
</table>
<div class="pagination">

<button class="btn pagebutton btn-info" onclick=@(async () => SetPagerSize("back"))>&laquo;</button>
<button class="btn pagebutton btn-secondary" onclick=@(async () => NavigateToPage("previous"))>Prev</button>

@for (int i = startPage; i <= endPage; i++)
{
var currentPage = i;
<button class="btn pagebutton @(currentPage==curPage?"currentpage":"")" onclick=@(async () => updateList(currentPage))>
@currentPage
</button>
}

<button class="btn pagebutton btn-secondary" onclick=@(async () => NavigateToPage("next"))>Next</button>
<button class="btn pagebutton btn-info" onclick=@(async () => SetPagerSize("forward"))>&raquo;</button>

<span class="pagebutton btn btn-link disabled">Page @curPage of @totalPages</span>

</div>

@functions {
int totalPages;
int curPage;
int pagerSize;
int startPage;
int endPage;

[Parameter]
RenderFragment GridHeader { get; set; }
[Parameter]
RenderFragment<TableItem> GridRow { get; set; }
[Parameter]
IEnumerable<TableItem> Items { get; set; }
[Parameter]
int PageSize { get; set; }

IEnumerable<TableItem> ItemList { get; set; }

protected override async Task OnInitAsync()
{
pagerSize = 5;
curPage = 1;

ItemList = Items.Skip((curPage - 1) * PageSize).Take(PageSize);
totalPages = (int)Math.Ceiling(Items.Count() / (decimal)PageSize);

SetPagerSize("forward");
}

public void updateList(int currentPage)
{
ItemList = Items.Skip((currentPage - 1) * PageSize).Take(PageSize);
curPage = currentPage;
this.StateHasChanged();
}

public void SetPagerSize(string direction)
{
if (direction == "forward" && endPage < totalPages)
{
startPage = endPage + 1;
if (endPage + pagerSize < totalPages)
{
endPage = startPage + pagerSize - 1;
}
else
{
endPage = totalPages;
}
this.StateHasChanged();
}
else if (direction == "back" && startPage > 1)
{
endPage = startPage - 1;
startPage = startPage - pagerSize;
}
}

public void NavigateToPage(string direction)
{
if (direction == "next")
{
if (curPage < totalPages)
{
if (curPage == endPage)
{
SetPagerSize("forward");
}
curPage += 1;
}
}
else if (direction == "previous")
{
if (curPage > 1)
{
if (curPage == startPage)
{
SetPagerSize("back");
}
curPage -= 1;
}
}
updateList(curPage);
}
}

Adding CSS for BlazorGrid component

.jsgrid-grid-header {
text-align: center;
border-collapse: collapse;
background: #ebebeb;
}

.jsgrid-row-item:hover {
background: #9fcdf4;
}

th, td {
padding: 15px;
border: 1px solid #d1d1d1;
text-align: center;
}

.pagebutton {
margin-right: 5px;
margin-top: 5px;
}

.currentpage {
background-color: dodgerblue;
color: white;
}

Create Blazor Web Application

Adding the BlazorGrid component to the Blazor project

@addTagHelper *,BlazorGridComponent

Using BlazorGrid component

<BlazorGrid Items="@forecasts" PageSize="4">
<GridHeader>
<th>Date</th>
<th>TemperatureC</th>
<th>TemperatureF</th>
<th>Summary</th>
</GridHeader>
<GridRow>
<td>@context.Date.ToShortDateString()</td>
<td>@context.TemperatureC</td>
<td>@context.TemperatureF</td>
<td>@context.Summary</td>
</GridRow>
</BlazorGrid>

Execution Demo

Conclusion

See Also

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +397,714 people.

Subscribe to receive our top stories here.

The Startup

Medium's largest active publication, followed by +479K people. Follow to join our community.

Ankit Sharma

Written by

C# Corner MVP | Dzone MVB | Author | Speaker | Software Engineer | Passionate Programmer https://ankitsharmablogs.com/

The Startup

Medium's largest active publication, followed by +479K people. Follow to join our community.