The demos and examples for storing and retrieving GRID state uses the JavaScript localStorage.setItem and localStorage.getItem that work great. As part of .NET 5 there's a Microsoft equivalent for accessing Local Storage using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage. I've found the behavior of these demos and examples will not work by simply replacing the JavaScript with .NET equivalents. My experience is getting Circuit Handler exceptions that make these example not work.
Although not a requirement since there's a JavaScript solution for local storage, I would like to recommend that since you partner closely with .NET team at Microsoft. That your GRID development team test and provide examples with the Microsoft .NET 5 out-of-the-box local storage solution and resolve any incompatibilities for developers not wanting to use 1st party local storage solutions embedded within Microsoft Blazor.
----
ADMIN EDIT
I made a sample test and things seemed to work for me, so I made a public example, you can find it in this pull request until it gets merged. I'm also attaching it to this post, but for anyone seeing this after a time - the public repository linked above is a better place to look for this in case more updates and information have been added since the time of writing this.
---
globally for Telerik Blazor controls/inputs components we would prefer the ability to assign aria attributes. This will enable my organisation's user experience to improve for people relying on screen readers.
aria-labelledby will enable us to stack labels for inputs in a group.
aria-describedby will enable us to provide additional information in context to an input, without the need for users to jump out of the input and find it.
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
Like the one in Kendo https://demos.telerik.com/kendo-ui/breadcrumb/index
With the ability to hook to the URL and URL change like this https://docs.telerik.com/kendo-ui/controls/navigation/breadcrumb/navigation
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.
Please add a "native" Carousel component for the Telerik UI for Blazor solution.
Currently, to implement a Carousel option in a Blazor application using Telerik components, you may need to leverage the Kendo UI widgets based on jQuery that rely on direct DOM manipulation. In a Blazor application, the software engineer should rely on Blazor to manipulate the DOM, instead of direct DOM manipulation required with tools such as jQuery.
Overlapping Telerik products in the same web application, such as Kendo UI and UI for Blazor, can create issues if releases are out of alignment between the solutions, use of CSS files, and other areas of complication.
Please consider adding a Carousel component as it offers a great experience for marketing to customers, business or consumer, on the home page of any website.
A Gantt Chart is one big thing missing that is always high on my blazor UI wish list.
Kind regards,
Kay
---
ADMIN EDIT
For the time being, a workaround could be to wrap a JS widget, an example is available in this sample project, see the MyKendoGantt.razor component.
---
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;
}
}
}
Hi,
we are having a hard time to come up with a general application layout (menu/navigation).
We found PanelBar, Menu and Drawer... are there any other controls related to menu & navigation?
A more UX oriented documentation (and not only for the technical components individually) would be nice e.g. like they do it here: Overview | Clarity Design System
Kind regards
Steffen
A stack panel component that creates a layout of items that are vertically positioned.
It could also have a wrap layout to make the items horizontal with wrapping
or horizontal without wrapping
Hi
I would like a "Steper" as the one you have in your MVC product.
Like the grouping in the Kendo combo box https://demos.telerik.com/kendo-ui/combobox/grouping
<AdminEdit>
This Feature Request would be an umbrella for implementing items grouping for select components (ComboBox, DropDownList, MultiSelect, and others).
</AdminEdit>
It would be nice to switch the color schemes used by the telerik Blazor components on-the-fly in an application (i.e. switch from light mode to dark mode). I realize you have a JS approach to this problem, however that requires maintaining multiple stylesheets and custom javascript, which we are trying to avoid in a Blazor project. I like the approach used by MudBlazor where basically all css colors are variables that can be easily switched at runtime without any javascript:
https://mudblazor.com/wasm/customization/theming/overview
I would like components like the TextBox, NumericTextBox, TextArea, Button to have a method in their reference similar to the FocusAsync() which Microsoft included to the ElementReference in .NET5.
---
ADMIN EDIT
For the time being, you can use JS interop and prepare a suitable selector. Here is a basic example for the button:
@inject IJSRuntime _js
Notes:<br />
- Move this script to a proper place, it is hacked into the component to make this snippet short
- Make sure the ID is unique if you use IDs. THere are other selectors you can use (such as classes, or you can even cascade your selectors to make them more specific)
<br /><br />
<script suppress-error="BL9992">
function focusElement(selector) {
var elem = document.querySelector(selector);
if (elem && elem.focus) {
setTimeout(function () {
elem.focus();
}, 30);
}
}
</script>
<TelerikButton OnClick="@FocusBtn">Focus the other button</TelerikButton>
<br /><br />
<TelerikButton Id="@btnId" OnClick="@SpecialBtnAction">I will be focused programmatically</TelerikButton>
@code{
string btnId = "my-special-btn";
async Task FocusBtn()
{
await _js.InvokeVoidAsync("focusElement", $"#{btnId}");
}
async Task SpecialBtnAction()
{
Console.WriteLine("special button clicked");
}
}
---
There doesn't seem to be a way to deselect the selected row either by clicking on a selected row again or by two-way-binding and setting it to an empty list.
This would be pretty handy as currently the only way that makes sense for me is to make no use of selection mode at all.