Blazor - Usando Grid com filtro

Hoje veremos como exibir dados em um grid com filtro e paginação usando os recursos das bibliotecas da GrapeCity.

Se você esta chegando agora e não sabe o que é o Blazor leia o artigo ASP .NET Core - Iniciando com o Blazor - Macoratti; se você já conhece e quer saber mais pode fazer o curso de Blazor Essencial.  

Exibindo dados em um Grid com paginação e filtro

Para nos ajudar na tarefa de exibir dados com filtro podemos usar os recursos das bibliotecas da GrapeCity que são disponibilizadas via Nuget.

Para conhecer mais detalhes sobre esta biblioteca acesse o link:  Grapecity

Vamos a seguir mostrar um exemplo prático.

Recursos usados:

Criando o projeto no VS Community 2019

bra o VS 2019 Community (versão mínima 16.4) e selecione a opção Create a New Project;

A seguir selecione a opção Blazor app e clique em next;

Informe o nome do projeto :  Blazor_Grid1, a localização e clique em Create;

Selecione a primeira opção - Blazor Server App. Não vamos usar autenticação e vamos habilitar o https.

Clique no botão Create para criar o projeto.

Com o projeto criado vamos limpar o projeto excluindo os arquivos abaixo e suas referências:

Após isso vamos instalar os pacotes da biblioteca GrapeCity em nosso projeto via Nuget acionando a opção menu Tools-> Manage Nuget Packages for Solution.

Vamos instalar os pacotes:

A seguir vamos incluir no arquivo _Host.cshtml as referências ao arquivo CSS e Javascript usados pelas bibliotecas acima:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor_Grid1</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/_content/C1.Blazor.Core/styles.css" />
    <link rel="stylesheet" href="~/_content/C1.Blazor.Grid/styles.css" />
    <link rel="stylesheet" href="~/_content/C1.Blazor.Input/styles.css" />

     <script src="~/_content/C1.Blazor.Core/scripts.js"></script>
     <script src="~/_content/C1.Blazor.Input/scripts.js"></script>
     <script src="~/_content/C1.Blazor.Grid/scripts.js"></script>
</head>
<body>
...

A seguir no arquivo _Imports.razor vamos incluir as referência às bibliotecas:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using Blazor_Grid1
@using Blazor_Grid1.Shared
@using Blazor_Grid1.Data
@using C1.Blazor.Grid
@using C1.Blazor.Input
 

Vamos aproveitar o componente FetchData.razor e usar o grid para exibir os dados. Para isso vamos alterar o código deste componente conforme abaixo:

@page "/fetchdata"
@inject WeatherForecastService ForecastService
<h1>Previsão do Tempo</h1>
<p>Usando o componente Flexgrid para exibir dados.</p>
@if (forecasts == null)
{
    <p><em>Carregando...</em></p>
}
else
{
    <FlexGrid ItemsSource="forecasts" 
              AutoGenerateColumns="false" 
              DefaultColumnWidth="GridLength.Star"
              ColumnHeaderStyle="@("font-weight:bold")">
        <FlexGridColumns>
            <GridColumn Binding="Date" Format="d"></GridColumn>
            <GridColumn Binding="TemperatureC" Header="Temp. (C)"></GridColumn>
            <GridColumn Binding="TemperatureF" Format="Temp. (F)"></GridColumn>
            <GridColumn Binding="Summary"></GridColumn>
        </FlexGridColumns>
    </FlexGrid>
}
@code {
    private WeatherForecast[] forecasts;
    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

Neste código substituímos a tabela HTML pelo código que usa o componente FlexGrid para exibir os dados da data e das temperaturas:

<table class="table">
   <thead>
      <tr>
        <th>Date</th>
        <th>Temp. (C)</th>
        <th>Temp. (F)</th>
        <th>Summary</th>
       </tr>
   </thead>
   <tbody>
  @foreach (var forecast in forecasts)
  {
     <tr>                         
     <td>@forecast.Date.ToShortDateString()</td>
     <td>@forecast.TemperatureC</td>
     <td>@forecast.TemperatureF</td>
     <td>@forecast.Summary</td>
    </tr>
  }
 </tbody>
</table>		 
<FlexGrid ItemsSource="forecasts" 
              AutoGenerateColumns="false" 
              DefaultColumnWidth="GridLength.Star"
              ColumnHeaderStyle="@("font-weight:bold")">
     <FlexGridColumns>
        <GridColumn Binding="Date" Format="d"></GridColumn>
        <GridColumn Binding="TemperatureC" Header="Temp. (C)"></GridColumn>
        <GridColumn Binding="TemperatureF" Format="Temp. (F)"></GridColumn>
        <GridColumn Binding="Summary"></GridColumn>
     </FlexGridColumns>
 </FlexGrid>

 

Executando o projeto veremos o resultado a seguir:

Vemos aqui alguns dos recursos do FlexGrid.

Vamos agora incluir um filtro e a paginação usando os recursos das bibliotecas Input e DataPager.

Para isso vamos alterar o código do componente FetchData.razor conforme abaixo:

@page "/fetchdata"
@inject WeatherForecastService ForecastService
<h1>Previsão do Tempo</h1>
<p>Usando o FlexGrid para exibir os dados</p>

@if (forecasts == null)
{
    <p><em>Carregando...</em></p>
}
else
{
    <C1TextBox @bind-Text="filtro"></C1TextBox>
     <p></p>
     <hr />
    <FlexGrid ItemsSource="forecasts"
              AutoGenerateColumns="false"
              DefaultColumnWidth="GridLength.Star"
              ColumnHeaderStyle="@("font-weight:bold")">        
        <FlexGridBehaviors>
            <FullTextFilterBehavior FilterString="@filtro" MatchNumbers="true" />
        </FlexGridBehaviors>
        <FlexGridColumns>
            <GridColumn Binding="Date" Format="d"></GridColumn>
            <GridColumn Binding="TemperatureC" Header="Temp. (C)"></GridColumn>
            <GridColumn Binding="TemperatureF" Header="Temp. (F)"></GridColumn>
            <GridColumn Binding="Summary"></GridColumn>
        </FlexGridColumns>
    </FlexGrid>
}
@code {
    private WeatherForecast[] forecasts;
    private string filtro;
    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);      
    }
}

No código acima :

1- Criamos uma caixa de texto

<C1TextBox @bind-Text="filtro"></C1TextBox>

2- Definimos o filtro usando a variável filtro que criamos :

        <FlexGridBehaviors>
            <FullTextFilterBehavior FilterString="@filtro" MatchNumbers="true" />
        </FlexGridBehaviors>

Agora é só alegria...

Executando o projeto teremos o resultado abaixo:

Aguarde mais artigos sobre o Blazor.

Pegue o projeto aqui:   Blazor_Grid.zip (sem as referências)

"No princípio era o Verbo, e o Verbo estava com Deus, e o Verbo era Deus.
Ele estava no princípio com Deus.
Todas as coisas foram feitas por ele, e sem ele nada do que foi feito se fez."
João 1:1-3
 


Referências:

José Carlos Macoratti