I have implemented this Blazor DataGrid Component - Save / Load Settings | Free UI Components by Radzen for several of my RadzenDataGrid which is working.
However, I get this in the design UI:
This is happening because of the @bind-Settings="@Settings" Removing @ before bind fixes the ui error, but the grid settings do not work when running.
Hi @ken.stoner,
Could you try setting the Settings property to null? Something like this:
public DataGridSettings Settings
{
get
{
return _settings;
}
set
{
if (_settings != value)
{
_settings = value;
InvokeAsync(SaveStateAsync);
}
}
} = null;
When I do that I get: error CS8050: Only auto-implemented properties, or properties that use the 'field' keyword, can have initializers.
Issue:
Got it. We will have to think of some workaround in Radzen Blazor Studio.
No worries I can work around it.
Hi @ken.stoner,
I can't reproduce this for some reason. Can you tell me what you are doing in the attached video? Also can you paste the grid configuration as code. Maybe some property is triggering the exception.
Here is what I get:
Did some testing it only shows that exception when I click in the "Drag Column header here and drop it to group by that column" also if I click the 3dot drag handles:
Grid:
<RadzenDataGrid @ref="grid0" @bind-Settings="@Settings" ColumnWidth="200px" AllowFiltering="true" FilterMode="FilterMode.Advanced"
Data="@vCiwCounts" TItem="QMS.Models.QMS_Db.VCiwCount"
RowSelect="@EditRow" Density="Radzen.Density.Compact" AllowPaging="true" AllowSorting="true"
AllowColumnPicking="true" ColumnsPickerAllowFiltering="true" AllowColumnReorder="true" AllowColumnResize="true"
AllowGrouping="true" HideGroupedColumn="true" FilterPopupRenderMode="PopupRenderMode.OnDemand"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowVirtualization="false"
PageSize="@pageSize" PageSizeOptions="@pageSizeOptions" ShowPagingSummary="true" PageSizeChanged="@(args => pageSize = args)">
<HeaderTemplate>
<RadzenButton Click="@(args => Settings = null)" Text="Reset Layout" Size="Radzen.ButtonSize.ExtraSmall"/>
</HeaderTemplate>
<Columns>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="Ciid" Title="CI" Width="100px">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="Status" Title="Status" Width="110px">
<Template>
<RadzenRow>
<RadzenColumn>
<RadzenBadge Text="@context.Status" style=@($" width: 100%;{(context.CistatusId == 1 ? "background-color:orange" :context.CistatusId == 2 ? "background-color:grey" :context.CistatusId == 3 ? "background-color:rgb(182 207 32)" :context.CistatusId == 4 ? "background-color:#437594" :context.CistatusId == 5 ? "background-color:rgb(106 155 173)":context.CistatusId == 6 ? "background-color:rgb(93, 191, 116)":context.CistatusId == 11 ? "background-color:#d45087a8":"background-color:rgb(214, 77, 66)")}")/>
</RadzenColumn>
</RadzenRow>
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="Source" Title="Source">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="Type" Title="Type">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="EnteredBy" Title="Entered By">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="Proposer" Title="Proposer">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="Title" Title="Title">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="DueDate" Title="Due Date" FormatString="{0:d}">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="Location" Title="Location">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="Department" Title="Department">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="Area" Title="Area">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="Category" Title="Category">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="PendingApprovalCount" Title="Pending Approvals">
<HeaderTemplate>
<div style="text-align: center;">
<div>Pending</div>
<div>Approvals</div>
</div>
</HeaderTemplate>
<Template>
<RadzenRow>
<RadzenColumn>
<RadzenBadge Text="@context.PendingApprovalCount.ToString()" style=@($" width: 100%;{(context.PendingApprovalCount == 0 ? "background-color:rgb(93, 191, 116)" :"background-color:orange")}")/>
</RadzenColumn>
</RadzenRow>
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="QMS.Models.QMS_Db.VCiwCount" Property="OpenImplementationActionCount" Title="Open Actions">
<HeaderTemplate>
<div style="text-align: center;">
<div>Open</div>
<div>Actions</div>
</div>
</HeaderTemplate>
<Template>
<RadzenRow>
<RadzenColumn>
<RadzenBadge Text="@context.OpenImplementationActionCount.ToString()" style=@($" width: 100%;{(context.OpenImplementationActionCount == 0 ? "background-color:rgb(93, 191, 116)" :"background-color:orange")}")/>
</RadzenColumn>
</RadzenRow>
</Template>
</RadzenDataGridColumn>
</Columns>
<GroupHeaderTemplate Context="context">
<RadzenStack Orientation="Radzen.Orientation.Horizontal">
<strong>@context.GroupDescriptor.GetTitle(): @(context.Data.Key ?? "")</strong>
<span style="color: gray;">Total items: @context.Data.Count</span>
<!-- Count items per Status inside this Location group -->`
@foreach (var statusGroup in ((IEnumerable<QMS.Models.QMS_Db.VCiwCount>)context.Data.Items).GroupBy(item => item.Status))
{
<div>@statusGroup.Key: @statusGroup.Count()</div>
}
<!-- Count OpenImplementationActionCount -->
@{
var openActionCount = ((IEnumerable<QMS.Models.QMS_Db.VCiwCount>)context.Data.Items)
.Sum(item => item.OpenImplementationActionCount);
}
<div><strong>Open Implementation Actions: @openActionCount</strong></div>
<!-- Count OpenImplementationActionCount -->
@{
var openApprovalsCount = ((IEnumerable<QMS.Models.QMS_Db.VCiwCount>)context.Data.Items)
.Sum(item => item.PendingApprovalCount);
}
<div><strong>Pending Approvals: @openApprovalsCount</strong></div>
</RadzenStack>
</GroupHeaderTemplate>
</RadzenDataGrid>
Code:
IEnumerable<int> pageSizeOptions = new int[] {5, 10, 20, 30, 40};
int pageSize = 30;
DataGridSettings _settings;
public DataGridSettings Settings
{
get
{
return _settings;
}
set
{
if (_settings != value)
{
_settings = value;
InvokeAsync(SaveStateAsync);
}
}
}
private async Task LoadStateAsync()
{
await Task.CompletedTask;
var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "Settings");
if (!string.IsNullOrEmpty(result))
{
_settings = JsonSerializer.Deserialize<DataGridSettings>(result);
}
}
private async Task SaveStateAsync()
{
await Task.CompletedTask;
await JSRuntime.InvokeVoidAsync("window.localStorage.setItem", "Settings", JsonSerializer.Serialize<DataGridSettings>(Settings));
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await LoadStateAsync();
StateHasChanged();
}
}
When the error is shown if I close the .razor page an reopen it shows the grid again as normal.
Not sure if this is addressed in " * Design time exception No property or field "Property" exists in *."
But I still exhibit the same behavior.
That's strange. This was precisely the fix for that issue. I can no longer reproduce it with the latest version of Radzen Blazor Studio.