The following knowledge base article describes how to select the default value in a drop down, but if there's no default value the selection is not cleared using this method.
When setting the bind value to null (or the default, or frankly anything that doesn't exist in the drop down) I'd like the drop down list selection to be cleared when there's no default value set on the DropDownList.
@page "/"
<br />
<TelerikButton OnClick="@ClearSelection">Clear selection</TelerikButton>
<TelerikDropDownList Data="@data" @bind-Value="selectedValue" />
@code {
List<string> data = new() { "selection" };
string selectedValue;
void ClearSelection()
{
// This does not cause the drop down to clear the selection and I think it should.
selectedValue = null;
}
}
See more details in the following KB article: https://docs.telerik.com/blazor-ui/knowledge-base/textbox-validate-on-change and if the behavior and solution there do not fit your needs, leave your comments and ideas on how you want this exposed for configuration and what the desired behavior is. Also, make sure to Vote for this enhancement so we can gauge the public interest in it.
Occasionally I am getting TaskCancellation errors such as:
[13:07:52 ERR] Unhandled exception in circuit 'hQsJqY3F4XbTbzQETSggJClg_e4YRyQkrKHFMHCXugM'.
System.Threading.Tasks.TaskCanceledException: A task was canceled.
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Telerik.Blazor.Components.TelerikComboBox`2.Dispose()
at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__140_0(Object state)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location ---
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)
===========
ADMIN EDIT
===========
The error is related to a Microsoft bug. It occurs one minute after some client component has been disposed.
The exceptions are not bypassed due to memory leak. The bug is expected to be fixed in .NET 6 and this will be respected for the Telerik components, so that the errors do not appear.
We have encountered the following accessibility issue with the navigation buttons of the Pager:
Snippet:
<a data-index="0" aria-label="Go to the first page" title="Go to the first page" class="k-link k-pager-nav k-state-disabled k-pager-first" aria-disabled="true" tabindex="-1"><span class="k-icon k-i-arrow-end-left" role="presentation"></span></a>How to fix - Fix the following:
ARIA attribute cannot be used, add a role attribute or use a different element: aria-label
Reloading the page described down below cause memory leak. Commenting lines with telerik button prevents the problem.
@page "/"
<h3 style="position:absolute; top: 0; z-index: 1000; margin-top: 10px">Home</h3>
↓ commenting these lines prevents the memory leak
<div>
<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>
<div>@helloString</div>
</div>
↑ commenting these lines prevents the memory leak
@code {
List<string> strings = new List<string>();
MarkupString helloString;
protected override void OnInitialized()
{
// Attempt to clear memory with Garbage Collector
GC.Collect();
GC.WaitForPendingFinalizers();
for (int i = 0; i < 1000000; i++)
{
string a = "asdasdasdasdddddddddasasdasdasdasdddddddddasasdasdasdasdddddddddasasdasdasdasdddddddddasasda";
strings.Add(a + "b");
}
base.OnInitialized();
}
void SayHelloHandler()
{
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use <b><u><i>C#</i></u></b> to write front-end!", DateTime.Now);
helloString = new MarkupString(msg);
}
}
MainLayout.razor:
@layout TelerikLayout
@inherits LayoutComponentBase
<style>
.navmenu .k-drawer-items {
margin-top: 3.5rem;
}
.navmenu .k-widget.k-drawer {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 100%);
}
.k-drawer-container {
height: 100vh;
}
.btn-margin, .btn-margin:hover {
width: 48px;
height: 56px;
color: #FFF;
}
.navmenu .k-drawer {
color: #ffffffd6;
}
.navmenu .k-drawer-item:hover, .navmenu .k-drawer-item.k-state-hover {
color: #ffffffd6;
background-color: #f0f0f012;
}
.navmenu .k-drawer-item:hover.k-state-selected {
color: #ffffff;
background-color: #7bafff94;
}
.navmenu .k-drawer-item:not(:hover).k-state-selected {
color: #ffffff;
background-color: #7bafffbd;
}
.navmenu .k-drawer:hover .k-drawer-wrapper {
width: 240px;
}
.navmenu .k-drawer .k-drawer-wrapper {
transition-duration: 300ms !important;
}
</style>
<TelerikDrawer Data="@NavigablePages" MiniMode="true" Mode="@DrawerMode.Push" SelectedItem="SelectedItem" Class="navmenu sidebar"
SelectedItemChanged="ChangeSelectedItem" TItem="DrawerItem">
<Content>
<div class="page">
<div class="main">
<div class="top-row px-4 auth">
</div>
<div class="content px-4">
@Body
</div>
</div>
</div>
</Content>
</TelerikDrawer>
@code {
List<DrawerItem> NavigablePages { get; set; } =
new List<DrawerItem>
{
new DrawerItem { Text = "Home", Url = "/", Icon = "home" }
};
public class DrawerItem
{
public string Text { get; set; }
public string Url { get; set; }
public string Icon { get; set; }
public bool IsSeparator { get; set; }
}
DrawerItem SelectedItem { get; set; }
private void ChangeSelectedItem(DrawerItem chosenItem)
{
SelectedItem = chosenItem;
}
}This code is example. The main problem was with TelerikGrid. Usage of any telerik component caused the same memory leak.
With the default templates for a blazor project there are options for security.
We really need this for the telerik blazor templates or a sample telerik blazor projects using the different types of security.
Grid virtual scrolling will freeze in the following scenario:
- Open https://demos.telerik.com/blazor-ui/grid/virtual-scrolling
- Scroll to the lower part of the Grid
- Filter any column, so that the number of items becomes less than the current scroll position
- The Grid will show "no records to display" and row placeholders, even if there are items to display
Hello,
Some keyboard shortcuts do not work inside PanelBar ContentTemplate. For example, when any text input control (TelerikTextBox, TelerikComboBox, etc.) exists inside the ContentTemplate of a TelerikPanelBar, the input will no longer accept space characters and certain other keyboard input such as arrow keys.
This is very easy to reproduce. Here is a simple example:
<div>
<TelerikPanelBar Data="@Items">
<PanelBarBindings>
<PanelBarBinding>
<ContentTemplate>
@{
var item = context as PanelBarItem;
<div>
<TelerikTextBox @bind-Value="item.Text"></TelerikTextBox>
</div>
}
</ContentTemplate>
</PanelBarBinding>
</PanelBarBindings>
</TelerikPanelBar>
</div>
@code {
public List<PanelBarItem> Items { get; set; }
public class PanelBarItem
{
public string Text { get; set; }
public List<PanelBarItem> Items { get; set; }
}
protected override void OnInitialized()
{
Items = new List<PanelBarItem>()
{
new PanelBarItem() { Text = "Item 1" },
new PanelBarItem() { Text = "Item 2" }
};
base.OnInitialized();
}
}
Stack trace:
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Unknown edit type: 0
Error: Unknown edit type: 0
at e.applyEdits (https://localhost:44363/_framework/blazor.webassembly.js:1:15008)
at e.updateComponent (https://localhost:44363/_framework/blazor.webassembly.js:1:12880)
at Object.t.renderBatch (https://localhost:44363/_framework/blazor.webassembly.js:1:1704)
at Object.window.Blazor._internal.renderBatch (https://localhost:44363/_framework/blazor.webassembly.js:1:34784)
at _mono_wasm_invoke_js_unmarshalled (https://localhost:44363/_framework/wasm/dotnet.3.2.0.js:1:172099)
at wasm_invoke_iiiiii (<anonymous>:wasm-function[3160]:0x9b33d)
at icall_trampoline_dispatch (<anonymous>:wasm-function[5777]:0xfe711)
at mono_wasm_interp_to_native_trampoline (<anonymous>:wasm-function[4607]:0xca81d)
at ves_pinvoke_method (<anonymous>:wasm-function[3209]:0x9cd40)
at interp_exec_method (<anonymous>:wasm-function[1120]:0x2598d)
Microsoft.JSInterop.JSException: Unknown edit type: 0
Error: Unknown edit type: 0
at e.applyEdits (https://localhost:44363/_framework/blazor.webassembly.js:1:15008)
at e.updateComponent (https://localhost:44363/_framework/blazor.webassembly.js:1:12880)
at Object.t.renderBatch (https://localhost:44363/_framework/blazor.webassembly.js:1:1704)
at Object.window.Blazor._internal.renderBatch (https://localhost:44363/_framework/blazor.webassembly.js:1:34784)
at _mono_wasm_invoke_js_unmarshalled (https://localhost:44363/_framework/wasm/dotnet.3.2.0.js:1:172099)
at wasm_invoke_iiiiii (<anonymous>:wasm-function[3160]:0x9b33d)
at icall_trampoline_dispatch (<anonymous>:wasm-function[5777]:0xfe711)
at mono_wasm_interp_to_native_trampoline (<anonymous>:wasm-function[4607]:0xca81d)
at ves_pinvoke_method (<anonymous>:wasm-function[3209]:0x9cd40)
at interp_exec_method (<anonymous>:wasm-function[1120]:0x2598d)
at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TResult] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x3ae01e8 + 0x00046> in <filename unknown>:0
at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TResult] (System.String identifier, T0 arg0, T1 arg1) <0x3ae0108 + 0x00014> in <filename unknown>:0
at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.RenderTree.RenderBatch& batch) <0x3ae0010 + 0x0001e> in <filename unknown>:0
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x387e448 + 0x000f2> in <filename unknown>:0
The TimePicker OnChange event fires to confirm a complete user action. From this point of view, the Set button in the component's dropdown should fire the event as well.
https://docs.telerik.com/blazor-ui/components/timepicker/eventsThe OnChange event represents a user action - confirmation of the current value. It fires when the user presses Enter in the input, or when the input loses focus.
The ValueChanged event fires upon every change (for example, keystroke) in the input, and upon clicking the Set or Now buttons in the dropdown.
Using a target selector for HTML elements with a specific attribute within an SVG does not work
The following snippet worked correctly in 2.26.0 and older versions but does not work in 2.27.0
<TelerikArcGauge>
<ArcGaugeCenterLabel>
<Template>
@(context.Pointers[0].Value)
</Template>
</ArcGaugeCenterLabel>
<ArcGaugeScales>
<ArcGaugeScale Min="0" Max="100">
</ArcGaugeScale>
</ArcGaugeScales>
<ArcGaugePointers>
<ArcGaugePointer Color="#FFE162" Value="@FirstPointerValue"></ArcGaugePointer>
</ArcGaugePointers>
</TelerikArcGauge>
<TelerikTooltip TargetSelector="path[stroke='#FFE162']" Position="TooltipPosition.Top" ShowOn="@TooltipShowEvent.Hover" Id="first-pointer">
<Template>
<p>Value is: @FirstPointerValue</p>
</Template>
</TelerikTooltip>
@code {
public int FirstPointerValue { get; set; } = 20;
}Best Regards,
Radko
When you shrink a Grid column, ellipsis is rendered to represent the clipped text. However, at some point of resizing the Column menu and Filter menu indicators are overlapping the Grid column header text.
==========
ADMIN EDIT
==========
In the meantime, a possible workaround would be to use some custom CSS to add right padding to the k-link span, so it does not get overlapped by the column menu icon. That padding should be approximately as wide as the span holding the column menu icon. You can also set a custom CSS class to the Grid through its Class parameter to make sure you are styling this exact instance of the Grid and not all instances on the page/app. The example below demonstrates how to achieve the described approach.
<style>
.my-grid .k-link {
padding-right: 40px;
}
</style>
<TelerikGrid Data="@MyData"
Class="my-grid"
Pageable="true"
PageSize="5"
FilterMode="@GridFilterMode.FilterMenu"
Sortable="true"
Resizable="true"
ShowColumnMenu="true">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Id))" Width="80px" />
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name"/>
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
</GridColumns>
</TelerikGrid>
@code {
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
Name = "name " + x,
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
});
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}
Hello
Could an additional event be exposed on the Slider control? (like OnDrag?)
Have noted that "ValueChanged" is fired every time the value parameter changes (after the user stops dragging the handle), but is it possible to expose the event & value of slider during drag?
This will allow the slider to be used like a search, for example; slide quickly through a large series of photos or data (without letting the mouse button go).
Or is there another way we could achieve this with this control?
Regards
Phil
How to remove placeholder from DatePicker?
If I set DateFormat to "d" then DatePicker will have "d" as a placeholder which confuses my users. How can I set custom placeholder or remove the placeholder from the DatePicker control?
Best regards,
Robert