Hello everyone so I have the following problem:
- I want before the initlization of the component call the API and get the data and use it in the grid
- after initlization using (AfterRender) I am trying to change the picked column from local storage
- I am my API response object has:
1- Data
2- ErrorMessage
3- IsSuccess
What I want is if is success is false I want to show the error message in the grid, I really could mange to do it, I went through the debugger the problem is that after calling the API the method jumps to (AfterRender) Method
My full code:
@page "/orders"
@using WebUi.Constants.ApiConstants;
@inject IOrderService _orderServices
@inject TranslationStore translationStore
@inject ILocalStorageUtility _localStorageUtility;
<HeaderAndLogo MainComponentName="@translationStore.Translations["tabOrders"]" />
<div class="content-component-wrapper-orders relative scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100 ordersWrapper">
@if (!isLoading && cGUIOrdersResponse.IsSuccess)
{
<RadzenDataGrid Data="@cGUIOrdersResponse.Data.Orders" TItem="CGUIOrderResponse" AllowColumnResize="true" ColumnWidth="150px" AllowColumnPicking="true" @ref="@grid" PickedColumnsChanged="@SaveSettingsAsync" EmptyText="@ordersEmptyTextMessage">
<Columns>
@* Remember to do the isLoading here :)*@
<RadzenDataGridColumn Visible="@OrderID" TItem="CGUIOrderResponse" Property="OrderID" Title="@translationStore.Translations["OrderID"]" />
<RadzenDataGridColumn Visible="@MaterialMasterDescription" TItem="CGUIOrderResponse" Property="MaterialMasterDescription" Title="@translationStore.Translations["MaterialMasterDescription"]" Width="200px" />
<RadzenDataGridColumn Visible="@OrderStatusGlobalName" TItem="CGUIOrderResponse" Property="OrderStatusGlobalName" Title="@translationStore.Translations["OrderStatus"]" />
<RadzenDataGridColumn Visible="@RecipeID" TItem="CGUIOrderResponse" Property="RecipeID" Title="@translationStore.Translations["RecipeID"]" />
<RadzenDataGridColumn Visible="@RecipeDescription" TItem="CGUIOrderResponse" Property="RecipeDescription" Title="@translationStore.Translations["RecipeDescription"]" />
<RadzenDataGridColumn Visible="@MaterialMasterID" TItem="CGUIOrderResponse" Property="MaterialMasterID" Title="@translationStore.Translations["MaterialMasterID"]" />
<RadzenDataGridColumn Visible="@OrderQuantitySet" TItem="CGUIOrderResponse" Property="OrderQuantitySet" Title="@translationStore.Translations["OrderQuantitySet"]" Width="100px" />
<RadzenDataGridColumn Visible="@OrderQuantityDone" TItem="CGUIOrderResponse" Property="OrderQuantityDone" Title="@translationStore.Translations["OrderQuantityDone"]" Width="100px" />
<RadzenDataGridColumn Visible="@OrderQuantityRemaining" TItem="CGUIOrderResponse" Property="OrderQuantityRemaining" Title="@translationStore.Translations["OrderQuantityRemaining"]" Width="100px" />
<RadzenDataGridColumn Visible="@OrderPlannedStartTime" TItem="CGUIOrderResponse" Property="OrderPlannedStartTime" Title="@translationStore.Translations["OrderPlannedStartTime"]" />
<RadzenDataGridColumn Visible="@OrderActualStartTime" TItem="CGUIOrderResponse" Property="OrderActualStartTime" Title="@translationStore.Translations["OrderActualStartTime"]" />
<RadzenDataGridColumn Visible="@OrderActualEndTime" TItem="CGUIOrderResponse" Property="OrderActualEndTime" Title="@translationStore.Translations["OrderActualEndTime"]" />
<RadzenDataGridColumn Visible="@PairedOrderID" TItem="CGUIOrderResponse" Property="PairedOrderID" Title="@translationStore.Translations["PairedOrderID"]" />
<RadzenDataGridColumn Visible="@Comment" TItem="CGUIOrderResponse" Property="Comment" Title="@translationStore.Translations["Comment"]" />
</Columns>
</RadzenDataGrid>
}
else
{
<RadzenDataGrid TItem="CGUIOrderResponse" Data="@cGUIOrdersResponse.Data.Orders" AllowColumnResize="true" ColumnWidth="150px" AllowColumnPicking="true" @ref="@grid" PickedColumnsChanged="@SaveSettingsAsync" EmptyText="">
<EmptyTemplate>
<p style="color: lightgrey; font-size: 24px; text-align: center; margin: 2rem;">@cGUIOrdersResponse.ErrorMessage</p>
</EmptyTemplate>
<Columns>
@* Remember to do the isLoading here :)*@
<RadzenDataGridColumn Visible="@OrderID" TItem="CGUIOrderResponse" Property="OrderID" Title="@translationStore.Translations["OrderID"]" />
<RadzenDataGridColumn Visible="@MaterialMasterDescription" TItem="CGUIOrderResponse" Property="MaterialMasterDescription" Title="@translationStore.Translations["MaterialMasterDescription"]" Width="200px" />
<RadzenDataGridColumn Visible="@OrderStatusGlobalName" TItem="CGUIOrderResponse" Property="OrderStatusGlobalName" Title="@translationStore.Translations["OrderStatus"]" />
<RadzenDataGridColumn Visible="@RecipeID" TItem="CGUIOrderResponse" Property="RecipeID" Title="@translationStore.Translations["RecipeID"]" />
<RadzenDataGridColumn Visible="@RecipeDescription" TItem="CGUIOrderResponse" Property="RecipeDescription" Title="@translationStore.Translations["RecipeDescription"]" />
<RadzenDataGridColumn Visible="@MaterialMasterID" TItem="CGUIOrderResponse" Property="MaterialMasterID" Title="@translationStore.Translations["MaterialMasterID"]" />
<RadzenDataGridColumn Visible="@OrderQuantitySet" TItem="CGUIOrderResponse" Property="OrderQuantitySet" Title="@translationStore.Translations["OrderQuantitySet"]" Width="100px" />
<RadzenDataGridColumn Visible="@OrderQuantityDone" TItem="CGUIOrderResponse" Property="OrderQuantityDone" Title="@translationStore.Translations["OrderQuantityDone"]" Width="100px" />
<RadzenDataGridColumn Visible="@OrderQuantityRemaining" TItem="CGUIOrderResponse" Property="OrderQuantityRemaining" Title="@translationStore.Translations["OrderQuantityRemaining"]" Width="100px" />
<RadzenDataGridColumn Visible="@OrderPlannedStartTime" TItem="CGUIOrderResponse" Property="OrderPlannedStartTime" Title="@translationStore.Translations["OrderPlannedStartTime"]" />
<RadzenDataGridColumn Visible="@OrderActualStartTime" TItem="CGUIOrderResponse" Property="OrderActualStartTime" Title="@translationStore.Translations["OrderActualStartTime"]" />
<RadzenDataGridColumn Visible="@OrderActualEndTime" TItem="CGUIOrderResponse" Property="OrderActualEndTime" Title="@translationStore.Translations["OrderActualEndTime"]" />
<RadzenDataGridColumn Visible="@PairedOrderID" TItem="CGUIOrderResponse" Property="PairedOrderID" Title="@translationStore.Translations["PairedOrderID"]" />
<RadzenDataGridColumn Visible="@Comment" TItem="CGUIOrderResponse" Property="Comment" Title="@translationStore.Translations["Comment"]" />
</Columns>
</RadzenDataGrid>
}
</div>
@code {
#region States and variables
RadzenDataGrid<CGUIOrderResponse>? grid;
private CGUIApiResponse<CGUIOrdersResponse> cGUIOrdersResponse = new CGUIApiResponse<CGUIOrdersResponse> { Data = new CGUIOrdersResponse { Orders = new List<CGUIOrderResponse>() } };
private string ordersEmptyTextMessage = "No Orders found.";
private bool isLoading;
#endregion
#region Component data loading and life cycle
protected override async Task OnInitializedAsync()
{
translationStore.OnStateChange += StateHasChanged;
isLoading = true;
await LoadDataAsync();
isLoading = false;
StateHasChanged();
}
//Only solution left is to make things not async
private async Task LoadDataAsync()
{
cGUIOrdersResponse = await _orderServices.GetCGUIOrdersAsync(new CGUIOrderRequest { IsIgnoreCompletedOrder = false, WorkcenterId = 29, Status = new short[] { 1, 6 } });
if (!cGUIOrdersResponse.IsSuccess)
{
ordersEmptyTextMessage = cGUIOrdersResponse.ErrorMessage;
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await Task.Delay(1);
await ReadSettingsAsync();
StateHasChanged();
}
await base.OnAfterRenderAsync(firstRender);
}
public void Dispose()
{
translationStore.OnStateChange -= StateHasChanged;
}
#endregion
#region Column picker storage
bool OrderID = true,
MaterialMasterDescription = true,
OrderStatusGlobalName = true,
RecipeID = true,
RecipeDescription = true,
MaterialMasterID = true,
OrderQuantitySet = true,
OrderQuantityDone = true,
OrderQuantityRemaining = true,
OrderPlannedStartTime = true,
OrderActualStartTime = true,
OrderActualEndTime = true,
PairedOrderID = true,
Comment = true;
public async Task ReadSettingsAsync()
{
var localStorageResult = await _localStorageUtility.GetItemFromLocalStorageAsync("OrdersColumns");
//Local storage is not null
if (localStorageResult is not null)
{
//[1]- Turn result from local storage (JSON) to list of objects
var visibleColumns = JsonSerializer.Deserialize<IEnumerable<VisibleColumns>>(localStorageResult);
if (visibleColumns!.Count() > 0)
{
//[2]- Loop through the columns of the grid and get all the matches from local storage and change the values of visible
foreach (var column in grid?.ColumnsCollection!)
{
var r = visibleColumns?.Where(i => i.Property == column.Property).FirstOrDefault();
if (r is not null && !string.IsNullOrWhiteSpace(r.Property))
{
switch (r.Property)
{
case "OrderID":
OrderID = true;
break;
case "MaterialMasterDescription":
MaterialMasterDescription = true;
break;
case "OrderStatusGlobalName":
OrderStatusGlobalName = true;
break;
case "RecipeID":
RecipeID = true;
break;
case "RecipeDescription":
RecipeDescription = true;
break;
case "MaterialMasterID":
MaterialMasterID = true;
break;
case "OrderQuantitySet":
OrderQuantitySet = true;
break;
case "OrderQuantityDone":
OrderQuantityDone = true;
break;
case "OrderQuantityRemaining":
OrderQuantityRemaining = true;
break;
case "OrderPlannedStartTime":
OrderPlannedStartTime = true;
break;
case "OrderActualStartTime":
OrderActualStartTime = true;
break;
case "OrderActualEndTime":
OrderActualEndTime = true;
break;
case "PairedOrderID":
PairedOrderID = true;
break;
case "Comment":
Comment = true;
break;
}
}
else
{
switch (column.Property)
{
case "OrderID":
OrderID = false;
break;
case "MaterialMasterDescription":
MaterialMasterDescription = false;
break;
case "OrderStatusGlobalName":
OrderStatusGlobalName = false;
break;
case "RecipeID":
RecipeID = false;
break;
case "RecipeDescription":
RecipeDescription = false;
break;
case "MaterialMasterID":
MaterialMasterID = false;
break;
case "OrderQuantitySet":
OrderQuantitySet = false;
break;
case "OrderQuantityDone":
OrderQuantityDone = false;
break;
case "OrderQuantityRemaining":
OrderQuantityRemaining = false;
break;
case "OrderPlannedStartTime":
OrderPlannedStartTime = false;
break;
case "OrderActualStartTime":
OrderActualStartTime = false;
break;
case "OrderActualEndTime":
OrderActualEndTime = false;
break;
case "PairedOrderID":
PairedOrderID = false;
break;
case "Comment":
Comment = false;
break;
}
}
}
}
}
}
#endregion
#region Handling of Events and clicking
private async Task SaveSettingsAsync()
{
var visibleColumns = grid?.ColumnsCollection.Where(c => c.GetVisible()).Select(i => new { i.Property, i.Visible });
var json = JsonSerializer.Serialize(visibleColumns);
await _localStorageUtility.SetItemInLocalStorageAsync("OrdersColumns", json);
}
#endregion
}