Hello,
in some cases there is no way to scroll grid using mousewheel. Try this REPL please - https://blazorrepl.telerik.com/GdkXuLuX10P8sOF040. Scroll down, focus any cell in the last row and try to scroll up using your mouse wheel again. Grid always scrolls back to the last row.
Can you check that please?
Very thanks.
Miroslav
Using DropDownList with Filter enabled will lost track of Focus when an item from dropdown is selected or tabbing away from filter input.
Steps to reproduce:
Expected Behavior:
Focus in the next focusable element
Actual Behavior:
Focus is lost, and will go to the browser buttons
It is possible to reproduce in the demos:
https://demos.telerik.com/blazor-ui/dropdownlist/filtering
Using the following configuration does not produce the expected result:
<GridSettings>
<GridPopupEditFormSettings ButtonsLayout="FormButtonsLayout.Center"/>
</GridSettings>
The button layout is always left no matter what you choose.
===
ADMIN EDIT
===
Possible workarounds for the time being are to position the buttons with CSS or use a Popup Buttons Template.
Currently, if the ReadOnly parameter value is set to 'true,' the user can modify the value of the DateInput by using the arrow keys.
Reproduction: https://blazorrepl.telerik.com/mxaiabvd178zy7p948
The TelerikEditor demos all show bind-Value being used to marshal HTML in and out of the editor:
<TelerikEditor @bind-Value="@TheEditorValue" Width="650px" Height="400px"></TelerikEditor>
However, this causes problems - the underlying ProseMirror component emits it's own HTML (e.g. for image drag handles), which is visible in the bound Value property.
We need to be able to export "clean" HTML from the viewer, otherwise we end up saving this superflous HTML as part of our document.
This REPL shows the issue:
https://blazorrepl.telerik.com/mHODmObJ36vZ7ivR09
@page "/editor/tools"
@using Telerik.Blazor.Components.Editor
<TelerikEditor Tools="@EditorToolSets.All"
Height="300px"
@bind-Value="@Value"
EditMode="EditorEditMode.Div"
></TelerikEditor>
<pre style="white-space: pre-wrap;">@Value</pre>
@code {
public string Value { get; set; } =
"<img src=\"img/toolbar-assets/repl-logo.svg\" />";
}
1. Open the REPL and click "Run" - observe that the bound HTML is simply
<img src="img/toolbar-assets/repl-logo.svg" />
2. Click on the Telerik logo image inside the editor - observe that the bound HTML is now
<p><img src="img/toolbar-assets/repl-logo.svg" contenteditable="false" draggable="true" class="ProseMirror-selectednode"><div class="k-editor-resize-handles-wrapper ProseMirror-widget" style="width: 857px; height: 78px; top: 8px; left: 8px;" contenteditable="false"><div class="k-editor-resize-handle southeast" data-dir-image-resize="southeast"></div><div class="k-editor-resize-handle east" data-dir-image-resize="east"></div><div class="k-editor-resize-handle south" data-dir-image-resize="south"></div><div class="k-editor-resize-handle north" data-dir-image-resize="north"></div><div class="k-editor-resize-handle west" data-dir-image-resize="west"></div><div class="k-editor-resize-handle southwest" data-dir-image-resize="southwest"></div><div class="k-editor-resize-handle northwest" data-dir-image-resize="northwest"></div><div class="k-editor-resize-handle northeast" data-dir-image-resize="northeast"></div></div><br class="ProseMirror-trailingBreak"></p>
3. Deselect the image - observe that the bound HTML no longer contains the image handles etc, but is still more verbose than when we started
<p><img src="img/toolbar-assets/repl-logo.svg" contenteditable="false" draggable="true" class=""><br class="ProseMirror-trailingBreak"></p>
4. At any point during the above steps, click the "View HTML" button in the Editor toolbar - observe that it is able to present a "clean" structure which contains no ProseMirror markup etc.
How do we access this HTML via the TelerikEditor Blazor APIs?
The Splitter separator has role="separator" attribute. When such a role is set and the separator is focusable, it is required that aria-valuenow attribute is also set. Currently, the Splitter separator does not have such an attribute.
From our point of view, the expected result is - NVDA / Narrator should announce separator value with respect to the position value for the separator (or no separator value at all).
An example of this would be:
var orderParams = new DialogParameters();
orderParams.Add("SelectedOrderHeader", Item);
orderParams.Add("EditMode", "Add");
orderParams.Add("SelectedOrderDetail", new OMSOrderDetail());
DialogService.Show<OrdersDetailForm>("Click on orders grid to continue", orderParams);
<OrderDetailsForm> is a custom Blazor component.
Does the Telerik Blazor dev team have any plans for implementing something like this?
This issue has to do with keyboard support, where if the step index is changed programmatically, and then the user tabs back onto the wizard stepper, then the focus class is on the wrong step. The active step is correct in the stepper, but the focus outline is on the step prior to the programmatic index change. I have created a repl here:
https://blazorrepl.telerik.com/wcbmlAlj23ZwNsxf21
If you click the Move to 3rd Step button it will switch the wizard to the 3rd step correctly.
Tab to the stepper, and step 1 will have the outline focus class, the focus will actually be on the correct step (step 3).
Pressing the right arrow key will move to Active Step 4, but the outline focus class will be moved to step 2.
Pressing the left arrow key will then fix the outline class.
I would expect that when changing the step index programmatically, that the outline focus class on the stepper would be displayed for the step that the index was changed to. It becomes confusing for keyboard users.
While the menu is usable the way it is, it could be better. If you take a look at the example menu in the best practices link that I provided in the original post, you will see what I mean. Some of the differences include the following:
Best practices example: https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html
When AutoClose is set to false and you select more than one item, then only the first one will be highlighted in the popup. Items are selected and present in the input but are visually highlighted.
Reproduction
1. Run this REPL sampleWhen a position is specified the tooltip is rendered initially aside from the target element before displaying at the correct position
Reproduction: https://blazorrepl.telerik.com/wnaUkrFc04umFPWr03I want to display 2 or 3 panes in a splitter but after hiding the middle pane and showing it again its position is not saved, it appears at the end of the splitter as per the example below.
What is the best way to keep pane order ?
<div style="width: 500px; height: 300px; border: 1px solid red;">
<TelerikSplitter @ref="ts" Width="100%" Height="100%" Orientation="@SplitterOrientation.Horizontal">
<SplitterPanes>
<SplitterPane Size="20%" Collapsible="true">
<div>left</div>
</SplitterPane>
@if (bunique)
{
<SplitterPane Size="10%" Collapsible="true">
<div>middle</div>
</SplitterPane>
}
<SplitterPane>
<div>right</div>
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
</div>
@code{
bool bunique = false;
Telerik.Blazor.Components.TelerikSplitter ts;
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
if (!bunique)
{
bunique = true;
StateHasChanged();
}
}
}
}
When I updated to the latest version I noticed that the FormItems in AuthorizedViews were moved to the bottom of the form, Quick example:
<TelerikForm>
<FormItems>
<AuthorizeView>
<Authorized>
<FormItem Field="First"/>
</Authorized>
</AuthorizeView>
<FormItem Field="Second"/>
</FormItems>
</TelerikForm>
will end up like
<TelerikForm>
<FormItems>
<FormItem Field="Second"/>
<FormItem Field="First"/>
</FormItems>
</TelerikForm>
Accessibility issue
impacts screen reader user
[WCAG 1.3.1 level A] [WCAG 4.1.3 level AA]
tested using NVDA on chrome browser
on selecting upload button (w/ files already chosen) user is not advised the overall status of the files or individual files.
A visual user is informed;
This has not been 100% tested, as the upload was not targeted to an end point.
Suggestion: use aria-live
Also note, on selecting the upload button the focus is returned to input, and input says no files.
Hello,
I have an issue with TelerikDatePicker globalization. It works fine at all, but "Today" has the same translation.
I've used code like this:
CultureInfo.DefaultThreadCurrentCulture = new CultureInfo(MyStringLanguage);
And it still works only for "days" and "months". Could you please tell about current situation about localization and globalization or maybe to suggest some different solution.
Thanks for your help.
I would like to add a feature similar to the Tag Mode in the Kendo suite
===========
ADMIN EDIT
===========
In the meantime, there are two possible workarounds:
1. Mimic the desired 'single' TagMode behavior and display the number of selected items inside the MultiSelect, instead of the selected items themselves.
This approach uses custom CSS, which hides the list of selected items and displays a dynamically updated count value. The most important bits are highlighted:
UI for Blazor 2.30
<TelerikMultiSelect Data="@Products" Class="single-tag-mode"
@bind-Value="@SelectedProductIDs"
ValueField="@nameof(Product.ProductID)"
TextField="@nameof(Product.ProductName)"
Placeholder="Select Products">
</TelerikMultiSelect>
<style>
.single-tag-mode ul.k-reset {
float: left;
}
.single-tag-mode ul.k-reset li.k-button {
display: none;
}
.single-tag-mode ul.k-reset:before {
content: "Selected items: @SelectedProductIDs.Count";
display: inline-block;
line-height: 1.8em;
padding: 0 7px;
vertical-align: bottom;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #f5f5f5 linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
}
</style>
@code {
List<Product> Products = new();
List<int> SelectedProductIDs = new();
protected override async Task OnInitializedAsync()
{
for (int i = 1; i <= 10; i++)
{
Products.Add(new Product()
{
ProductID = i,
ProductName = "ProductName " + i
});
}
await base.OnInitializedAsync();
}
public class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
}
}
UI for Blazor 3.0
<TelerikMultiSelect Data="@Products" Class="single-tag-mode"
@bind-Value="@SelectedProductIDs"
ValueField="@nameof(Product.ProductID)"
TextField="@nameof(Product.ProductName)"
Placeholder="Select Products">
</TelerikMultiSelect>
<style>
.single-tag-mode .k-input-values {
float: left;
}
.single-tag-mode .k-input-values .k-chip {
display: none;
}
.single-tag-mode .k-input-values:before {
content: "Selected items: @SelectedProductIDs.Count";
display: inline-block;
line-height: 1.8em;
padding: 0 7px;
vertical-align: bottom;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #f5f5f5 linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
}
</style>
@code {
List<Product> Products = new();
List<int> SelectedProductIDs = new();
protected override async Task OnInitializedAsync()
{
for (int i = 1; i <= 10; i++)
{
Products.Add(new Product()
{
ProductID = i,
ProductName = "ProductName " + i
});
}
await base.OnInitializedAsync();
}
public class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
}
}
2. Restrict the component's size and allow scrolling to see all selected items.
Use some custom CSS to set desired height of the container holding the selected items (.k-chip-list) and to control its overflow. You can use the Class parameter of the Multiselect to set your custom CSS class to the main wrapping container of the component and style a specific instance of the component, not all instances on the page/app.
In terms of controlling the container's height, you can:
<style>
.my-multiselect{
overflow: auto;
max-height: 60px;
}
</style>
<TelerikMultiSelect Class="my-multiselect"
Data="@Countries"
@bind-Value="@Values"
Placeholder="Enter Balkan country, e.g., Bulgaria"
Width="350px" ClearButton="true" AutoClose="false">
</TelerikMultiSelect>
@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();
}
}