Skip to content

Instantly share code, notes, and snippets.

@bbqchickenrobot
Last active October 17, 2022 08:32
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bbqchickenrobot/9af26063108beb4acb75e9a9dc5b4ae0 to your computer and use it in GitHub Desktop.
Save bbqchickenrobot/9af26063108beb4acb75e9a9dc5b4ae0 to your computer and use it in GitHub Desktop.
Blazorise DataGrid Example
@using Workflows.Models.FairChance
@inject NavigationManager NavigationManager
<br />
<br />
<Button Color="Color.Info" Clicked="OpenModal" class="float-right" style="background-color:mediumseagreen">
+Assessment
</Button>
<br />
<br />
<DataGrid TItem="ApplicantViewModel"
Data="@Applicants"
Filterable="true"
FilterMethod="DataGridFilterMethod.Contains"
ShowPager="true"
ShowPageSizes="true"
Editable="false"
Striped="true"
Hoverable="true"
Responsive="true"
SelectedRowChanged="OnSelectedRowChanged"
ReadData="@OnReadData"
>
<ChildContent>
<DataGridCommandColumn TItem="ApplicantViewModel"></DataGridCommandColumn>
<DataGridColumn TItem="ApplicantViewModel" Field="Id" Caption="Id" Sortable="false" Displayable="false"/>
<DataGridColumn TItem="ApplicantViewModel" Field="Firstname" Caption="Firstname" Sortable="false" Displayable="true"/>
<DataGridColumn TItem="ApplicantViewModel" Field="Lastname" Caption="Lastname" Sortable="false" Displayable="true"/>
<DataGridDateColumn TItem="ApplicantViewModel" Field="OfferDate" Caption="Offer Date" Sortable="false" Displayable="true"/>
<DataGridColumn TItem="ApplicantViewModel" Field="Department" Caption="Department" Sortable="false" Displayable="true"/>
<DataGridColumn TItem="ApplicantViewModel" Field="Classificaiton" Caption="Classification" Sortable="true" Displayable="true"/>
<DataGridColumn TItem="ApplicantViewModel" Field="EmailAddress" Caption="Email" Sortable="false" Displayable="true"/>
</ChildContent>
<EmptyTemplate>
<div class="box">
No records were found.
</div>
</EmptyTemplate>
<LoadingTemplate>
<div class="box">
<progress class="progress is-small is-primary" max="100"/>
</div>
</LoadingTemplate>
</DataGrid>
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Text.Json;
using System.Threading.Tasks;
using AutoMapper;
using Blazorise.DataGrid;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Logging;
using Workflows.Common;
using Workflows.Models.FairChance;
namespace Workflows.Blazor.Client.Components.Fairchance
{
public partial class ApplicantList
{
private const string path = "api/v1/applicant";
public List<ApplicantViewModel> Applicants { get; set; }
public ApplicantViewModel selectedApplicant;
[Inject] private ILogger<ApplicantList> log { get; init; }
[Inject] private HttpClient client { get; init; }
protected async Task OnReadData(DataGridReadDataEventArgs<ApplicantViewModel> e)
{
//StateHasChanged();
}
protected void OnSelectedRowChanged(ApplicantViewModel model)
{
log.LogInformation($"selected row changed: {model.ToJson()}");
}
protected void PageHasChanged(DataGridPageChangedEventArgs @event)
{
log.LogInformation($"page has changed");
}
protected override async Task OnInitializedAsync()
{
log.LogInformation($"component has initialized");
#if DEBUG
Thread.Sleep(4000);
#endif
var page = 1;
var rows = 10;
log.LogInformation($"{nameof(ApplicantList)} component is reading data...");
log.LogInformation($"client base url: {client.BaseAddress}{path}/{page}/{rows}");
var json = await client.GetStringAsync($"{path}/{page}/{rows}");
log.LogInformation($"data set: {json}");
Applicants = JsonSerializer.Deserialize<IEnumerable<ApplicantViewModel>>(json).ToList();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
log.LogInformation($"{nameof(ApplicantList)} has been rendered");
if (firstRender)
{
}
}
public void OpenModal()
{
//NavigationManager.NavigateTo("#");
log.LogInformation($"opening new applicant modal...");
}
}
}
public class ApplicantViewModel
{
[Key]
public Guid Id { get; set; }
public string Firstname { get; set; }
public string Middlename { get; set; }
public string Lastname { get; set; }
public DateTime? Dob { get; set; }
public string EmailAddress { get; set; }
public string PhoneNumber { get; set; }
public string EmployeeNumber { get; set; }
public DateTime? OfferDate { get; set; }
public string Department { get; set; }
public string Classificaiton { get; set; }
public DateTime? CreatedDate { get; set; }
public DateTime? ModifiedDate { get; set; }
}
[
{
"id": "4fa43b4c-8db3-497c-9d30-000465422538",
"firstname": "Santiago",
"middlename": null,
"lastname": "Shanahan",
"dob": "1987-07-05T05:05:13.4696152",
"emailAddress": "Santiago.Shanahan97@yahoo.com",
"phoneNumber": "405-870-2379",
"employeeNumber": "29m2j398",
"volunteerContractPersonnelNumber": "co9dsczr",
"offerDate": null,
"department": null,
"classificaiton": null,
"createdDate": "2020-06-21T04:44:59.0910325",
"modifiedDate": "2020-09-24T07:02:57.0435321"
},
{
"id": "0801eb00-72e7-4f97-8ca2-00075365e1a3",
"firstname": "Lucienne",
"middlename": "Jayne",
"lastname": "Carter",
"dob": "1976-08-21T22:37:30.3969512",
"emailAddress": "Lucienne.Carter4@yahoo.com",
"phoneNumber": "1-522-615-5828 x880",
"employeeNumber": "jp9qo30x",
"volunteerContractPersonnelNumber": "kz3e3zp9",
"offerDate": null,
"department": null,
"classificaiton": null,
"createdDate": "2020-07-23T21:15:10.415233",
"modifiedDate": "2020-02-24T14:55:38.7089364"
},
{
"id": "0b289dd9-5baa-4719-9ab3-0008ee627da4",
"firstname": "Raul",
"middlename": null,
"lastname": "Turcotte",
"dob": "1973-02-28T20:19:51.4773506",
"emailAddress": "Raul91@gmail.com",
"phoneNumber": "1-585-251-1582 x1371",
"employeeNumber": "gyrf9dpa",
"volunteerContractPersonnelNumber": "riz446ft",
"offerDate": null,
"department": null,
"classificaiton": null,
"createdDate": "2020-12-01T08:04:46.9650265",
"modifiedDate": "2020-09-14T14:46:19.7560338"
},
{
"id": "13b5d430-8b8e-4b9c-826b-000951a2e65f",
"firstname": "Elise",
"middlename": null,
"lastname": "Zieme",
"dob": "1940-07-08T21:16:52.3773648",
"emailAddress": "Elise.Zieme66@yahoo.com",
"phoneNumber": "776-866-9903",
"employeeNumber": "9f13at87",
"volunteerContractPersonnelNumber": "3kefhnb9",
"offerDate": null,
"department": null,
"classificaiton": null,
"createdDate": "2020-05-06T20:28:49.2648613",
"modifiedDate": "2020-01-20T05:19:34.5837688"
},
{
"id": "00af98ad-7606-4096-a94c-000bbd2199ac",
"firstname": "Shyann",
"middlename": null,
"lastname": "Moen",
"dob": "1954-12-24T13:00:20.2052499",
"emailAddress": "Shyann.Moen@yahoo.com",
"phoneNumber": "1-410-428-1018",
"employeeNumber": "an8q3g6e",
"volunteerContractPersonnelNumber": "ma03mg2f",
"offerDate": null,
"department": null,
"classificaiton": null,
"createdDate": "2020-01-20T15:19:30.9814221",
"modifiedDate": "2020-01-13T01:04:35.6654715"
},
{
"id": "08d6ee28-caa5-4149-a261-000d20099568",
"firstname": "Ollie",
"middlename": null,
"lastname": "Bechtelar",
"dob": "1961-05-18T16:28:11.0372712",
"emailAddress": "Ollie.Bechtelar@hotmail.com",
"phoneNumber": "1-489-268-2107 x69495",
"employeeNumber": "1fkwbyqf",
"volunteerContractPersonnelNumber": "kv1kliuc",
"offerDate": null,
"department": null,
"classificaiton": null,
"createdDate": "2020-09-08T12:02:06.4483752",
"modifiedDate": "2020-12-19T23:38:11.3327961"
},
{
"id": "e26bcd1e-4968-4dca-be50-000f82c5f02c",
"firstname": "Rita",
"middlename": null,
"lastname": "Schaefer",
"dob": "1950-11-19T05:30:40.1327896",
"emailAddress": "Rita_Schaefer@yahoo.com",
"phoneNumber": "1-554-772-4487",
"employeeNumber": "eyav4lqd",
"volunteerContractPersonnelNumber": "zkobi4eh",
"offerDate": null,
"department": null,
"classificaiton": null,
"createdDate": "2020-06-22T19:51:59.7087368",
"modifiedDate": "2020-12-11T01:39:13.549767"
},
{
"id": "b9a97374-ddf6-48bf-a315-00121e4e97d6",
"firstname": "Jabari",
"middlename": null,
"lastname": "Friesen",
"dob": "1957-06-18T23:06:43.3883691",
"emailAddress": "Jabari_Friesen@gmail.com",
"phoneNumber": "1-607-266-9893",
"employeeNumber": "4nsfw4bc",
"volunteerContractPersonnelNumber": "agukjldw",
"offerDate": null,
"department": null,
"classificaiton": null,
"createdDate": "2020-07-06T07:19:46.8255854",
"modifiedDate": "2020-06-24T10:34:42.1946348"
},
{
"id": "4a695ec2-1b7f-4288-a94d-001537bc29fb",
"firstname": "Pinkie",
"middlename": "Muriel",
"lastname": "Huels",
"dob": "1954-12-20T19:10:40.0741973",
"emailAddress": "Pinkie.Huels@hotmail.com",
"phoneNumber": "501-210-9444 x1026",
"employeeNumber": "ivspj21i",
"volunteerContractPersonnelNumber": "fp8zy9zi",
"offerDate": null,
"department": null,
"classificaiton": null,
"createdDate": "2020-03-09T02:59:54.0638472",
"modifiedDate": "2020-11-01T23:05:49.7869407"
},
{
"id": "68fec938-06bf-41a2-a803-001a5260bd70",
"firstname": "Jessika",
"middlename": "Freida",
"lastname": "Keebler",
"dob": "1950-10-20T16:33:34.7072518",
"emailAddress": "Jessika.Keebler@hotmail.com",
"phoneNumber": "1-641-995-7495",
"employeeNumber": "n0ofqxya",
"volunteerContractPersonnelNumber": "abw3ww63",
"offerDate": null,
"department": null,
"classificaiton": null,
"createdDate": "2020-07-07T17:40:58.4884901",
"modifiedDate": "2020-06-23T18:38:46.3799733"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment