-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feed data to Blazor WASM in C1 FlexGrid with Styled pager
- Loading branch information
manish.gupta
committed
Mar 30, 2022
1 parent
b15eedd
commit 6b00680
Showing
16 changed files
with
511 additions
and
18 deletions.
There are no files selected for viewing
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| using BlazorDataBinding.Shared; | ||
| using C1.DataCollection; | ||
| using C1.DataCollection.Serialization; | ||
| using System; | ||
| using System.Collections.Generic; | ||
| using System.Linq; | ||
| using System.Net.Http; | ||
| using System.Net.Http.Json; | ||
| using System.Text.Json; | ||
| using System.Threading; | ||
| using System.Threading.Tasks; | ||
|
|
||
| namespace BlazorDataBinding.Client.Models | ||
| { | ||
| public class CustomerPageDataCollection : C1VirtualDataCollection<Customers> | ||
| { | ||
| public HttpClient Http { get; set; } | ||
| private static readonly string URL = "api/customer"; | ||
| public override bool CanSort(params SortDescription[] sortDescriptions) | ||
| { | ||
| return true; | ||
| } | ||
|
|
||
| public override bool CanFilter(FilterExpression filterExpression) | ||
| { | ||
| return !(filterExpression is FilterPredicateExpression); | ||
| } | ||
|
|
||
| protected override async Task<Tuple<int, IReadOnlyList<Customers>>> GetPageAsync(int pageIndex, int startingIndex, int count, IReadOnlyList<SortDescription> sortDescriptions = null, FilterExpression filterExpression = null, CancellationToken cancellationToken = default) | ||
| { | ||
| string url = $"{URL}?skip={startingIndex}&take={count}"; | ||
| if (sortDescriptions?.Count > 0) | ||
| { | ||
| url += $"&sort={Uri.EscapeUriString(JsonSerializer.Serialize<IReadOnlyList<SortDescription>>(sortDescriptions))}"; | ||
| } | ||
| if (filterExpression != null) | ||
| { | ||
| var options = new JsonSerializerOptions { Converters = { new FilterExpressionJsonConverter() } }; | ||
| url += $"&filter={Uri.EscapeUriString(JsonSerializer.Serialize(filterExpression, options))}"; | ||
| } | ||
| var response = await Http.GetFromJsonAsync<CustomerResponse>(new Uri(url, UriKind.Relative), cancellationToken); | ||
| return new Tuple<int, IReadOnlyList<Customers>>(response.TotalCount, response.Customers.ToList()); | ||
| } | ||
| } | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| using BlazorDataBinding.Shared; | ||
| using C1.DataCollection; | ||
| using C1.DataCollection.Serialization; | ||
| using System; | ||
| using System.Collections.Generic; | ||
| using System.Linq; | ||
| using System.Net.Http; | ||
| using System.Net.Http.Json; | ||
| using System.Text.Json; | ||
| using System.Threading; | ||
| using System.Threading.Tasks; | ||
|
|
||
| namespace BlazorDataBinding.Client.Models | ||
| { | ||
| public class CustomerVirtualDataCollection : C1VirtualDataCollection<Customers> | ||
| { | ||
| public HttpClient Http { get; set; } | ||
| private static readonly string URL = "api/customer"; | ||
| public override bool CanSort(params SortDescription[] sortDescriptions) | ||
| { | ||
| return true; | ||
| } | ||
|
|
||
| public override bool CanFilter(FilterExpression filterExpression) | ||
| { | ||
| return !(filterExpression is FilterPredicateExpression); | ||
| } | ||
|
|
||
| protected override async Task<Tuple<int, IReadOnlyList<Customers>>> GetPageAsync(int pageIndex, int startingIndex, int count, IReadOnlyList<SortDescription> sortDescriptions = null, FilterExpression filterExpression = null, CancellationToken cancellationToken = default) | ||
| { | ||
| string url = $"{URL}?skip={startingIndex}&take={count}"; | ||
| if (sortDescriptions?.Count > 0) | ||
| { | ||
| url += $"&sort={Uri.EscapeUriString(JsonSerializer.Serialize<IReadOnlyList<SortDescription>>(sortDescriptions))}"; | ||
| } | ||
| if (filterExpression != null) | ||
| { | ||
| var options = new JsonSerializerOptions { Converters = { new FilterExpressionJsonConverter() } }; | ||
| url += $"&filter={Uri.EscapeUriString(JsonSerializer.Serialize(filterExpression, options))}"; | ||
| } | ||
| var response = await Http.GetFromJsonAsync<CustomerResponse>(new Uri(url, UriKind.Relative), cancellationToken); | ||
| return new Tuple<int, IReadOnlyList<Customers>>(response.TotalCount, response.Customers.ToList()); | ||
|
|
||
| } | ||
| } | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,27 @@ | ||
| @page "/" | ||
| @using BlazorDataBinding.Shared | ||
| @inject HttpClient Http | ||
|
|
||
| <h1>Weather forecast</h1> | ||
| <p>This component demonstrates fetching data to the FlexGrid with the IEnumerable or ObservableCollection data.</p> | ||
|
|
||
| <p>This component demonstrates fetching data from WebApi hosted on SameDomain.</p> | ||
|
|
||
| @if (forecasts == null) | ||
| { | ||
| <p><em>Loading...</em></p> | ||
| } | ||
| else | ||
| { | ||
| <FlexGrid ItemsSource="@forecasts" Style="C1GridStyle.GridStyle" RowStyle="C1GridStyle.RowStyle" AlternatingRowStyle="C1GridStyle.AlternatingRowStyle" ColumnHeaderStyle = "C1GridStyle.ColumnHeaderStyle"> | ||
| </FlexGrid> | ||
| { | ||
| <FlexGrid ItemsSource="@forecasts" Style="C1GridStyle.GridStyle" RowStyle="C1GridStyle.RowStyle" AlternatingRowStyle="C1GridStyle.AlternatingRowStyle" ColumnHeaderStyle = "C1GridStyle.ColumnHeaderStyle"></FlexGrid> | ||
| } | ||
|
|
||
| @code { | ||
| private List<WeatherForecast> forecasts; | ||
| private WeatherForecast[] forecasts; | ||
|
|
||
| public string filterText = ""; | ||
| protected override void OnInitialized() => forecasts = WeatherForecast.WeatherForecasts().ToList(); | ||
| public FlexGrid grid; | ||
| protected override async Task OnInitializedAsync() | ||
| { | ||
| forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json"); | ||
| } | ||
|
|
||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| @page "/paging" | ||
| @using BlazorDataBinding.Client.Models | ||
| @using BlazorDataBinding.Shared | ||
| @using C1.DataCollection | ||
| @inject HttpClient Http | ||
| <style> | ||
| .btn-circle { | ||
| width: 30px; | ||
| height: 30px; | ||
| padding: 6px 0px; | ||
| border-radius: 15px; | ||
| text-align: center; | ||
| font-size: 12px; | ||
| line-height: 1.42857; | ||
| } | ||
| .btn-circle:hover{ | ||
| outline: 1px solid #007bff; | ||
| } | ||
| .c1DataPagerBtn:focus{ | ||
| border:none !important; | ||
| outline:none !important; | ||
| } | ||
| </style> | ||
|
|
||
| <h3>Paged Data</h3> | ||
| <C1TextBox Class="filled-text-box" @bind-Text="filterText" Style="@("width:100%;margin-bottom:5px;")" Placeholder="Type to search..." /> | ||
| <h3>@loadingMessage</h3> | ||
| <FlexGrid ItemsSource="@collection" Style="C1GridStyle.GridStyle" RowStyle="C1GridStyle.RowStyle" AlternatingRowStyle="C1GridStyle.AlternatingRowStyle" ColumnHeaderStyle = "C1GridStyle.ColumnHeaderStyle"> | ||
| <FlexGridBehaviors> | ||
| <FullTextFilterBehavior FilterString="@filterText" /> | ||
| </FlexGridBehaviors> | ||
| </FlexGrid> | ||
| <C1DataPager Source="collection" ButtonStyle="C1ButtonStyle.PagerButtonStyle" > | ||
| <PrevTemplate> | ||
| <span class="badge badge-pill badge-primary" style="@C1ButtonStyle.ButtonStyle">← Prev</span> | ||
| </PrevTemplate> | ||
| <NextTemplate> | ||
| <span class="badge badge-pill badge-primary" style="@C1ButtonStyle.ButtonStyle"> Next →</span> | ||
| </NextTemplate> | ||
| <PageNumberTemplate Context="pageNo"> | ||
| @if(pageNo == collection.CurrentPage+1) | ||
| { | ||
| <span class="btn btn-primary btn-circle" style="@C1ButtonStyle.ActiveButtonStyle">@pageNo</span> | ||
| }else{ | ||
| <span class="btn btn-default btn-circle" >@pageNo</span> | ||
| } | ||
| </PageNumberTemplate> | ||
| </C1DataPager> | ||
|
|
||
|
|
||
| @code { | ||
| string filterText=""; | ||
| string loadingMessage; | ||
| C1DataPager pager; | ||
| C1PagedDataCollection<Customers> collection; | ||
| int VirtualPageSize = 15; | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| collection = new C1PagedDataCollection<Customers>(new CustomerVirtualDataCollection(){Http = Http, PageSize = VirtualPageSize }){PageSize = VirtualPageSize}; | ||
| } | ||
| } | ||
|
|
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| @page "/virtual" | ||
| @using BlazorDataBinding.Client.Models | ||
| @using BlazorDataBinding.Shared | ||
| @inject HttpClient Http | ||
|
|
||
| <h3>VirtualData</h3> | ||
| <C1TextBox Class="filled-text-box" @bind-Text="filterText" Style="@("width:100%;margin-bottom:5px;")" Placeholder="Type to search..." /> | ||
|
|
||
| <FlexGrid ItemsSource="@collection" Style="C1GridStyle.GridStyle" RowStyle="C1GridStyle.RowStyle" AlternatingRowStyle="C1GridStyle.AlternatingRowStyle" ColumnHeaderStyle = "C1GridStyle.ColumnHeaderStyle"> | ||
| <FlexGridBehaviors> | ||
| <FullTextFilterBehavior FilterString="@filterText" /> | ||
| </FlexGridBehaviors> | ||
| </FlexGrid> | ||
|
|
||
|
|
||
|
|
||
| @code { | ||
| string filterText=""; | ||
| string loadingMessage; | ||
|
|
||
| CustomerVirtualDataCollection collection; | ||
| int VirtualPageSize = 15; | ||
|
|
||
| protected override Task OnInitializedAsync() | ||
| { | ||
| collection = new CustomerVirtualDataCollection() {Http = Http, PageSize = VirtualPageSize }; | ||
| return base.OnInitializedAsync(); | ||
| } | ||
|
|
||
| } |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,3 +11,4 @@ | |
| @using C1.Blazor.Core | ||
| @using C1.Blazor.Input | ||
| @using C1.Blazor.Grid | ||
| @using C1.Blazor.DataPager | ||
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
Oops, something went wrong.