This is kind of hard to explain, so please see the attached Before and After videos. In these videos, I'm using a brand new .NET 6 console app.
In the Before video, the Telerik UI for Blazor extension is disabled. After I type `Console` and hit the period, I see intellisense like I expect to.
In the After video, the extension is enabled. I'm typing the same thing and hitting period, but something interrupts the period keystroke, and it never appears. Instead, it just closes the intellisense window.
I used a new console app as an example, but it's happening in all projects. It's also happening with other keys like semicolons, spaces, and tabs. It's causing a huge amount of typos and making so I often have to hit keystrokes twice in order for them to register.
I tried doing a full reinstall of Visual Studio. Everything's fine until I install the Telerik extension, then it starts. If I disable the extension, the issue goes away.
Hi,
In most of my projects I use the ObjectGraphDataAnnotationsValidator component for validating complex types; and I also use a lot of your components. I've noticed what I *think* might be a clash between this validator and some of your input components. I've built a simple (and crude) example but I think it demonstrates the problem.
In the example code we have a table with 2 cells - in both cells we have an EditForm and 10 TelerikTextArea components. The first cell's EditForm contains a ObjectGraphDataAnnotationsValidator instance and the 2nd cell doesn't. Hopefully when you try to reproduce you will notice a distinct difference in performance with the performance of the 2nd EditForm being great, while the 1st EditForm is quite laggy and gets worse the more items you add.
I'm wondering if there is a clash here between the ObjectGraphDataAnnotationsValidator and the input components or I'm using them incorrectly?
Thanks
Michael.
@page "/"
<table width="100%">
<tr>
<td width="50%">
<h3>EditForm with ObjectGraphDataAnnotationsValidator</h3>
<EditForm Model="Items">
<ObjectGraphDataAnnotationsValidator />
@foreach (var item in Items)
{
<div style="display: flex">
<TelerikTextArea @bind-Value="item.TextValue" />
@if (Items.IndexOf(item) == (Items.Count - 1))
{
<TelerikButton OnClick="@(() => Items.Add(new DataItem()))">
Add
</TelerikButton>
}
</div>
}
</EditForm>
</td>
<td width="50%">
<h3>EditForm without ObjectGraphDataAnnotationsValidator</h3>
<EditForm Model="Items">
@foreach (var item in Items)
{
<div style="display: flex">
<TelerikTextArea @bind-Value="item.TextValue" />
@if (Items.IndexOf(item) == (Items.Count - 1))
{
<TelerikButton OnClick="@(() => Items.Add(new DataItem()))">
Add
</TelerikButton>
}
</div>
}
</EditForm>
</td>
</tr>
</table>
@code {
protected List<DataItem> Items { get; set; }
protected override void OnInitialized()
{
Items = new List<DataItem>();
for (var i = 1; i <= 10; i++)
{
Items.Add(new DataItem { TextValue = $"This is item number {i}." });
}
}
public class DataItem
{
public string TextValue { get; set; }
}
}
If the TextArea component is used within an EditorTemplate of a grid column, edit mode is always closed upon hitting ENTER. The thing is that I'm using the TextArea to allow the user to input several lines. Upon Enter the user wants to move to a new line within the TextArea and not to finish the edit mode.
Regards,
René
---
ADMIN EDIT
For the time being I can offer using the popup editing or a custom external edit form (inline or popup).
Another workaround would be to stop the keydown event propagation so the grid/treelist cannot consume it and close the cell:
<TreeListColumn Field="EmailAddress" Width="220px">
<EditorTemplate>
@{
CurrentlyEditedEmployee = context as Employee;
<div @onkeydown:stopPropagation="true">
<TelerikTextArea @bind-Value="@CurrentlyEditedEmployee.EmailAddress"></TelerikTextArea>
</div>
}
</EditorTemplate>
</TreeListColumn>
It is possible that the grid might stop handling Enter when editor templates are present so you can use the events from the custom editor as desired to invoke the save operation. This could happen through the following request: https://feedback.telerik.com/blazor/1493770-ability-to-prevent-multiple-calls-of-async-updatehandler-when-pressing-enter-in-incell-edit-mode. With or without it, it is highly likely that the approach of preventing the event propagation is the correct one because the grid cannot know what the editor template contains and handle events differently based on that.
---
I have an ENUM like this:
public enum DeliveryMailOptions
{
Regular,
[Display(Name ="FedEx Priority")]
FedExPriority,
[Display(Name ="FedEx Two-Day")]
FedExTwoDay
}
It is used in a data model like so:
[Display(Name = "Mail Option")]
public DeliveryMailOptions MailOption { get; set; }
When rendered, it ignores the Display attribute and only shows the enum text.
Hi Telerik Support.
I am using TelerikComboBox with Virtualization and enabled Filtering. If I filter for a text and then scroll down, the filter text gets cleared. I am using OnRead event to populate the combo box. But the same issue is seen with local data population in the below sample code.
https://demos.telerik.com/blazor-ui/combobox/virtualization
I need to show the user the text they have entered even when they scroll down to the next page. Is there a solution for this?
Regards
Bably
Hi,
I noticed that using left or right arrow to position yourself between typed text does not work anymore in the GridSearchBox. Neither does SHIFT+left for selecting parts of typed text. Home or End key is also not working.
In previous versions this was still possible.
Can be estabished on the demo pages as well:
https://demos.telerik.com/blazor-ui/grid/searchbox
Thanks,
Tom
If filtering is enabled, the error may prevent the view from rendering similar to NotImplementedException: Unexpected frame type during RemoveOldFrame: None.
Without filtering, an exception is thrown when you attempt to edit a field, similar to Error: System.InvalidCastException: Unable to cast object of type 'System.String' to type 'System.Nullable`1[System.Int64]'.
Hello there,
I encountered an issue with the TelerikGrid component. This started to be an issue from version 4.1.0 and can be reproduced from here:
If this line from the example:
<GridColumn Field=@nameof(SampleData.Name) Title="Name" />
<GridColumn Field=@nameof(SampleData.Name) Title="Name" Visible="@!isVisible">
<Template>
@((context as SampleData).Name)
</Template>
</GridColumn>
you can see that once the template GridColumn is shown, its data overwrites the data of the "Hire Date" column when toggling the visibility of the columns. The header of the column is changing but the data stays the same.
To provide a visual context of the issue, I have attached a video.
Best regards,
Ivaylo
We find this in our infrastructure but it can be reproduced even in Telerik docs.
Docs page: https://docs.telerik.com/blazor-ui/components/grid/grouping/overview try to drop all three columns using drag and drop in sequence: Team, Name, On Vacation.
Expected sequence: Team, Name, On Vacation
Expected sequence: Team, On Vacation, Name
All Elements are always added as 1 item. It is an important feature for us, as our customers use it frequently.
===
TELERIK EDIT:
A possible workaround is to intercept the grouping and reorder the groups:
@using Telerik.DataSource
<p>Group by a third column, so that it should come last in the Group Panel:</p>
<TelerikGrid @ref="@GridRef"
Data="@GridData"
Pageable="true"
Sortable="true"
Groupable="true"
FilterMode="GridFilterMode.FilterRow"
OnStateInit="@( (GridStateEventArgs<Employee> args) => OnGridStateInit(args) )"
OnStateChanged="@( (GridStateEventArgs<Employee> args) => OnGridStateChanged(args) )">
<GridColumns>
<GridColumn Field="@nameof(Employee.Name)" />
<GridColumn Field="@nameof(Employee.Team)" />
<GridColumn Field="@nameof(Employee.Salary)" />
<GridColumn Field="@nameof(Employee.OnVacation)" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Employee>? GridRef { get; set; }
private List<Employee> GridData { get; set; } = new();
private void OnGridStateInit(GridStateEventArgs<Employee> args)
{
args.GridState.GroupDescriptors = new List<GroupDescriptor>();
args.GridState.GroupDescriptors.Add(new GroupDescriptor()
{
Member = nameof(Employee.Team),
MemberType = typeof(string)
});
args.GridState.GroupDescriptors.Add(new GroupDescriptor()
{
Member = nameof(Employee.OnVacation),
MemberType = typeof(bool)
});
}
private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
{
if (args.PropertyName == "GroupDescriptors" && args.GridState.GroupDescriptors.Count > 2 && GridRef != null)
{
var secondGroupDescriptor = args.GridState.GroupDescriptors.ElementAt(1);
args.GridState.GroupDescriptors.Remove(secondGroupDescriptor);
args.GridState.GroupDescriptors.Add(secondGroupDescriptor);
await GridRef.SetStateAsync(args.GridState);
}
}
protected override void OnInitialized()
{
var rnd = new Random();
for (int i = 1; i <= 20; i++)
{
GridData.Add(new Employee()
{
Id = i,
Name = "Name " + i,
Team = "Team " + (i % 4 + 1),
Salary = (decimal)rnd.Next(1000, 3000),
OnVacation = i % 3 == 0
});
}
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Team { get; set; } = string.Empty;
public decimal Salary { get; set; }
public bool OnVacation { get; set; }
}
}
Steps to reproduce this are pretty simple. On the Blazor Wizard demo at this link:
- Enter a password on step 1
- Click 'Next' to bring you to the 'Shipping' step
- Set focus to the 'City' input box. I clicked to the end of the default string that is pre-populated as 'Torino'
- Press the left arrow key. This sends you back to Step 1 (Registration)
This is a pretty big stumbling block for using the Wizard component, but I may be missing some kind of setting or code that will resolve this.
So, brand new machine (Win 11 pro 64bit), brand new install of Visual Studio & Telerik, use the Telerik templates to create a new Blazor Server project.
When I run the application (with changes or first run), it takes almost a minute to start the application.
Without changes it starts in 2 seconds.
The fix is to add the following to the application's csproj file.
<PropertyGroup>
<UseRazorBuildServer>false</UseRazorBuildServer>
</PropertyGroup>
After the fix, it takes an just a little longer to run than without changes. Since I have not heard back on my support ticket, I wanted to report this as a bug so hopefully it can get upvoted and we can get an answer to this issue.
Original support ticket https://www.telerik.com/account/support-center/view-ticket/1621737
My Setup:
7950x, 32 gb DDR5 ram, WD Black SSD 850x SSD and slower internet 150mbit/s
Similar problem with my new laptop which is about 50% slower but exactly the same issue.
Peter
Hi
Trying to update to the latest version but in output in GitHub Actions it shows:
The type 'DataSourceRequest' is defined in an assembly that is not referenced. You must add a reference to assembly 'Telerik.DataSource, Version=2.1.3.0
However in my csproj I am referencing <PackageReference Include="Telerik.DataSource" Version="2.1.3" />
Any ideas?
This error appears after update 15, in 14.1 it works correctly.
ADMIN EDIT:
This error occurs from the FilterMode set to FilterRow. As a workaround, until the fix is implemented, you could use the FilterMenu instead.
Regards
blazor.server.js:15 [2020-06-30T23:44:51.768Z] Error: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
at System.Collections.Generic.List`1.get_Item(Int32 index)
at Telerik.Blazor.Components.Grid.GridCellBase`1.get_Column()
at Telerik.Blazor.Components.Grid.GridCellBase`1.get_BoundColumn()
at Telerik.Blazor.Components.Grid.GridFilterCell`1.get_BoundColumnFilterCellTemplate()
at Telerik.Blazor.Components.Grid.GridFilterCell`1.BuildRenderTree(RenderTreeBuilder __builder)
at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
If I set the Visible parameter to false for either ToolBarButton or ToolBarToggleButton it does not hide them from the UI.
<AdminEdit>
A workaround would be to use the Class parameter and add a display:none CSS rules.
Code snippet for the workaround:
<style>
.hidden-button{
display:none;
}
</style>
<TelerikToolBar>
<ToolBarButton Class="hidden-button">Hidden button</ToolBarButton>
<ToolBarButton Icon="@IconName.Star">Visible button</ToolBarButton>
<ToolBarToggleButton Class="hidden-button">Hidden toggle button</ToolBarToggleButton>
<ToolBarToggleButton @bind-Selected="@isSelected">Visible toggle button</ToolBarToggleButton>
</TelerikToolBar>
@code {
public bool isSelected { get; set; } = true;
}
</AdminEdit>
I have a numeric text box that is bound to a nullable int. There is also a combo box on the page that will auto set the value and disable the numeric text box if certain values are selected. as follows:
<TelerikComboBox Data="@TareTypes"
TextField="Name" ValueField="Id"
ValueExpression="@(() => Material.TareTypeId)"
ValueChanged="@((int? e) => TareTypeChanged(e))"
Width="200px"
Placeholder="Tare Type" ClearButton="true"></TelerikComboBox>
<TelerikNumericTextBox @bind-Value="@Material.TareWeight" Arrows="false" Enabled="@tareWeightEnabled" ></TelerikNumericTextBox>
and the code...
private void TareTypeChanged(int? tareTypeId)
{
Material.TareTypeId = tareTypeId;
tareWeightEnabled = true;
if (tareTypeId > 0)
{
var tareTypeWeight = TareTypes.Single(t => t.Id == tareTypeId).Weight;
if (tareTypeWeight.HasValue)
{
Material.TareWeight = tareTypeWeight;
tareWeightEnabled = false;
editContext.NotifyFieldChanged(editContext.Field("TareWeight"));
}
}
}
the following steps should reproduce the problem
Based on the example used in this page (https://docs.telerik.com/blazor-ui/components/grid/editing/incell)
i tried to use a component of my own composed by teleriks components in the editor template
@page "/fetchdata"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject IAccessTokenProvider AuthenticationService
@inject NavigationManager Navigation
@inject WeatherForecastDataSource WeatherForecastDataSource
@using Olympus.Artemis.Shared
@attribute [Authorize]
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<TelerikGrid Data="_data" Height="400px"
Pageable="true" Sortable="true" Groupable="true" EditMode="@GridEditMode.Incell" Navigable="true"
FilterMode="Telerik.Blazor.GridFilterMode.FilterRow" @ref="_grid"
Resizable="true" Reorderable="true">
<GridColumns>
<GridColumn Field=@nameof(TestItem.WeatherForecastID) Title="Position" Width="200px">
<Template Context="item">
@{
var value = ((TestItem)item).WeatherForecastID;
var text = data.Where(x => x.ID == value).Select(x => x.Date).FirstOrDefault();
}
@text
</Template>
<EditorTemplate>
@{
currentItem = context as TestItem;
<Test2 OnChange="@onChange" DataSource="@this.WeatherForecastDataSource" Value="@currentItem.WeatherForecastID"></Test2>
}
</EditorTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>
</tbody>
</table>
@code {
protected async Task onChange(object o) {
currentItem.WeatherForecastID =(Guid) o;
Console.WriteLine("wrwerwe"+currentItem.WeatherForecastID);
await CloseEditor(currentItem);
}
protected async override Task OnParametersSetAsync()
{
data =await WeatherForecastDataSource.GetDataAsync();
await base.OnParametersSetAsync();
}
public List<WeatherForecast> data = new List<WeatherForecast>();
public TestItem currentItem { get; set; }
TelerikGrid<TestItem> _grid;
DateTime selectedValue { get; set; } = DateTime.Now;
private List<TestItem> _data = new List<TestItem>()
{
new TestItem { MyDate = DateTime.Today, DateName = "Σημερα" ,WeatherForecastID= new Guid("be4f3a98-5fd3-4972-bc49-1c442cdf87dd") ,ID=Guid.NewGuid()},
new TestItem { MyDate =DateTime.Today.AddDays(1), DateName = "Αύριο",WeatherForecastID=new Guid("7fac0c25-653b-4606-afef-19f6e27fc57a"),ID=Guid.NewGuid() },
new TestItem { MyDate =DateTime.Today.AddDays(2), DateName = "Μεθαύριο" ,WeatherForecastID= new Guid("48eb0a12-5971-479a-852d-6383f30e14cb"),ID=Guid.NewGuid()},
new TestItem { MyDate =DateTime.Today.AddDays(3), DateName = "Αντιμεθαύριο" ,WeatherForecastID= new Guid("113bde91-b0b9-45e0-9d4b-5b280650e042"),ID=Guid.NewGuid()}
};
public class TestItem:Olympus.Artemis.Shared.InfoEntities.BaseInfo {
public Guid WeatherForecastID { get; set; }
public DateTime MyDate { get; set; }
public string DateName { get; set; }
public override bool Equals(object obj)
{
if (obj != null && obj is TestItem)
{
TestItem curr = obj as TestItem;
return (ID == curr.ID) && (WeatherForecastID == curr.WeatherForecastID) && (MyDate == curr.MyDate) && (DateName == curr.DateName);
}
return false;
}
}
public async Task CloseEditor(TestItem currentItem)
{
var state = _grid?.GetState();
if (currentItem.ID == null && state.InsertedItem != null)
{
// insert operation - the item is new
await CreateHandler(new GridCommandEventArgs()
{
Item = state.InsertedItem
});
}
else
if (currentItem.ID != null && state.EditItem != null)
{
Console.WriteLine($"field c {state.EditField} {typeof(TestItem).GetProperty(state.EditField).GetValue(currentItem)}");
Console.WriteLine($"field e {state.EditField} {typeof(TestItem).GetProperty(state.EditField).GetValue(state.EditItem)}");
// edit operation on an existing item
await UpdateHandler(new GridCommandEventArgs()
{
Item = state.EditItem,
Field = state.EditField
});
}
state.InsertedItem = state.OriginalEditItem = state.EditItem = default;
StateHasChanged();
await Task.Delay(200); // let the grid re-render and close the cell if keyboard navigation is enabled
await _grid?.SetState(state);
}
async Task UpdateHandler(GridCommandEventArgs args)
{
string fieldName = args.Field;
object newVal = args.Value; // you can cast this, if necessary, according to your model
Console.WriteLine(fieldName);
TestItem item = (TestItem)args.Item; // you can also use the entire model
Console.WriteLine(item.ID);
// perform actual data source operation here through your service
// if the grid Data is not tied to the service, you may need to update the local view data too
var index = _data.FindIndex(i => i.ID == item.ID);
if (index != -1)
{
if (!_data[index].Equals(item))
{
_data[index] = item;
Console.WriteLine("Update event is fired for " + args.Field + typeof(TestItem).GetProperty(args.Field).GetValue(item));
// this copies the entire item, consider altering only the needed field
}
}
}
async Task CreateHandler(GridCommandEventArgs args)
{
TestItem item = (TestItem)args.Item;
item.ID = Guid.NewGuid();
_data.Insert(0, item);
Console.WriteLine("create");
// perform actual data source operation here through your service
}
}
The test2 component created by me is this one It only includes a telerikdropdown
@using Olympus.Artemis.Shared
<TelerikComboBox Data="@Items" Value="@Value" ValueField="ID" OnChange="@OnChange" TextField="Date">
</TelerikComboBox>
@code {
[Parameter]
public EventCallback<Object> OnChange { get; set; }
[Parameter]
public Guid Value { get; set; }
[Parameter]
public DataSource<WeatherForecast> DataSource { get; set; }
private IEnumerable<WeatherForecast> Items { get; set; } = new List<WeatherForecast>();
protected async override Task OnInitializedAsync()
{
Items = await DataSource.GetDataAsync();
await base.OnInitializedAsync();
}
}
But when i try to select something from the dropdown list the grid cel does not close gracefully
I get this error (the problem is when it executed the line await _grid?.SetState(state);)
blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
The test control is a simplified version of a more complex control i was trying to create (mutlicolumn combobox)
If I instead use the telerikdropdown in editortemplate everything works ok
After setting Enaabled=false on e.g. a TelerikTextBox, there is still possible to "tab" in to the textbox and write in it....
See attached.