Last active
October 17, 2022 08:32
-
-
Save bbqchickenrobot/9af26063108beb4acb75e9a9dc5b4ae0 to your computer and use it in GitHub Desktop.
Blazorise DataGrid Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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..."); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{ | |
"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