Hello and sorry if this has been asked before.
I am using the DataGrid as an event log viewer and also have Radzen DropDowns, DatePicker to filter events on.
If I select anything in the drop downs or dates, the grid reloads itself. None of those events changes anything in the GUI or database. Is there any way of stopping the grid from reloading and only reload when the bound data object is changed? Thanks.
Hi @Odavis,
If the grid data are retrieved on OnInitialized or OnInitializedAsync nothing will be able to reload them except explicit call.
Hi and thank you for the response.
I am not seeing that. Each line of data is being formatted through "GetMessageSpan " and in the format function I have a debug statement that writes to the immediate window and every time I select/deselect an item in one of the drop downs the entire grid view is scrolled in the immediate window. All drop downs are in a separate div from the DataGrid that is in it's own div.
The GetMessageSpan below removes embedded formatting char's and colors lines based on event type. "StateHasChanged" is not called anywhere except in the initial function "OnAfterRenderAsync".
The reloading is not being called from any of the code from what I can see. I traced it to the rendering tree code in ASP .net. We are using the latest 5.0.1 of entity framework core and asp net core. Thanks.
EDIT: Actually, clicking anywhere on the grid also triggers the @((MarkupString)GetMessageSpan(logs)) code.
<RadzenGridColumn Width="75px" TItem="Logs" Property="logs.Timestamp" Title="Time Stamp" TextAlign="TextAlign.Left">
<HeaderTemplate><span style='color:black; font-weight:normal; font-size:12px'>Time Stamp</span></HeaderTemplate>
<Template Context="logs">
<span style="color:black; font-weight:normal; font-size:12px">@logs.Timestamp</span>
</Template>
</RadzenGridColumn>
<RadzenGridColumn Width="60px" TItem="Logs" Visible="@ShowIPColumn" Property="@IPAddress" Title="IP Adress" TextAlign="TextAlign.Left">
<HeaderTemplate><span style='color:black; font-weight:normal; font-size:12px'>IP Adress</span></HeaderTemplate>
<Template Context="logs">
<span style="color:black; font-weight:normal; font-size:12px">@IPAddress</span>
</Template>
</RadzenGridColumn>
<RadzenGridColumn Width="600px" TItem="Logs" Property="logs.Message" Title="Message" TextAlign="TextAlign.Left">
<HeaderTemplate><span style='color:black; font-weight:normal; font-size:12px'>Message</span></HeaderTemplate>
<Template Context="logs">
<RadzenImage Path=@GetIconPath(logs) Style="width:12px; height:12px" />
@((MarkupString)GetMessageSpan(logs))
</Template>
</RadzenGridColumn>
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
GetLogDB(); //<-- This loads the database
evLogLevels = GetDropDownStrings("Level");
evSourceContext = GetDropDownStrings("SourceContext");
evNode = GetDropDownStrings("Node");
StateHasChanged(); //<-- Needed or nothing gets displayed.
}
}
How is the Data property set? If it is set to an expression it will cause the DataGrid to rebind on every StateHasChanged() call (because it will set the Data property again).
Hi and thank you for the response.
Yes exactly, but the StateHasChanged() is not being called except on the initial loading of the grid or an expected change. The Data is being used to hold the data of the grid in a variable "evLog" and that is updated for filtering.
Clicking and selecting a drop down item or just clicking on the grid itself is causing the @((MarkupString)GetMessageSpan(logs)) to be called.
Is there a different way to use the grid then this? Thanks for any help.
I can't tell without seeing the complete declaration. Also you can pull the source code from our github repo and trace what is causing the rerendering of the DataGrid.
Here is the complete declaration.
I will try and debug later if possible. This is part of a much larger project and I may not be able to add the github code to run with.
Notes: Logs type is an entity class. evLog is a Entity MySql DB made up of class Logs.
Up top of page
@inject logContext logdb;
Insidee @code block
IEnumerable<Logs> evLog;
evLog = (some Linq code).Take(MaxRecs).ToList();
Blazor html:
<div id="Events">
<RadzenCard Style="background-color:linen; padding:5px; width:100%; height:600px">
<RadzenGrid Data="@evLog" TItem="Logs" @ref="evGrid" RowRender="@RowRender" CellRender="@CellRender" AllowFiltering="false" AllowPaging="false" AllowSorting="false" Style="line-height: 14px; width:100%; height: 585px; margin-right:5px;">
<Template Context="logItem">
@*Expanded grid*@
<RadzenGrid Data="@GetLogItem(logItem)" TItem="Logs" CellRender="@ItemCellRender" AllowPaging="false" AllowSorting="false" AllowFiltering="false">
<Columns>
<RadzenGridColumn Width="600px" TItem="Logs" Property="log.Message">
<Template Context="logMessage">
@((MarkupString)GetExpandText(logMessage, true))
</Template>
</RadzenGridColumn>
</Columns>
</RadzenGrid>
</Template>
<Columns>
@*Main Grid View*@
<RadzenGridColumn Width="75px" TItem="Logs" Property="logs.Timestamp" Title="Time Stamp" TextAlign="TextAlign.Left">
<HeaderTemplate><span style='color:black; font-weight:normal; font-size:12px'>Time Stamp</span></HeaderTemplate>
<Template Context="logs">
<span style="color:black; font-weight:normal; font-size:12px">@logs.Timestamp</span>
</Template>
</RadzenGridColumn>
<RadzenGridColumn Width="60px" TItem="Logs" Visible="@ShowIPColumn" Property="@IPAddress" Title="IP Adress" TextAlign="TextAlign.Left">
<HeaderTemplate><span style='color:black; font-weight:normal; font-size:12px'>IP Adress</span></HeaderTemplate>
<Template Context="logs">
<span style="color:black; font-weight:normal; font-size:12px">@IPAddress</span>
</Template>
</RadzenGridColumn>
<RadzenGridColumn Width="600px" TItem="Logs" Property="logs.Message" Title="Message" TextAlign="TextAlign.Left">
<HeaderTemplate><span style='color:black; font-weight:normal; font-size:12px'>Message</span></HeaderTemplate>
<Template Context="logs">
<RadzenImage Path=@GetIconPath(logs) Style="width:12px; height:12px" />
@((MarkupString)GetMessageSpan(logs))
</Template>
</RadzenGridColumn>
</Columns>
</RadzenGrid>
</RadzenCard>
</div>
This code looks correct and I am not sure what could be causing the grid to render again. The only suggestion I could give is to add a ProjectReference to the Radzen.Blazor project file and debug it to see what triggers the update. You can get it from here: https://github.com/radzenhq/radzen-blazor/tree/master/Radzen.Blazor
Thank you. I will try and see what's going on and add that reference.
For what ever reason the Radzen.Blazor project would not add as a reference. There 7 other projects I have all added as references but your would not add only as a dll. So I can't debug to the level you are asking. Sorry.
Any other ideas? Thanks.
If you have a subscription you can send us your application to info@radzen.com and we will troubleshoot. Other than that debugging is the only option.
Thank you for the offer, but I don't have a subscription. Probably should get one but don't have one right now.
I made this test page which has this bug in it as well. Perhaps you can make a test app, new blazor server project. Add Radzen 3.1.3 and then add this class to WeatherForecast.cs
public class Logs
{
public string IPAddress { get; set; }
public string Message { get; set; }
public DateTime Date { get; set; }
}
Then replace the index page code with this:
@page "/"
@using Blazor_Radzen_Test.Data
@using System;
@using System.IO;
@using System.Collections.Generic;
<div id="Events">
<RadzenCard Style="background-color:linen; padding:5px; width:99%; height:600px">
<RadzenGrid Data="@evLog" TItem="Logs" @ref="evGrid" AllowFiltering="false" AllowPaging="false" AllowSorting="false" Style="line-height: 14px; width:100%; height: 585px; margin-right:5px;">
<Columns>
@*Main Grid View*@
<RadzenGridColumn Width="75px" TItem="Logs" Property="logs.Timestamp" Title="Time Stamp" TextAlign="TextAlign.Left">
<HeaderTemplate><span style='color:black; font-weight:normal; font-size:12px'>Time Stamp</span></HeaderTemplate>
<Template Context="logs">
<span style="color:black; font-weight:normal; font-size:12px">@DateTime.Now</span>
</Template>
</RadzenGridColumn>
<RadzenGridColumn Width="60px" TItem="Logs" Property="logs.IPAddress" Title="IP Adress" TextAlign="TextAlign.Left">
<HeaderTemplate><span style='color:black; font-weight:normal; font-size:12px'>IP Adress</span></HeaderTemplate>
<Template Context="logs">
<span style="color:black; font-weight:normal; font-size:12px">@logs.IPAddress</span>
</Template>
</RadzenGridColumn>
<RadzenGridColumn Width="600px" TItem="Logs" Property="logs.Message" Title="Message" TextAlign="TextAlign.Left">
<HeaderTemplate><span style='color:black; font-weight:normal; font-size:12px'>Message</span></HeaderTemplate>
<Template Context="logs">
@((MarkupString)GetMessageSpan(logs))
</Template>
</RadzenGridColumn>
</Columns>
</RadzenGrid>
</RadzenCard>
</div>
@code {
IEnumerable<Logs> evLog;
RadzenGrid<Logs> evGrid;
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
GetLogDB();
StateHasChanged();
}
}
private void GetLogDB()
{
List<Logs> logs = new List<Logs>();
for (int x = 0; x < 50; x++)
{
Logs log = new Logs();
log.Date = DateTime.Now;
log.IPAddress = "192.168.2.138";
log.Message = $"This should work {x}";
logs.Add(log);
}
evLog = logs;
}
private string GetMessageSpan(Logs log)
{
string color = "black";
string fontSize = "12px";
return $"<span style='color:{color}; font-size:{fontSize}; white-space:pre-wrap'>{log.Message}</span>";
}
}
Then run and just click on any grid row and function GetMessageSpan will be called every time. It also gets called when you select any item in dropdowns if they were there.
GetMessageSpan in the real application formats the text and backcolor etc. of the original message.
This is for a event log page in an application.
Disappointing (email response) that you don't want to look at this problem. As mentioned by yourself, the code is correct, so that leaves a possible bug in the Radzen code that is causing this to happen. Hopefully you will change your mind and have a look at this issue. Thanks you for your help thus far.