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 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. VS 2022 version 17.2.4, C#, Windows 11
I thought I'd have a look at blazor and selected the Telerik version in the new projects window and ran through the wizard.
I selected the dashboard look, .net 6, teleric UI for blazor 3.4.0 (Dev) and to enable localization, which is what I assume to be the cause of the following error message. There were no other hints and as I've never tried blazor or telerik for
blazor I don't know if there's anything missing from the solution. If I ran another wizard without localization there was no error.
An error occurred while running the wizard.
Error executing custom action Telerik.Blazor.VSX.Actions.CopyBlazorLocalizationResourcesAction: System.Collections.Generic.KeyNotFoundException: The given key was not present in the dictionary.
at System.ThrowHelper.ThrowKeyNotFoundException()
at System.Collections.Generic.Dictionary`2.get_Item(TKey key)
at Telerik.Blazor.VSX.Actions.CopyBlazorLocalizationResourcesAction.Execute(WizardContext wizardContext, IPropertyDataDictionary arguments, IProjectWrap project)
at Telerik.VSX.WizardEngine.ActionManager.ExecActions()
Blazor first steps bug in documentation, Primary="true" gives an error.
https://docs.telerik.com/blazor-ui/getting-started/server-blazor
Step 3 - Add a Telerik Component to a View
<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>
Primary = "true" gives an error with version 3, sb different for .net 6 and use ThemeColor
In https://docs.telerik.com/blazor-ui/components/grid/manual-operations?_ga=2.192647914.1753502014.1641929648-330381368.1614276734
in the code section of Get Information From the DataSourceRequest you are using a @function instead of an @code. Still works, but so 2019.
The second issue, typo in https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server readme, DataSourceRequet should be DataSourceRequest
Hello,
first of all, thank you for relelasing Dialog, it is what we are "simulating" by modal Window on any kind of heavy data editing app,again and again and again :) .
The problem is,
- when you put DropDownList in Dialog, using OnRead async task event, the UI is still "empty". => Iam fiddled with reassigning datasource, changing order of assigning source, nothing helped.
- same dropdownlist scenario inside window, working/displayed as expected.
Steps to reproduce:
1) click on then button to show window by -> async task
2) event OnRead of the dropdownlist is correctly called, data to the IEnumerable<model> is loaded
3) window appear, but DropDownList is empty
4) when you filter by typeing inside DropDownList, OnRead is called and model populated, but GUI is still empty
What doesnt worked:
- statechaned, reassign datasource, clear datasource, task delay
What partially worked:
- OnRead=> async Task changed to just: OnRead=> Task
Thanks for info what should be made done else.
Stripped sample:
<TelerikButton @onclick="@(() => ParamEd(4444, null))">open window or dialog</TelerikButton>
<TelerikWindow Modal="true" @bind-Visible="@ShowEditWindow" Draggable="true">
<WindowTitle>
<strong>@ShowEditWindowCaption</strong>
</WindowTitle>
<WindowContent>
<TelerikDropDownList @bind-Value="@CurrentEdit.ValTxt"
ScrollMode="@DropDownScrollMode.Virtual"
Data="@CurrentEdit.ComboSource"
OnRead="@ReadComboData"
ItemHeight="30"
TotalCount="@Paging.CNT"
PageSize="14"
PopupHeight="400px"
TextField="Nazev1"
ValueField="KeyVal"
Filterable="true"
FilterOperator="StringFilterOperator.Contains">
</TelerikDropDownList>
....
vs
<TelerikDialog @bind -Visible="@ShowEditWindow" Title="@ShowEditWindowCaption" CloseOnOverlayClick="false">
<DialogContent>
<TelerikDropDownList @bind-Value="@CurrentEdit.ValTxt"
ScrollMode="@DropDownScrollMode.Virtual"
Data="@CurrentEdit.ComboSource"
OnRead="@ReadComboData"
ItemHeight="30"
TotalCount="@Paging.CNT"
PageSize="14"
PopupHeight="400px"
TextField="Nazev1"
ValueField="KeyVal"
Filterable="true"
FilterOperator="StringFilterOperator.Contains">
</TelerikDropDownList>
....
@code{
public NotificationBase Notification { get; set; }
[CascadingParameter]
public DialogFactory Dialogs { get; set; }
//clicked on the button to show window/dialog:
async Task ParamEd(int xtyp, object it)
{
await Task.Delay(500);//await load captions... and THEN open window:
ShowEditWindowCaption = "window title";
ShowEditWindow = true;
}
async Task ReadComboData(DropDownListReadEventArgs e)
{
try
{
var r = await readDBDATA...
//CurrentEdit.ComboSource = new List<EdBase>();
//CurrentEdit.ComboSource = null;
//CurrentEdit.ComboSource = new IEnumerable<EdBase>(r);
//CurrentEdit.ComboSource = await ReadDBDATA
CurrentEdit.ComboSource = r;
Paging.CNT = p.Get<int>("CNT");
/*
//!! HOTFIX FROM ANOTHER BUG(show selected data) - ReAssign data(but id doesnt impact result):
string v = CurrentEdit.ValTxt;
int? i= CurrentEdit.ValInt;
CurrentEdit.ValTxt = string.Empty;
CurrentEdit.ValInt = null;
StateHasChanged();
//await InvokeAsync(() => StateHasChanged());
CurrentEdit.ValTxt = v;
CurrentEdit.ValInt = i;
//CurrentEdit.ValTxt = CurrentEdit.ValTxt;
//StateHasChanged();
*/
}
catch (Exception ex)
{
Notification.ShowSQLErr(ex.Message);
}
}
//PARTIALLY WORKING, but not filtering:
Task ReadComboData(DropDownListReadEventArgs e)
{
try
{
var r = readDBDATA...
CurrentEdit.ComboSource = r;
Paging.CNT = p.Get<int>("CNT");
}
catch (Exception ex)
{
Notification.ShowSQLErr(ex.Message);
}
}
}
The https://nuget.telerik.com/nuget/ is erroring when trying to restore the packages, it's currently breaking our main pipeline.
Retrying 'FindPackagesByIdAsyncCore' for source 'https://nuget.telerik.com/nuget/FindPackagesById()?id='runtime.native.System.Net.Http'&semVerLevel=2.0.0'. Response status code does not indicate success: 500 (Internal Server Error). GET https://nuget.telerik.com/nuget/FindPackagesById()?id='runtime.native.System.Net.Http'&semVerLevel=2.0.0 InternalServerError https://nuget.telerik.com/nuget/FindPackagesById()?id='Microsoft.Extensions.Hosting.Abstractions'&semVerLevel=2.0.0 290ms InternalServerError https://nuget.telerik.com/nuget/FindPackagesById()?id='Telerik.UI.for.Blazor'&semVerLevel=2.0.0 401ms InternalServerError https://nuget.telerik.com/nuget/FindPackagesById()?id='System.ServiceModel.Primitives'&semVerLevel=2.0.0 401ms ##[error]The nuget command failed with exit code(1) and error(Failed to retrieve information about 'Telerik.UI.for.Blazor' from remote source 'https://nuget.telerik.com/nuget/FindPackagesById()?id='Telerik.UI.for.Blazor'&semVerLevel=2.0.0'. Response status code does not indicate success: 500 (Internal Server Error).
Could you help with this?
When re-visiting a drop down each selected option is visually indicated, but not to a screen reader user. E.g.:
Figure: Selected options are highlighted but this is not indicated to a screen reader
Hi!
Im using a Grid component InCell Editing the OnDelete, OnUpdate handlers are working fine but OnCreate handler its not working. By the way im using a service to manage the CRUD operations as follows
Page Component
@page "/districts"
@using MVC.Services
@using MVC.Models
@using System.ComponentModel.DataAnnotations
@inject IDistrictService DistrictService
<h3>Districts</h3>
<TelerikGrid Data="@district" Sortable="true" EditMode="@GridEditMode.Incell"
Height="500px"
Pageable="true" PageSize=@PageSize
OnUpdate=@UpdateItem OnDelete=@DeleteItem OnCreate=@CreateItem OnCancel="@OnCancelHandler">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add District</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field="@(nameof(District.Id))" Editable="false" />
<GridColumn Field="@(nameof(District.Description))" Title="Description" />
<GridColumn Field="@(nameof(District.EnableApprovalWorkflow))" Title="Enable Approval Workflow" />
<GridCommandColumn>
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
int PageSize = 15;
IEnumerable<District> district;
protected override async Task OnInitializedAsync()
{
await GetGridData();
}
async Task GetGridData()
{
district = await DistrictService.DistrictList();
}
async Task CreateItem(GridCommandEventArgs args)
{
District item = (District)args.Item;
await DistrictService.DistrictInsert(item);
await GetGridData();
}
void OnCancelHandler(GridCommandEventArgs args)
{
District item = (District)args.Item;
}
async Task DeleteItem(GridCommandEventArgs args)
{
District item = (District)args.Item;
await DistrictService.DistrictDelete(item.Id);
await GetGridData();
}
async Task UpdateItem(GridCommandEventArgs args)
{
District item = (District)args.Item;
await DistrictService.DistrictUpdate(item);
await GetGridData();
}
}
Service Logic
using Dapper;
using Microsoft.Data.SqlClient;
using MVC.Models;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MVC.Services
{
public class DistrictService : IDistrictService
{
private readonly SqlConnectionConfiguration _configuration;
public DistrictService(SqlConnectionConfiguration configuration)
{
_configuration = configuration;
}
public async Task<bool> DistrictInsert(District district)
{
using (var conn = new SqlConnection(_configuration.Value))
{
var parameters = new DynamicParameters();
parameters.Add("Description", district.Description, DbType.String);
parameters.Add("EnableApprovalWorkflow", district.EnableApprovalWorkflow, DbType.Boolean);
await conn.ExecuteAsync("spLookupDistrict_Insert", parameters, commandType: CommandType.StoredProcedure);
}
return true;
}
public async Task<IEnumerable<District>> DistrictList()
{
IEnumerable<District> districts;
using (var conn = new SqlConnection(_configuration.Value))
{
districts = await conn.QueryAsync<District>("spLookupDistrict_List", commandType: CommandType.StoredProcedure);
}
return districts;
}
public async Task<IEnumerable<District>> DistrictSearch(string @Param)
{
var parameters = new DynamicParameters();
parameters.Add("@Param", Param, DbType.String);
IEnumerable<District> districts;
using (var conn = new SqlConnection(_configuration.Value))
{
districts = await conn.QueryAsync<District>("spLookupDistrict_Search", parameters, commandType: CommandType.StoredProcedure);
}
return districts;
}
public async Task<District> District_GetOne(int @Id)
{
District district = new District();
var parameters = new DynamicParameters();
parameters.Add("@Id", Id, DbType.Int32);
using (var conn = new SqlConnection(_configuration.Value))
{
district = await conn.QueryFirstOrDefaultAsync<District>("spLookupDistrict_GetOne", parameters, commandType: CommandType.StoredProcedure);
}
return district;
}
public async Task<bool> DistrictUpdate(District district)
{
using (var conn = new SqlConnection(_configuration.Value))
{
var parameters = new DynamicParameters();
parameters.Add("Id", district.Id, DbType.Int32);
parameters.Add("Description", district.Description, DbType.String);
parameters.Add("EnableApprovalWorkflow", district.EnableApprovalWorkflow, DbType.Boolean);
await conn.ExecuteAsync("spLookupDistrict_Update", parameters, commandType: CommandType.StoredProcedure);
}
return true;
}
public async Task<bool> DistrictDelete(int Id)
{
var parameters = new DynamicParameters();
parameters.Add("@Id", Id, DbType.Int32);
using (var conn = new SqlConnection(_configuration.Value))
{
await conn.ExecuteAsync("spLookupDistrict_Delete", parameters, commandType: CommandType.StoredProcedure);
}
return true;
}
}
}
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.
---
ADMIN EDIT
The following should let the multiselect render above the custom yellow element, but it does not. A workaround is available as the second CSS snippet that you can uncomment.
<style>
/*should work but does not*/
.high-zindex {
z-index: 124;/*note how this is higher than the z-index of the div element, and is higher than the default z-index of the component*/
}
/*workaround*/
.k-animation-container {
z-index: 15000;
}
</style>
<div style="position: absolute; z-index: 123; width: 600px; height: 200px; background: yellow;">
<TelerikMultiSelect Data="@Countries"
@bind-Value="@Values"
Placeholder="Enter Balkan country, e.g., Bulgaria"
ClearButton="true" AutoClose="false"
PopupClass="high-zindex">
</TelerikMultiSelect>
</div>
@code {
List<string> Countries { get; set; } = new List<string>();
List<string> Values { get; set; } = new List<string>();
protected override void OnInitialized()
{
Countries.Add("Albania");
Countries.Add("Bosnia & Herzegovina");
Countries.Add("Bulgaria");
Countries.Add("Croatia");
Countries.Add("Kosovo");
Countries.Add("North Macedonia");
Countries.Add("Montenegro");
Countries.Add("Serbia");
Countries.Add("Slovenia");
base.OnInitialized();
}
}---
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; }
}
}
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.
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.
---
1. Create tree model from class:
public class TreeNodeViewModel
{
public string NodeName { get; set; }
public IEnumerable<TreeNodeViewModel> Children { get; set; }
public bool Expanded { get; set; }
public string Color { get; set; }
public string IconClass { get; set; }
}2. Pass this tree for rendering to the component "TelerikTreeView".
3. An error comes out:
2020-12-03T09:44:15.312Z] Error: System.AggregateException: One or more errors occurred. (Object reference not set to an instance of an object.)
---> System.NullReferenceException: Object reference not set to an instance of an object.
at Telerik.Blazor.Data.TelerikTreeViewDataSource.GetFlatItems(IEnumerable`1 tree, List`1 result)
at Telerik.Blazor.Data.TelerikTreeViewDataSource.GetFlatItems(IEnumerable`1 tree, List`1 result)
at Telerik.Blazor.Data.TelerikTreeViewDataSource.GetFlatItems(IEnumerable`1 tree, List`1 result)
at Telerik.Blazor.Data.TelerikTreeViewDataSource.GetFlatItems(IEnumerable`1 tree, List`1 result)
at Telerik.Blazor.Data.TelerikTreeViewDataSource.FlattenTree()
at Telerik.Blazor.Data.TelerikTreeViewDataSource.InitData(IEnumerable`1 sourceData)
at Telerik.Blazor.Data.TelerikTreeViewDataSource.ProcessData(IEnumerable data)
at Telerik.Blazor.Components.TelerikTreeView.ProcessDataInternal()
at Telerik.Blazor.Components.Common.DataBoundComponent`1.ProcessDataAsync()
at Telerik.Blazor.Components.TelerikTreeView.OnAfterRenderAsync(Boolean firstRender)
--- End of inner exception stack trace ---
Note: This problem is due to the fact that there are no children in the last node of the tree and IEnumerable Children == NULL. Method "GetFlatItems" in version 2.18.0 it had a NULL check, in version 2.20.0 it is not.
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'm currently migrating a project from ASP.NET MVC to ASP.NET MVC Core.
In the server code I'm using a DataTable from the database which is converted to a DataSourceResult with ToDataSourceResult.
It worked fine in the ASP.NET MVC version, but the same code in the ASP.NET MVC Core version throws an exception when using aggregate functions.
System.InvalidOperationException: 'No generic method 'Sum' on type 'System.Linq.Enumerable' is compatible with the supplied type arguments and arguments. No type arguments should be provided if the method is non-generic. '