In our application we use some large datasets and present them in a TelerikGrid. We use WPF + Blazor Hybrid and noticed, that in some cases the memory usage of the Web View process grows up to some gigabytes.
Here a screenshot of the task manager with a lot of RAM usage for the web view.
Here a screenshot of the detached DOM elements after a two navigations. The container divs are not garbage collected.
I tracked down the issue to come from the TelerikGrid, because when I remove it from the pages, everything runs fine. I also removed all GridColumns and the issue is still present. In the developer tools I noticed that one of the parent div elements remains in memory every time I navigate back and forth.
I also created a blank Blazor WebAssembly Standalone application and added a simple instance of the grid. Here, the issue is also present. I attach the one blazor page that causes the issue.
I've tested all major versions from 5.1 upwards, every version is affected.
Hello,
I created a repl to replicate the issue that I'm having. I created a Filter with a custom editor. For this example, I used a Textbox and I save the changes back to the context.FilterDescriptor.Value in the OnChange method which occurs when the user blurs focus.
If you start the repl w/o checking the Use Custom Editor checkbox and enter text where the "Sample" value is located you will see the changes are saved properly to the bound CompositeFilter property and are echo'd back in the screen.
If instead you check the Use Custom Editor box and perform the same test you'll see that the same changes are not present in the bound CompositeFilter.
Note that this issue only occurs if you start with an existing CompositeFilter and bind it to the filter control. It seems that if the control creates the FilterDescriptor objects then their changes bind properly, but if the FilterDescriptor objects existed before binding to the control then the issue occurs.
https://blazorrepl.telerik.com/wIOtcKOb31mjTc3351
Thank You,
-Andy
============= TELERIK EDIT ===============
A possible workaround is to find the original filter descriptor and update its Value:
@using Telerik.DataSource
@System.Text.Json.JsonSerializer.Serialize(FilterValue)
<br />
<br />
<TelerikFilter @bind-Value="@FilterValue">
<FilterFields>
<FilterField Name="Field" Type="@(typeof(string))">
<ValueTemplate>
<TelerikTextBox Value="@((string)context.FilterDescriptor.Value)"
ValueChanged="@( (string newValue) => OnTextBoxValueChanged(context.FilterDescriptor, newValue) )"
DebounceDelay="0" />
</ValueTemplate>
</FilterField>
</FilterFields>
</TelerikFilter>
@code {
private void OnTextBoxValueChanged(FilterDescriptor templateFD, string newValue)
{
var originalFD = FilterValue.FilterDescriptors.OfType<FilterDescriptor>().FirstOrDefault(x =>
{
return x.Member == templateFD.Member &&
x.MemberType == templateFD.MemberType &&
x.Operator == templateFD.Operator &&
x.Value == templateFD.Value;
});
if (originalFD != null)
{
templateFD.Value = newValue;
originalFD.Value = newValue;
}
}
private CompositeFilterDescriptor FilterValue { get; set; } = new()
{
LogicalOperator = FilterCompositionLogicalOperator.Or,
FilterDescriptors = new FilterDescriptorCollection() {
new FilterDescriptor()
{
Member = "Field",
MemberType = typeof(string),
Value = "Sample"
}
}
};
}
I've noticed this warning is now shown since version 9.0.0. I checked the release notes and don't see any notes reflecting this change. I also checked the documentation and don't see any information about the OnUpdate event. Can we please update the documentation to document the changes? I would like to understand the behavior of OnUpdate so I can move away from ValueChanged.
"warning CS0618: 'TelerikFilter.ValueChanged' is obsolete: 'Use OnUpdate instead.'"
The following date in the Scheduler RecurrenceRule cannot be parsed and is ignored:
RecurrenceRule = "FREQ=DAILY;UNTIL=20210722T000000"
According to the RFC5545 specification, this should be a valid date format.
These formats will work:
RecurrenceRule = "FREQ=DAILY;UNTIL=2021-07-22T00:00:00"
RecurrenceRule = "FREQ=DAILY;UNTIL=2021-07-22T00:00:00.000Z"
EDIT:
This is my work-around. It captures the date portion of the UNTIL clause, converts it into the date string style that Telerik can understand, then reassembles the rule stringprivate string TransformRecurrenceRule()
{
const string untilSeparator = "UNTIL=";
var ruleParts = RecurrenceRule.Split(untilSeparator, StringSplitOptions.RemoveEmptyEntries);
if (ruleParts.Length <= 1)
{
// There was no Until clause to worry about
return RecurrenceRule;
}
// Save the first part of the rule
var ruleBeginning = ruleParts[0];
// Split the date part of the until clause from any following clauses
var remainingClauses = ruleParts[1].Split(';', 2, StringSplitOptions.RemoveEmptyEntries);
//Save the date part of the until clause
var untilDate = remainingClauses[0];
// Save any following clauses with the `;` replaced
var ruleEnding = "";
if (remainingClauses.Length == 2)
{
ruleEnding = $";{remainingClauses[1]}";
}
// Convert the until date into .net parsable format
const string format = "yyyyMMddTHHmmss";
var date = DateTime.ParseExact(untilDate, format, CultureInfo.InvariantCulture);
var dateStr = date.ToString("yyyy-MM-ddTHH:mm:ss");
// recombine rule components
var newRuleParts = new[] {ruleBeginning, untilSeparator, dateStr, ruleEnding};
var newRule = string.Join("",newRuleParts);
return newRule;
}
The NumericTextBox does not render the new Value that is set in ValueChanged if this new value is different than the event argument. Instead, the component clears the textbox, even though the component Value parameter is correct.
https://blazorrepl.telerik.com/wzaAHYas221go9xd48
The problem occurs only if there is an existing value and the user removes it with Backspace.
When the user opens the DateTimePicker(Time step) or the TimePicker, which are bound to some value, and clicks directly the "Set" button, the pickers don't bind the displayed time value (pre-selected value). This behavior can be seen when the pickers have configured steps (e.g. Minute: "15", Year="10" etc.)
Steps To Reproduce
File data is not available in the Upload's OnSuccess event.
Regression in version 9.0.0 introduced with the addition of the chunk upload functionality.
https://github.com/telerik/blazor/blob/master/js/telerik-blazor/src/upload/upload.ts#L282-L288
<TelerikUpload SaveUrl="/api/upload/save"
RemoveUrl="/api/upload/remove"
OnSuccess="@OnSuccessHandler" />
@code {
async Task OnSuccessHandler(UploadSuccessEventArgs e)
{
foreach (var file in e.Files)
{
Console.WriteLine($"Name = {file.Name}, Size = {file.Size}, Extension = {file.Extension}");
}
StateHasChanged();
}
}
The properties have their default values (null for Name and Extension and 0 for Size).
The actual file data is accessible in the OnSuccess event handler.
All
8.1.1
When enabling resizing and reordering for the Telerik Grid, using `MinResizableWidth` to set minimal column width will apply the constraint to the column position rather than the actual movable column. This means applying a min width of 200px to the first column will work as expected until the column is moved to another position. Now the column in question no longer has the min width applied, and the column that has moved into the first position has the 200px min width constraint.
It appears this is due to the constraint being applied to the `data-col-index` rather than the `data-col-initialization-index`, or something to that effect.
The following example has a 200px min-width constraint applied to the "Name" first column, and no custom min-with applied to "Address" second column. Switching the columns by moving the "Name" after the "Address" will apply the constraint to the "Address" and not the "Name".
https://blazorrepl.telerik.com/QJEAcuPE41L7Uhiw44
Currently using 7.1.0 but looks to be an issue in later versions as shown by the REPL example. Tested in Firefox and Chrome.
The column position is arbitrary and the bug isn't due to the constraint being applied to the 0 column, applying the constrain to all even columns then shuffling would result in the constrain still being applied to all even columns.
A pane that has Closeable="false" set does not render a "close" button and should not be closeable through any user interaction. However, pressing the Esc keyboard key (while the pane is floating and has the focus) closes the pane.
Run the following REPL example: https://blazorrepl.telerik.com/QTkgmKuM23c0uPv125
The floating pane closes.
The floating pane remains open.
Workaround:
Add the following script to the view:
<script suppress-error="BL9992">
document.addEventListener(
"keydown",
function (e) {
if (e.key === "Escape" && e.target.classList.contains("k-dock-manager-window")) {
e.stopImmediatePropagation();
e.preventDefault();
}
},
true
);
</script>
All
No response
The TimePicker TimeView resets the date portion of the component Value to today. This does not happen when typing in the DateInput.
The problem is with start-end validation where the start Value gets ahead of the end Value, even if the time parts are valid.
A possible workaround is to use the TimePicker ValueChanged event to override the date part to its previous value, or to set a fixed date value that is the same for the start and end TimePickers.
I have been having issues adding the month view to a Telerik Blazor scheduler component, when there is grouping. It gives a null reference error any time I try to switch to the month view. I also tried it using the available demo for grouping in Telerik REPL, the only difference I found between my code and the demo was that I had used the ItemsPerSlot parameter. I added this to the demo, and was able to reproduce the error I was seeing, and I have attached the console output from the REPL demo. I believe there is either a bug with the ItemsPerSlot being used in conjunction with grouping on a scheduler component, or some instruction missing from how to set it up properly to prevent this null reference issue.
Changed code:
<SchedulerMonthView ItemsPerSlot="5"></SchedulerMonthView>
Demo used:
Blazor Scheduler (Event Calendar) Demos - Grouping | Telerik UI for Blazor
The scenario is:
In this case, the Grid should not try to create or clone an edit item on its own. Instead, it should rely on the returned instance from OnModelInit. However, the Grid first fires OnModelInit and then it still tries to clone or create an edit item, which causes an exception.
A possible workaround is to manage the whole edit process manually, similar to the example with ListView popup editing.
The application can trigger edit mode through the Gantt state, similar to the how you can trigger edit mode programmatically in the Grid. However, in this case, the Gantt edit form does not show the tabs for editing dependencies and custom model properties.
Test page with a possible JavaScript-based workaround (it requires the item to edit to be rendered:
lm applying class like this :
<TelerikToolBar>
<ToolBarButton Class="my-custom-class" ... />
<ToolBarTemplateItem Class="my-custom-class">
...
</ToolBarTemplateItem>
</TelerikToolBar>
But the resulting div for the ToolBarITemplateItem does not get class applied to it.
=====ADMIN EDIT=====
A possible workaround for the time being is to use different CSS selectors in order to style the specific elements:
<style>
.second-template-item {
border: solid;
border-color: limegreen;
}
.my-group button:nth-child(1) {
border: solid;
border-color: red;
}
.my-group button:nth-child(3) {
border: solid;
border-color: blue;
}
</style>
<TelerikToolBar>
<ToolBarButtonGroup Class="my-group">
<ToolBarButton>Bold</ToolBarButton>
<ToolBarButton>Italic</ToolBarButton>
<ToolBarButton>Underline</ToolBarButton>
</ToolBarButtonGroup>
<ToolBarSeparator />
<ToolBarTemplateItem>
<TelerikDropDownList Data="@Roles" @bind-Value="@SelectedRole" />
</ToolBarTemplateItem>
<ToolBarTemplateItem>
<TelerikDropDownList Class="second-template-item" Data="@Roles" @bind-Value="@SelectedRole" />
</ToolBarTemplateItem>
</TelerikToolBar>
@code {
public string SelectedRole { get; set; }
public List<string> Roles { get; set; } = new List<string>()
{
"Manager", "QA", "Developer", "Support"
};
protected override void OnInitialized()
{
SelectedRole = Roles.FirstOrDefault();
}
}
When attempting to utilize the FilterMenuButtonsTemplate component, after selecting any of the defined action buttons (i.e., Clear, Filter, etc.), the selection will cause the page to refresh.
Steps:
When the OverflowMode of a Toolbar is set to ToolBarOverflowMode.None, changing a tool’s parameters programmatically can cause overflowed tools to disappear.
Reproduction example: https://blazorrepl.telerik.com/mzYKQEYM23bGXmvN56
In the meantime, a possible alternative is to use Adaptive="false" instead OverflowMode="ToolBarOverflowMode.None"
The arrow buttons in the Map's navigator and the zoom buttons render without type="button" attribute.
Inspect the navigator and zoom buttons in this demo: https://demos.telerik.com/blazor-ui/map/overview
The buttons render without the type attribute.
The buttons render with type="button" attribute.
All
No response