I set the Enabled parameter to false, but it didn't disable the input.
Wrap the Switch inside label HTML element and set Enabled to false. Switch will remain enabled. This problem occurs only when you wrap the Switch inside a label. If the Switch is wrapped in another HTML element, the Enabled parameter will work as expected.
----------ADMIN EDIT----------
In the meantime, there are two possible workarounds:
- If you want to use the label HTML element, you can add a custom CSS rule that disables the click. You can see the following example.
@if (isEnabled == false) { <style> .switch { pointer-events: none; } </style> } <label class="switch"> <TelerikSwitch @bind-Value="@isSelected" Enabled="@isEnabled" /> @( isSelected ? "Selected" : "Not selected" ) </label> @code { private bool isSelected { get; set; } static bool isEnabled { get; set; } = false; } - The second option is to avoid using label and wrap the Switch with a different HTML element.
The exception is -
System.ArgumentNullException: Value cannot be null. (Parameter 'source')
Here is a test page, based on this one -
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
@using System.IO
<TelerikGrid TItem="@object"
LoadGroupsOnDemand="true"
Groupable="true"
OnStateInit="@((GridStateEventArgs<object> args) => OnStateInitHandler(args))"
OnRead="@ReadItems"
ScrollMode="@GridScrollMode.Virtual" PageSize="20" RowHeight="60"
Navigable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Height="600px">
<GridColumns>
<GridColumn Field="@nameof(Employee.Name)" FieldType="@typeof(string)" Groupable="false" />
<GridColumn Field="@nameof(Employee.Team)" FieldType="@typeof(string)" Title="Team" />
<GridColumn Field="@nameof(Employee.Salary)" FieldType="@typeof(decimal)" Groupable="false" />
<GridColumn Field="@nameof(Employee.IsOnLeave)" FieldType="@typeof(bool)" Title="On Vacation" />
</GridColumns>
</TelerikGrid>
@code {
List<object> GridData { get; set; }
protected async Task ReadItems(GridReadEventArgs args)
{
DataEnvelope<Employee> result = await MyService.GetData(args.Request);
if (args.Request.Groups.Count > 0)
{
args.Data = result.GroupedData.Cast<AggregateFunctionsGroup>().ToList();
}
else
{
args.Data = result.CurrentPageData.Cast<Employee>().ToList();
}
args.Total = result.TotalItemCount;
if (args.Request.Groups.Count > 0)
{
try
{
List<AggregateFunctionsGroup> items = result.GroupedData.Cast<AggregateFunctionsGroup>().ToList();
await using var s = new MemoryStream();
await System.Text.Json.JsonSerializer.SerializeAsync(s, items);
}
catch (Exception e)
{
Console.WriteLine(e);
}
}
}
void OnStateInitHandler(GridStateEventArgs<object> args)
{
// set initial grouping
GridState<object> desiredState = new GridState<object>()
{
GroupDescriptors = new List<GroupDescriptor>()
{
new GroupDescriptor()
{
Member = "Team",
MemberType = typeof(string)
},
new GroupDescriptor()
{
Member = "IsOnLeave",
MemberType = typeof(bool)
}
}
};
args.GridState = desiredState;
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public bool IsOnLeave { get; set; }
public decimal Salary { get; set; }
}
public class DataEnvelope<T>
{
public List<AggregateFunctionsGroup> GroupedData { get; set; }
public List<T> CurrentPageData { get; set; }
public int TotalItemCount { get; set; }
}
public static class MyService
{
private static List<Employee> SourceData { get; set; }
public static async Task<DataEnvelope<Employee>> GetData(DataSourceRequest request)
{
if (SourceData == null)
{
SourceData = new List<Employee>();
var rand = new Random();
for (int i = 1; i <= 2500; i++)
{
SourceData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 100,
IsOnLeave = i % 3 == 0,
Salary = rand.Next(1000, 5000)
});
}
}
await Task.Delay(500);// deliberate delay to showcase async operations, remove in a real app
// retrieve data as needed, you can find more examples and runnable projects here
// https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server
var datasourceResult = SourceData.ToDataSourceResult(request);
DataEnvelope<Employee> dataToReturn;
if (request.Groups.Count > 0)
{
dataToReturn = new DataEnvelope<Employee>
{
GroupedData = datasourceResult.Data.Cast<AggregateFunctionsGroup>().ToList(),
TotalItemCount = datasourceResult.Total
};
}
else
{
dataToReturn = new DataEnvelope<Employee>
{
CurrentPageData = datasourceResult.Data.Cast<Employee>().ToList(),
TotalItemCount = datasourceResult.Total
};
}
return await Task.FromResult(dataToReturn);
}
}
}
When a filter descriptor is created and the value is of type DateTime? (nullable DateTime) the serialized value is incorrect.
DataSourceRequest request1 = new()
{
Filters = new[] {new FilterDescriptor("Test", FilterOperator.IsEqualTo, DateTime.Now.Date) {MemberType = typeof(DateTime)}},
Sorts = new List<SortDescriptor>()
};
DataSourceRequest request2 = new()
{
Filters = new[] { new FilterDescriptor("Test", FilterOperator.IsEqualTo, DateTime.Now.Date) { MemberType = typeof(DateTime?) } },
Sorts = new List<SortDescriptor>()
};
string query1 = request1.ToODataString(); // outputs $count=true&$filter=(Test%20eq%202022-05-12T00:00:00.0000000Z)&$skip=0
string query2 = request2.ToODataString(); // outputs $count=true&$filter=(Test%20eq%202022-05-12%2000:00:00)&$skip=0
When a culture that has comma for decimal separator is used, the ColorPicker formats the rgba() CSS rule as rgba(255,255,255,0,6) which is incorrect. The alpha value should always have a dot as a decimal separator.
<TelerikColorPicker @bind-Value="@value">
@code {
public string Value { get; set; } = "#282f89";
}Set the culture of the application so that the default decimal separator is a comma (el-GR).
// in Program.cs file
CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("el-GR");
CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("el-GR");The rgba() rule is formatted as rgba(255, 255, 255, 0,6) but should be formatted as rgba(255, 255, 255, 0.6).
The NumericTextBox does not allow pasting from an Excel cell. Pasting from the plain text textbox at the top of the Excel interface works.
The problem is caused by a new line character, which Excel adds to the clipboard value when copying the cell directly. A possible workaround is:
- Subscribe to the paste event of the NumericTextBox <input>
- Check for "invalid" pasted content that you need
- Set the <input> value manually with JavaScript
- Notify the component's instance in the .NET runtime
The important thing to keep in mind is: the JavaScript workaround should work only for pasted content, which the NumericTextBox does not allow. Otherwise the app will edit the value one extra time. In the example below, the script checks specifically for a new line at the end of the pasted value.
@inject IJSRuntime js
<TelerikNumericTextBox @bind-Value="@NumValue" Width="200px" Class="fix-paste" />
@* suppress-error allows script tags in Razor components. Move this script to a proper place in production environment. *@
<script suppress-error="BL9992">function fixPaste() {
var inputs = document.querySelectorAll(".fix-paste .k-input-inner");
inputs.forEach(element => {
element.addEventListener("paste", function(e) {
// get pasted content
debugger;
var pastedString = e.clipboardData.getData("text/plain");
// check for specific content, which DOES NOT pass the built-in validation
// adjust this conditional statement, according to the application scenario
if (pastedString.indexOf("\n") == pastedString.length - 1) {
// assign the pasted content manually
e.target.value = pastedString.trim();
// tell the component's .NET instance to change the value
e.target.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));
}
});
});
}</script>
@code {
double NumValue { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await js.InvokeVoidAsync("fixPaste");
}
await base.OnAfterRenderAsync(firstRender);
}
}
If the CompositeFilterDescriptor is set with a predefined filter before the filter component is rendered on the page it locks up the UI.
I've noticed this issue if the Filter is user under a TabStrip.. You set the filter and navigate way from the tab and back it will lock up.
A ComboBox is databound via OnRead. It has an initial value, but no data arrives after the first OnRead call. We call Rebind() to fetch data and then it populates, but the component value doesn't show.
Click the button. The ComboBox should show its initial value, but doesn't. A similar scenario worked until version 2.30, when there was no Rebind(), but we set Data directly.
The workaround is to set raise a flag in OnRead and set the value in OnAfterRenderAsync.
@using Telerik.DataSource.Extensions
<TelerikButton OnClick="@BindCombo">Rebind Combo</TelerikButton>
<TelerikComboBox TItem="@ComboItem"
TValue="int"
@ref="@ComboRef"
TextField="Text"
ValueField="Id"
OnRead="OnComboRead"
Width="200px"
@bind-Value="@ComboValue">
</TelerikComboBox>
@code {
string FilterValue { get; set; } = "A";
int ComboValue { get; set; } = 2;
bool BindFlag { get; set; }
bool ShouldResetValue { get; set; }
IEnumerable<ComboItem> LegacyComboData { get; set; }
TelerikComboBox<ComboItem, int> ComboRef { get; set; }
void BindCombo()
{
BindFlag = true;
ComboRef.Rebind();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (ShouldResetValue)
{
// comment out the initially set value above to make the following line work
ComboValue = 2;
StateHasChanged();
}
await base.OnAfterRenderAsync(firstRender);
}
async Task OnComboRead(ComboBoxReadEventArgs args)
{
if (BindFlag)
{
var service = new MyService();
var data = await service.GetComboItem(FilterValue);
var result = await data.ToDataSourceResultAsync(args.Request);
args.Data = result.Data;
//ShouldResetValue = true;
}
}
public class ComboItem
{
public int Id { get; set; }
public string Code { get; set; }
public string Text { get; set; }
}
public class MyService
{
public async Task<IEnumerable<ComboItem>> GetComboItem(string code)
{
await Task.Delay(300);
var data = new[]
{
new ComboItem{ Id = 1, Code = "A", Text = "ValueA1" },
new ComboItem{ Id = 2, Code = "A", Text = "ValueA2" },
new ComboItem{ Id = 3, Code = "A", Text = "ValueA3" },
new ComboItem{ Id = 4, Code = "B", Text = "ValueB4" },
new ComboItem{ Id = 5, Code = "B", Text = "ValueB5" },
new ComboItem{ Id = 6, Code = "B", Text = "ValueB6" },
new ComboItem{ Id = 7, Code = "C", Text = "ValueC7" },
new ComboItem{ Id = 8, Code = "C", Text = "ValueC8" },
new ComboItem{ Id = 9, Code = "C", Text = "ValueC9" },
};
return data.Where(x => x.Code == code).ToList();
}
}
}
The problem is that if the selected option is in the options added later then it does not show it as the selected value.
Example below shows correct function for "6" but incorrect for "7".
---
ADMIN EDIT
Here is a reproducible with the workaround highlighted in green:
@using System.Collections.ObjectModel
<h4>Option Selected: 6 @selectedSix</h4>
<br />
<TelerikDropDownList Data="@myDdlData"
TextField="MyTextField"
ValueField="MyValueField"
@bind-Value="@selectedSix" />
<h4>Option Selected: 7 @selectedSeven</h4>
<br />
<TelerikDropDownList Data="@myDdlData"
TextField="MyTextField"
ValueField="MyValueField"
@bind-Value="@selectedSeven">
</TelerikDropDownList>
<TelerikButton OnClick="@AddOption">Add Item</TelerikButton>
<ul>
@foreach (var item in myDdlData)
{
<li>@item.MyValueField</li>
}
</ul>
@code {
int selectedSix { get; set; } = 6;
int selectedSeven { get; set; } = 7;
ObservableCollection<MyDdlModel> myDdlData = new ObservableCollection<MyDdlModel>(Enumerable.Range(1, 5).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x }));
protected override async Task OnInitializedAsync()
{
AddOption();
await Task.Delay(TimeSpan.FromSeconds(1));
AddOption();
}
void AddOption()
{
myDdlData.Add(new MyDdlModel { MyTextField = "item " + (myDdlData.Count + 1), MyValueField = myDdlData.Count + 1 });
int origSelection = selectedSeven;
selectedSeven = 0;
StateHasChanged();
//add this if it does not work
//await Task.Delay(30);//wait a rendering frame
selectedSeven = origSelection;
//add this if it does not work
//StateHasChanged();
}
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
}
Note: This behavior also occurs if the initial data is received after the component is initialized. The workaround in this case will be similar - set the selected value after the data is received.
---
The upload status hangs on "Uploading..." if the Upload component is hosted in a Dialog and the OnSuccess event is used.
<AdminEdit>
As a workaround, you can host the Upload in a Window, where this issue is not present
</AdminEdit>
On the DateTimePicker, when the "Set" button is clicked, the focus is given to the DateTimePicker field, so when the user clicked outside the component, the OnChange event is fired.
But the behaviour of the TimePicker is different. Indeed, after clicking on the "Set" button the TimePicker field does not get the focus, so the user can't click outside of it to fire the OnChange event.
The following code allows to manually set the focus on each ValueChanged event, but because of it the two-way binding can't be used. This code allows the TimePicker to have the same behaviour than the DateTimePicker :
<TelerikTimePicker @ref="@timepicker" Value="MyDate" OnChange="MyDateChanged"
ValueChanged="@((DateTime d) => { MyDate = d; timepicker.FocusAsync(); })"></TelerikTimePicker>
@code {
private DateTime MyDate { get; set; }
private TelerikTimePicker<DateTime> timepicker;
public void MyDateChanged(object theUserInput)
{
Console.WriteLine("Event OnChange fired");
}
}---
ADMIN EDIT
Reproducible
1. Go to the TimePicker demo https://demos.telerik.com/blazor-ui/timepicker/overview
2. open the popup
3. set a time with the Set button
**Note**: same goes for the Cancel button
### Current
focus goes somewhere (maybe on the body)
### Expected
focus goes to the input of the time picker
---
The ComboBox will not display an initial selected item, if the value is equal to the type's default. Applies to integers, guids, etc.
This used to work until version 2.30.
Here is a REPL test page.
If the value type is nullable, a zero int value will work for initial item selection.
ADMIN EDIT
You can use the code snippet below to test this behavior in your app. At the end of the post you will find two sample apps attached that use that same code - one is OK, the other exhibits the issue. The difference in them is the layout. The one that works OK has the old MS template from over a year ago where there is an <app> element above the root of the blazor components, and that element has display: flex. The problematic app has the newer template without such a parent element - the parent element is not the <body> and it does not have display:flex. You can add in the following rule to it to see it will fix the dialog overlay error (but it can damage the layout of the app).
sample rule to fix the issue in the problematic app
body {
display:flex;
}sample code to test the behavior
<TelerikWindow Modal="true" @bind-Visible="@isModalVisible">
<WindowTitle>
<strong>The Title</strong>
</WindowTitle>
<WindowContent>
I am modal so the page behind me is not available to the user.
<br />
<TelerikButton OnClick="@( _ => isSecondModalVisible = true )">Open the SECOND window</TelerikButton>
<TelerikButton OnClick="@ShowConfirmWithTitle">Show Confirm</TelerikButton>
</WindowContent>
<WindowActions>
<WindowAction Name="Minimize" />
<WindowAction Name="Maximize" />
<WindowAction Name="Close" />
</WindowActions>
</TelerikWindow>
<TelerikWindow Modal="true" @bind-Visible="@isSecondModalVisible">
<WindowTitle>
<strong>The SECOND</strong>
</WindowTitle>
<WindowContent>
Second modal!
</WindowContent>
<WindowActions>
<WindowAction Name="Minimize" />
<WindowAction Name="Maximize" />
<WindowAction Name="Close" />
</WindowActions>
</TelerikWindow>
<TelerikButton OnClick="@( _ => isModalVisible = true )">Open the window</TelerikButton>
@code{
[CascadingParameter]
public DialogFactory Dialogs { get; set; }
bool isModalVisible { get; set; }
bool isSecondModalVisible { get; set; }
async Task ShowConfirmWithTitle()
{
bool isConfirmed = await Dialogs.ConfirmAsync("Are you sure?", "Confirmation!");
Console.WriteLine($"The user is sure: {isConfirmed}.");
}
}
When you paste a table in the Editor or insert one through the InsertHTML tool, most of the Editor Table tools don't work on the pasted table. Only Delete Table tool can be used. The rest of the Table tools do not seem to invoke any action with the table.
If you create table using the Create Table tool this behavior is not present, you can accordingly apply the built-in Table tools.
Steps to reproduce:
https://demos.telerik.com/blazor-ui/editor/overview
1. Clean content
2. Insert sentence
3. Center it and press Enter
4. Type new sentence and select whole content (Ctrl + A)
5. Align not possible, because is selected
Expected: All paragraphs in the editors receive center alignment
Actual: Align is possible
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;
}
}
If I click accidentally click on one of the alignment options, I cannot then unselect it.
===========
ADMIN EDIT
Video of the current behavior attached.
===========
After the 3.1 update, the OnChange event no longer fires. It fires only on Enter key press.
See this REPL link.