I would like the following behavior in the date picker. Perhaps it can be achieved with a parameter similar to the one in UI for ASP.NET AJAX - the FocusedDate property (something like RadDatePicker1.FocusedDate = DateTime.Today.AddDays(30);).
The current behaviour is:
* if date is set, show month of set date
*else show month of current date (today)
Desired behaviour:
* if date is set, show month of set date
* else if min date's month is greater than current date month then show month of min date
* else show month of current date
Here is a code snippet to illustrate the issue:
Open the picker - it will start in the month with today's date, but I want it to start at the min date - one month later
<TelerikDatePicker @bind-Value="@theDate" Min="@minDate" Max="@maxDate"></TelerikDatePicker>
@code {
DateTime theDate = DateTime.Now;
DateTime minDate = DateTime.Now.AddDays(60);
DateTime maxDate = DateTime.Now.AddDays(230);
}===
With Blazor server, clicking the NOW button (obviously) sets the time to the time on the server since that's where the code is running. Is there a way to trap the NOW button click or somehow give it an offset or define the value that NOW means so NOW will mean the time that the user is sitting in?
---
TELERIK EDIT
In the meantime, here are a few possible workarounds:
1. Use the DateTimePicker's ValueChanged event to detect new values that are very close or match the server's current DateTime. In such cases, you can assume that the user has clicked on TODAY / NOW, and set the local user time as a component value.
Server Time on UI Refresh: @DateTime.Now.ToLongTimeString()
<br />
User Local Time on Page Load: @LocalTime?.ToLongTimeString()
<br />
User Local Time Offset: @LocalOffset
<br />
<br />
<TelerikDateTimePicker Value="@PickerValue"
ValueChanged="@( (DateTime? newValue) => PickerValueChanged(newValue) )"
ValueExpression="@( () => LocalTime )"
Format="yyyy-MMM-dd HH:mm:ss"
Width="240px" />
<!-- Move JS code to a separate JS file in production -->
<script suppress-error="BL9992">
function getLocalTime() {
var d = new Date();
return d.getTimezoneOffset();
}
</script>
@code {
private DateTime? PickerValue { get; set; }
private DateTime? LocalTime { get; set; }
private int LocalOffset { get; set; }
private void PickerValueChanged(DateTime? newValue)
{
DateTime serverNow = DateTime.Now;
DateTime utcNow = DateTime.UtcNow;
TimeSpan nowTolerance = new TimeSpan(0, 0, 10);
if (newValue - serverNow < nowTolerance)
{
PickerValue = utcNow.AddMinutes(-LocalOffset);
}
else
{
PickerValue = newValue;
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
LocalOffset = await js.InvokeAsync<int>("getLocalTime");
LocalTime = DateTime.UtcNow.AddMinutes(-LocalOffset);
StateHasChanged();
}
await base.OnAfterRenderAsync(firstRender);
}
}
2. Use the DatePicker's HeaderTemplate with a custom TODAY / NOW button.
3. Hide the NOW button with CSS:
<style>
.no-now-button .k-time-now {
display: none;
}
</style>
<TelerikDateTimePicker @bind-Value="@PickerValue"
Format="yyyy-MMM-dd HH:mm:ss"
PopupClass="no-now-button"
Width="240px" />
@code {
private DateTime? PickerValue { get; set; }
}
Please implement
with inheritance from a well-defined C# interface because the current Blazor implementation for DataSourceRequest and DataSourceResult do not do so. However, if they inherit from interfaces, then that makes more clear and explicit what contract must be used to maintain interoperability with the Telerik controls for Blazor while also enabling alternate customized concrete implementations that developers (such as myself) can extend while also adhering to the required Telerik contract specified in the interface.
Furthermore, with specification by interface, then our customized variants can also be instantiated by dependency injection wherever we want in our code libraries. Keep in mind that C# interfaces support multiple inheritance while C# classes do not. So please provide interfaces for the most critical and important classes, especially DataSourceRequest and DataSourceResult in your Telerik.DataSource library.
Try with culture es-ES and you will see the problem.
When es-ES, "dot [.]" is not a decimal separator, therefore you can't use the "NumpadDecimal" key to write a decimal number.
@using System.Globalization
<b>Culture:</b> @CultureInfo.CurrentCulture.Name;
<br />
<b>Culture UI:</b> @CultureInfo.CurrentUICulture.Name
<br />
<b>DefaultThreadCurrentCulture:</b> @CultureInfo.DefaultThreadCurrentCulture?.Name
<br />
<b>DefaultThreadCurrentUICulture:</b> @CultureInfo.DefaultThreadCurrentUICulture?.Name
<br /><br />
<b>Val 1:</b>
<TelerikNumericTextBox @bind-Value="@Val1" Decimals="6" Width="100px" />
<TelerikNumericTextBox @bind-Value="@Val1" Decimals="6" Width="100px" />
<input type="number" @bind-value="@Val1" step="any" style="width: 100px" />
<br />
<b>Val 2:</b>
<input type="number" @bind-value="@Val2" step="any" style="width: 100px" />
<input type="number" @bind-value="@Val2" step="any" style="width: 100px" />
@code {
decimal Val1 { get; set; }
decimal Val2 { get; set; }
protected override void OnInitialized()
{
CultureInfo.CurrentCulture = CultureInfo.CurrentUICulture = CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("es-ES");
//CultureInfo.CurrentCulture = CultureInfo.CurrentUICulture = CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("en-US");
}
}
[ADMIN EDIT]
In general, our components obey the culture that is set in the application. If the current culture requires a "," decimal separator, our component will accept commas and ignore dots. Our component doesn't know if the user is pressing the decimal separator key on the numeric pad, or the "standard" [ > . ] key.
What we can do to improve the behavior is to implement a feature for automatic handling of the decimal separator character. In other words, if the component detects invalid decimal separator input, it will switch to the correct one. This feature will handle the Numpad key and output it in the right culture.
Here is a possible workaround that uses JavaScript to intercept the "other" decimal separator and insert the "correct" one in the NumericTextBox.
@inject IJSRuntime js
<span @onkeydown="@( (KeyboardEventArgs args) => OnSpanKeyDown(args, "ntb1") )">
<TelerikNumericTextBox @bind-Value="@DValue"
Width="200px"
Id="ntb1" />
</span>
Code: @LogCode , Key: @LogKey
<!-- Move JS to external JS file in production apps -->
<script suppress-error="BL9992">
function addDot(ntbId) {
var textbox = document.querySelector("#" + ntbId);
if (textbox && textbox.value.indexOf(".") == -1) { // or ","
textbox.value += "."; // or ","
}
}
</script>
@code {
decimal DValue { get; set; }
string LogCode { get; set; }
string LogKey { get; set; }
async Task OnSpanKeyDown(KeyboardEventArgs args, string ntbId)
{
LogCode = args.Code;
LogKey = args.Key;
if (args.Key == ",") // or "."
{
await js.InvokeVoidAsync("addDot", ntbId);
}
}
}Another option in the meantime is to use a standard HTML input or InputNumber with the Telerik CSS class "k-textbox". This way the input will look the same as a Telerik textbox and keep the app look consistent.
I'm trying to use the Blazor editor but the "Insert Image" function is very basic. Previously using Webforms & Core the insert image in the editor presented the user with a file management and image upload popup. Is this functionality available with the Blazor component?
=====ADMIN EDIT=====
Possible alternative:
The ability to choose which options to appear in the ContextMenu.
=====
TELERIK EDIT: In the meantime, here is how to hide context menu items with CSS:
/* Hide the Rename item in the FileManager context menu */
.k-context-menu:has(.k-svg-i-download) .k-menu-item:nth-of-type(1) {
display: none;
}
/* Hide the Delete item in the FileManager context menu */
.k-context-menu:has(.k-svg-i-download) .k-menu-item:nth-of-type(3) {
display: none;
}Here is a complete example: https://blazorrepl.telerik.com/cpPkuBEq408A36p010
Currently, I'm using your Calendar component for a vacation request feature. It works decently for picking dates in that I can use CTRL and Shift to select many dates. I'm currently making the page responsive but the mobile user experience lacks because there is no way to select more than one date.
The ideal user experience would be to be able to single click (or tap from mobile) to select a date and be able to do that on as many dates as preferred (to select many). Clicking/tapping again would deselect the date. That would be better in both the desktop and mobile versions and more intuitive for a user (as no one has initially assumed CTRL and Shift work - I have had to train them).
When the Grid is grouped and aggregate functions are enabled, paging performance degrades significantly because grouping and aggregate calculations are executed on every page change. This results in noticeable delays and UI stutter, especially in WebAssembly applications and larger datasets.
This enhancement optimizes page navigation for grouped Grid scenarios with aggregates by avoiding repeated processing when the underlying data has not changed, resulting in substantially faster paging performance while preserving existing functionality and first-load behavior.
I would like to see icon support for the switch control. See the attached screen shot for the use case.
Hi,
I would like checkbox support including the check all checkbox on the multiselect component like: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/functionality/checkbox-support
The url below shows how to create custom checkboxes in the multiselect component but adding a check all checkbox in the headertemplate does not update the multiselect popup
UI for Blazor version 5.0 improved the FileSelect Stream performance by removing legacy code that meant to support older .NET versions.
However, the Stream performance is still worse and the component works slower, compared to the standard Blazor InputFile.
Hello,
I noticed that all component of ComboBox (DropDownList, DropDownTree, MultiColumnComboBox) which have a GroupField doesn't provide a GroupTemplate
It would be very helpful to have one to further customize how we want the group to render
For example in my case, I want to customize items and groups to add checkbox on each level and parent checkbox will select/unselect children, but because I don't have access to group template I can't do it.
I think I can work something with the DropDownTree, but it will be kind of ugly as the component is not suited for multi selection and will not be related to the component selections
Thanks
Regards
Thomas
Support multiple users editing the same content in an editor.
This would be similar to the editor in something like confluence or online Word.
Regards
Window, Dialog, and other popups render as children of TelerikRootComponent, which makes CSS Isolation difficult. Current strategy says to use containment selector or global scope css styles.
To allow CSS isolation to pass through, I'd like to see an additional "CssScope" attribute. For example:
<TelerikWindow CssScope="my-custom-scope">
</TelerikWindow>Then when the window is rendered:
<div ... my-custom-scope>
....
</div>
I would like to be able to disable one or more radio buttons in the RadioGroup.
=====
TELERIK EDIT
In the meantime, consider the following workaround, which relies on CSS and RadioGroup ItemTemplate.
<h4>Default Value Disabled</h4>
RadioGroupValue1: @RadioGroupValue1
<TelerikRadioGroup Data="@Options"
@bind-Value="@RadioGroupValue1"
ValueField="@nameof(RadioModel.Id)"
TextField="@nameof(RadioModel.Text)">
<ItemTemplate>
@{
var dataItem = (RadioModel)context;
var isChecked = dataItem.Id == RadioGroupValue1;
}
@if (!dataItem.Enabled)
{
<span class="disabled-radio-option">
<span class="k-radio-wrap">
<input type="radio" value="@dataItem.Id" aria-checked="@isChecked" aria-disabled="true" aria-invalid="true"
class="@( $"fake k-radio k-radio-md {(isChecked ? "k-checked" : "")}" )" style="user-select: none;" />
</span>
<span>@dataItem.Text</span>
</span>
}
else
{
<span>@dataItem.Text</span>
}
</ItemTemplate>
</TelerikRadioGroup>
<h4>No Default Value</h4>
RadioGroupValue2: @RadioGroupValue2
<TelerikRadioGroup Data="@Options"
@bind-Value="@RadioGroupValue2"
ValueField="@nameof(RadioModel.Id)"
TextField="@nameof(RadioModel.Text)">
<ItemTemplate>
@{
var dataItem = (RadioModel)context;
var isChecked = dataItem.Id == RadioGroupValue2;
}
@if (!dataItem.Enabled)
{
<span class="disabled-radio-option">
<span class="k-radio-wrap">
<input type="radio" value="@dataItem.Id" aria-checked="@isChecked" aria-disabled="true" aria-invalid="true"
class="@( $"fake k-radio k-radio-md {(isChecked ? "k-checked" : "")}" )" style="user-select: none;" />
</span>
<span>@dataItem.Text</span>
</span>
}
else
{
<span>@dataItem.Text</span>
}
</ItemTemplate>
</TelerikRadioGroup>
<style>
.k-radio-list-item:has(.disabled-radio-option) {
pointer-events: none;
cursor: default;
opacity: 0.6;
gap: 0;
}
.disabled-radio-option {
display: flex;
align-items: center;
align-content: center;
gap: var(--kendo-spacing-1);
}
.k-radio-list-item:has(.disabled-radio-option) input:not(.fake) {
display: none;
}
</style>
@code{
private int RadioGroupValue1 { get; set; } = 2;
private int RadioGroupValue2 { get; set; }
private List<RadioModel> Options { get; set; } = new List<RadioModel>
{
new RadioModel { Id = 1, Text = "Option 1" },
new RadioModel { Id = 2, Text = "Option 2", Enabled = false },
new RadioModel { Id = 3, Text = "Option 3" },
new RadioModel { Id = 4, Text = "Option 4", Enabled = false },
new RadioModel { Id = 5, Text = "Option 5" },
};
public class RadioModel
{
public int Id { get; set; }
public string Text { get; set; } = string.Empty;
public bool Enabled { get; set; } = true;
}
}