I am handling the SelecteditemsChanged event of the Grid and when an exception is thrown in its handler, the ErrorBoundarydoes not catch it.
For reference, I tried attaching the same handler to a click of a button and it is successfully caught by the ErrorBoundary in this case.
Further to issue reported in https://feedback.telerik.com/blazor/1545177-selected-items-are-not-preserved-when-loading-the-state-when-the-component-is-bound-to-expandoobjects wrt Expando Object, the column menu reset also does not work when grid is bound to Expando Object
Regards
Naved
When filtering or editing a Grid with enum data, the Name property of their Display parameter is respected.
However, in the initial view mode of the Grid the Name property is not applied and the enum values are rendered regardless of whether or not their Display parameter has a Name property defined.
==========
ADMIN EDIT
==========
In the meantime, a workaround you might try is to create a custom method to check whether Display attribute is defined and get and display its Name property, otherwise display the Enum's member name.
You can then use a Template for the column that uses enum data, cast its context to the model you are using and invoke the method on the field containing the enum. The sample below demonstrates how you can achieve this.
@using System.ComponentModel.DataAnnotations
@using System.Reflection
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
OnUpdate="@UpdateHandler" FilterMode="@GridFilterMode.FilterRow">
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
<GridColumn Field=@nameof(SampleData.Name) Title="Name" />
<GridColumn Field=@nameof(SampleData.Role) Title="Position">
<Template>
@{
var currentEmployee = context as SampleData;
var currentRole = GetDisplayName(currentEmployee.Role);
}
@currentRole
</Template>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
//custom method to check whether Display attribute is defined and get and display its Name property, otherwise display the Enum's member name
public string GetDisplayName(Enum val)
{
return val.GetType()
.GetMember(val.ToString())
.FirstOrDefault()
?.GetCustomAttribute<DisplayAttribute>(false)
?.Name
?? val.ToString();
}
public void UpdateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
//update the view-model
var index = MyData.FindIndex(i => i.ID == item.ID);
if (index != -1)
{
MyData[index] = item;
}
//perform actual data source operations here
}
//model and dummy data generation
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
public Role Role { get; set; }
}
public enum Role
{
[Display(Name = "Manager")]
ManagerRole,
[Display(Name = "Employee")]
EmployeeRole,
[Display(Name = "Contractor")]
ContractorRole
}
public List<SampleData> MyData { get; set; }
protected override void OnInitialized()
{
MyData = new List<SampleData>();
for (int i = 0; i < 50; i++)
{
MyData.Add(new SampleData()
{
ID = i,
Name = "name " + i,
Role = (Role)(i % 3) // just some sample to populate initial values for the enum
});
}
}
}
Hi Team,
I am looking for captcha component to verify user as human like below screenshot. Please let me know if this feature is available
I'd like to have an ExpansionPanel component where I can declare my desired panel instances and their content in the markup.
Similar to https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/
Would be nice to have an Expansion Panel like this one:
https://material-ui.com/components/expansion-panels/
I get validation issues for the selection Checkboxes and the PageSizes dropdown as they do not have id or name attributes:
The behavior can be reproduced in the online demo: Blazor Data Grid - Overview
Accessibility Insights for Web extension is flagging the k-grid-filter icon in the Grid Header labels. Need workaround and remove the aria-label and replace with aria-role per guidance. Under each of the red explanation marks is the filter icon on the column. Running the Accessibility Insights for Web tool by Microsoft using Edge browser flags this code.
Please provide temporary workaround and permanent fix.
Blazor-UI 2.30 Release.
Hi,
We use compact sized grid all the time in our application.
However, with sorting and filtering enabled, the icons take too much space in the header cell and make the actual header text hard to read.
Please consider scale down those icons and reduce padding.
Thanks and best regards,
Peili
Demo: https://blazorrepl.telerik.com/mSOIQZvO51cwrorJ49
===ADMIN EDIT===
To reduce the size of the icons and the font in a Compact Grid, you can follow the approach from the knowledge base article How to make Compact Grid elements smaller.
The sort order for some strings should be in natural sort order.
1.10 -> 1.13 should be following 1.9 in this example.
Hi Telerik Team,
when using the (currently) latest versions of VS (17.11.0) and Blazor 8.0.8 runtimes (and custom css theme version 8.2.0) I get the following error when running my project in debug mode:
TypeError: Cannot read properties of null (reading 'classList')
StapelĂŒberwachung:
> at e.addClass (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1122923)
> at v.resetCallout (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1372516)
> at v.adjustCalloutPosition (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1372355)
> at e.invokeComponentMethod (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1112736)
> at https://localhost:7038/_framework/blazor.webassembly.js:1:2878
> at new Promise (<anonymous>)
> at b.beginInvokeJSFromDotNet (https://localhost:7038/_framework/blazor.webassembly.js:1:2835)
> at Object.vn [as invokeJSJson] (https://localhost:7038/_framework/blazor.webassembly.js:1:58849)
> at https://localhost:7038/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:178428
> at Ll (https://localhost:7038/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:179262)
It looks like the problem has something to do with a function that wants to set the css "k-callout-e" class to some object.
The problem appears in js when e is null in the following method:
e.classList.add(t)
In this case e = null and t = "k-callout-e". It seems there's no null check for e and VS 2022 reports the problem.
The debugger in VS cannot be disabled for js content as it seems it's the same debugger for Blazor itself.
When hitting F5 to continue multiple times the projects keeps running until it hits the same problem again.
In my project I added a single "TelerikTooltip" component for Tooltips. I tried disabling it but still the same problem.
Maybe the js code is used for some other component.
If you need more information just let me know.
Regards,
Tom
Using Microsoft Visual Studio Professional 2022 (64-bit) - Current Version 17.11.0
Trying to create a new Telerik for Blazor project using Telerik C# Blazor Application Template.
Visual Studio freezes after I Name the project and click create. Only way to exit out of Visual Studio is to kill it through task manager.
Trying your project walk through for Blazor, RpsTrackingBlazor, After I add the nuget packages and try to add the using statement to _imports.razor as in the tutorial I get the error that the type or namespace name telerik could not be found.
Your project uses <TargetFramework>netcoreapp3.1</TargetFramework>
I also tried framework net8.0
Please expose the current data of the data bound select components when using OnRead. This will spare the need to cache data for the second time in-memory, or make a database request, or search by non-ID value when the app needs to obtain the full data item(s) for given component value(s).
This feature request is applicable to:
I know smart components are still in preview but please make this available as soon as you can in the editor component. This would be a HUGE deal!
Github link