Skip to content

Commit

Permalink
improve group rendering, fix bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@pwelter34
pwelter34 committed Aug 18, 2024
1 parent e07730d commit 0c8ae22
Show file tree
Hide file tree
Showing 8 changed files with 88 additions and 57 deletions.
4 changes: 2 additions & 2 deletions samples/Sample.Core/Pages/DataGrid/Examples/Banks.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@

<DataGrid Data="Data" class="table table-hover" @ref="DataGrid" RowAttributes="RowAttributes" Filterable="true" Groupable="true">
<DataColumns>
<DataColumn TItem="Bank" Property="p => p.BankName" Grouping="true" SortIndex="0" />
<DataColumn TItem="Bank" Property="p => p.Id" Width="70px" data-test="testing" CellAttributes="CellAttributes" />
<DataColumn TItem="Bank" Property="p => p.AccountNumber" Width="150px" Title="Account" />
<DataColumn TItem="Bank" Property="p => p.IBAN" Width="200px" />
<DataColumn TItem="Bank" Property="p => p.BankName" Grouping="true" SortIndex="0" />
<DataColumn TItem="Bank" Property="p => p.RoutingNumber" Width="200px" />
<DataColumn TItem="Bank" Property="p => p.SwiftBIC" Width="200px" />
</DataColumns>
<DataPagination Context="grid">
<DataPager PageSize="10" />
<DataPager PageSize="100" />
<DataSizer />
<div>@grid.Pager.StartItem - @grid.Pager.EndItem of @grid.Pager.Total</div>
</DataPagination>
Expand Down
3 changes: 3 additions & 0 deletions src/LoreSoft.Blazor.Controls/Data/DataComponentBase.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,9 @@ protected virtual async ValueTask RefreshCoreAsync()
else
{
DataError = ex;
Pager.Total = 0;
View = null;

}
}
finally
Expand Down
104 changes: 60 additions & 44 deletions src/LoreSoft.Blazor.Controls/Data/DataGrid.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<div class="data-grid-table">
<table class="data-grid" @attributes="@TableAttributes">
<colgroup>
@if (DetailTemplate != null)
@if (DetailTemplate != null || HasGrouping)
{
<col style="width: 32px; padding: 0" />
}
Expand All @@ -36,7 +36,7 @@
</colgroup>
<thead>
<tr>
@if (DetailTemplate != null)
@if (DetailTemplate != null || HasGrouping)
{
<th class="data-grid-hierarchy-cell">
</th>
Expand Down Expand Up @@ -147,29 +147,40 @@
</td>
</tr>
}
else if (View == null)
else if (View == null || IsLoading)
{
for (int i = 0; i < 5; i++)
@if (LoadingTemplate != null)
{
<tr @key="i">
@if (DetailTemplate != null)
{
<td class="data-grid-hierarchy-cell">
</td>
}
@if (Selectable)
{
<td class="data-grid-selector-cell">
</td>
}
@foreach (var column in VisibleColumns)
{
<td @key="column" class="@column.ClassName">
<Skeleton />
</td>
}
<tr>
<td colspan="@CellCount">
@LoadingTemplate
</td>
</tr>
}
else
{
for (int i = 0; i < 5; i++)
{
<tr @key="i">
@if (DetailTemplate != null || HasGrouping)
{
<td class="data-grid-hierarchy-cell">
</td>
}
@if (Selectable)
{
<td class="data-grid-selector-cell">
</td>
}
@foreach (var column in VisibleColumns)
{
<td @key="column" class="@column.ClassName">
<Skeleton />
</td>
}
</tr>
}
}
}
else if (View.Count == 0)
{
Expand All @@ -196,7 +207,7 @@
@RowFragment(item)
</Virtualize>
}
else if (Groupable && Columns.Any(c => c.Grouping))
else if (HasGrouping)
{
var groupColumn = Columns.FirstOrDefault(c => c.Grouping) ?? Columns.First();

Expand All @@ -205,22 +216,31 @@
var groupKey = group.Key;

<tr @key="group" class="data-grid-group-row">
<td colspan="@CellCount" class="data-grid-group-cell">
<td class="data-grid-hierarchy-cell">
<button type="button"
@onclick="() => ToggleGroupRow(groupKey)"
title="Show Group"
class="data-grid-group-button @(IsGroupExpanded(groupKey) ? "data-grid-group-button-expanded" : "data-grid-group-button-collapsed" )"></button>

@if (groupColumn.GroupTemplate != null)
{
@groupColumn.GroupTemplate(group)
}
else
{
<span>@groupColumn.HeaderTitle(): @groupKey</span>
}
</td>
@if (Selectable)
{
<td></td>
}
@foreach (var column in VisibleColumns)
{
<td @key="column">
@if (groupColumn.GroupTemplate != null)
{
@groupColumn.GroupTemplate(group)
}
else if (column == groupColumn)
{
@groupKey
}
</td>
}
</tr>

@if (IsGroupExpanded(groupKey))
{
@foreach (var item in group)
Expand All @@ -242,7 +262,7 @@
{
<tfoot>
<tr>
@if (DetailTemplate != null)
@if (DetailTemplate != null || HasGrouping)
{
<td></td>
}
Expand Down Expand Up @@ -272,17 +292,6 @@
</div>
</CascadingValue>
}
@if (IsLoading)
{
@if (LoadingTemplate == null)
{
<LoadingBlock IsLoading="true" />
}
else
{
@LoadingTemplate
}
}
</div>
</CascadingValue>

Expand All @@ -307,6 +316,7 @@
@ondblclick="() => RowDoubleClick.InvokeAsync(item)"
class="@RowClass"
style="@(RowStyle?.Invoke(item))">

@if (DetailTemplate != null)
{
<td class="data-grid-hierarchy-cell">
Expand All @@ -316,6 +326,11 @@
class="data-grid-hierarchy-button @(IsRowExpanded(item) ? "data-grid-hierarchy-button-expanded" : "data-grid-hierarchy-button-collapsed" )"></button>
</td>
}
else if (HasGrouping)
{
<td class="data-grid-hierarchy-cell"></td>
}

@if (Selectable)
{
<td class="data-grid-selector-cell">
Expand All @@ -328,6 +343,7 @@
</div>
</td>
}

@foreach (var column in VisibleColumns)
{
<td @key="column"
Expand Down
11 changes: 9 additions & 2 deletions src/LoreSoft.Blazor.Controls/Data/DataGrid.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,9 +174,13 @@ public async Task SortByAsync(string columnName)

protected List<DataColumn<TItem>> VisibleColumns => Columns.Where(c => c.Visible).ToList();

protected int CellCount => (Columns?.Count ?? 0) + (DetailTemplate != null ? 1 : 0) + (Selectable ? 1 : 0);
protected int CellCount => (Columns?.Count ?? 0)
+ (DetailTemplate != null || (Groupable && Columns.Any(c => c.Grouping)) ? 1 : 0)
+ (Selectable ? 1 : 0);


protected bool HasGrouping => Groupable && Columns.Any(c => c.Grouping);

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && (Columns == null || Columns.Count == 0)) // verify columns added
Expand Down Expand Up @@ -233,7 +237,10 @@ protected void ToggleGroupRow(string key)

protected bool IsAllSelected()
{
return View?.All(IsRowSelected) == true;
if (View == null || View.Count == 0)
return false;

return View.All(IsRowSelected);
}

protected void ToggleSelectAll()
Expand Down
2 changes: 1 addition & 1 deletion src/LoreSoft.Blazor.Controls/Data/DataPager.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ public class DataPager : ComponentBase, IDisposable
public bool ShowPage { get; set; } = true;

[Parameter]
public bool ShowEmpty { get; set; } = false;
public bool ShowEmpty { get; set; } = true;

[Parameter]
public bool CenterSelected { get; set; } = true;
Expand Down
17 changes: 11 additions & 6 deletions src/LoreSoft.Blazor.Controls/Styles/_data.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,17 @@
}

.data-grid-error {
padding: 1.5rem;
color: #dc3545;
padding: 1.5rem !important;
color: #dc3545 !important;
text-align: center;
font-weight: 600;
}

.data-grid-empty {
padding: 1.5rem !important;
color: #6c757d !important;
text-align: center;
padding: 1.5rem;
color: #6c757d;
font-weight: 600;
}

.data-grid-table {
Expand Down Expand Up @@ -84,8 +87,10 @@ button.data-grid-header-filter {
padding: 0 !important;
}

.data-grid-group-cell {
font-weight: 600;
.data-grid-group-row {
td {
font-weight: 600;
}
}

.data-grid-hierarchy-button,
Expand Down
2 changes: 1 addition & 1 deletion src/LoreSoft.Blazor.Controls/wwwroot/BlazorControls.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 0c8ae22

Please sign in to comment.