Hi,
starting with version 6.0, dialogs used together with loading indicator are at wrong z-index order.
- None of hotfixes with "delay" helped.
- users are stucked and cant confirm anything
How to replicate
Click on "Show Confirm with loading indicator". Loading animation should be at BACK of confirm dialog(as at older versions, prior 6.0)
https://blazorrepl.telerik.com/GeOfQMkt56AMkdof43
When SelectOnFocus="true"
is enabled on the NumericTextBox control, and a format (e.g., Format="N1"
) is set, the SelectOnFocus
functionality does not select all text if the decimal value has no trailing digits. For instance, with the value 76
, the text is not selected on focus, but with the value 76.1
, the text is selected correctly.
<TelerikNumericTextBox @bind-Value="@DecimalValue" Format="N1" SelectOnFocus="true"/>
@code {
private decimal DecimalValue = 76;
}
Steps to Reproduce:
SelectOnFocus="true"
.Format="N1"
.76
(with no trailing digits after the decimal point).Expected Behavior:
The entire text (in this case, 76.0
) should be selected when the NumericTextBox gains focus.
Actual Behavior:
The text is not selected when the NumericTextBox gains focus if the value has no trailing digits after the decimal point (e.g., 76
). However, if the value includes trailing digits (e.g., 76.1
), the text is selected as expected.
See below repl
https://blazorrepl.telerik.com/GeYodYvp135zJH7N22
The first dropdown is populated correctly, it is not in a FormItem or Template
The second one, populated in the same way but inside a FormItem context does not show the data, it only redraws and shows data when entering another control i.e. the other working dropdown.
This was previously working when the application was using .net 6 and Telerik 3.6.1
It has since been updated to .net 8 and Telerik 5.1.1
What is the correct way to populate this?
Can you provide more information?
Thanks.
Hi,
Here is my demo DatePicker Demo
In Firefox, after I use the mouse to black all texts out, then DatePicker only selects the month field in the place holder. I expect to select all texts.
In Chrome or Edge, the DatePicker works as expected, after blacking texts out, it selects all texts in the place holder
Could you please check the issue?
Thanks and regards,
Tung
When filtering or editing a Grid with enum data, the Name property of their Display parameter is respected.
However, in the initial view mode of the Grid the Name property is not applied and the enum values are rendered regardless of whether or not their Display parameter has a Name property defined.
==========
ADMIN EDIT
==========
In the meantime, a workaround you might try is to create a custom method to check whether Display attribute is defined and get and display its Name property, otherwise display the Enum's member name.
You can then use a Template for the column that uses enum data, cast its context to the model you are using and invoke the method on the field containing the enum. The sample below demonstrates how you can achieve this.
@using System.ComponentModel.DataAnnotations
@using System.Reflection
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
OnUpdate="@UpdateHandler" FilterMode="@GridFilterMode.FilterRow">
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
<GridColumn Field=@nameof(SampleData.Name) Title="Name" />
<GridColumn Field=@nameof(SampleData.Role) Title="Position">
<Template>
@{
var currentEmployee = context as SampleData;
var currentRole = GetDisplayName(currentEmployee.Role);
}
@currentRole
</Template>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
//custom method to check whether Display attribute is defined and get and display its Name property, otherwise display the Enum's member name
public string GetDisplayName(Enum val)
{
return val.GetType()
.GetMember(val.ToString())
.FirstOrDefault()
?.GetCustomAttribute<DisplayAttribute>(false)
?.Name
?? val.ToString();
}
public void UpdateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
//update the view-model
var index = MyData.FindIndex(i => i.ID == item.ID);
if (index != -1)
{
MyData[index] = item;
}
//perform actual data source operations here
}
//model and dummy data generation
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
public Role Role { get; set; }
}
public enum Role
{
[Display(Name = "Manager")]
ManagerRole,
[Display(Name = "Employee")]
EmployeeRole,
[Display(Name = "Contractor")]
ContractorRole
}
public List<SampleData> MyData { get; set; }
protected override void OnInitialized()
{
MyData = new List<SampleData>();
for (int i = 0; i < 50; i++)
{
MyData.Add(new SampleData()
{
ID = i,
Name = "name " + i,
Role = (Role)(i % 3) // just some sample to populate initial values for the enum
});
}
}
}
We find this in our infrastructure but it can be reproduced even in Telerik docs.
Docs page: https://docs.telerik.com/blazor-ui/components/grid/grouping/overview try to drop all three columns using drag and drop in sequence: Team, Name, On Vacation.
Expected sequence: Team, Name, On Vacation
Expected sequence: Team, On Vacation, Name
All Elements are always added as 1 item. It is an important feature for us, as our customers use it frequently.
===
TELERIK EDIT:
A possible workaround is to intercept the grouping and reorder the groups:
@using Telerik.DataSource
<p>Group by a third column, so that it should come last in the Group Panel:</p>
<TelerikGrid @ref="@GridRef"
Data="@GridData"
Pageable="true"
Sortable="true"
Groupable="true"
FilterMode="GridFilterMode.FilterRow"
OnStateInit="@( (GridStateEventArgs<Employee> args) => OnGridStateInit(args) )"
OnStateChanged="@( (GridStateEventArgs<Employee> args) => OnGridStateChanged(args) )">
<GridColumns>
<GridColumn Field="@nameof(Employee.Name)" />
<GridColumn Field="@nameof(Employee.Team)" />
<GridColumn Field="@nameof(Employee.Salary)" />
<GridColumn Field="@nameof(Employee.OnVacation)" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Employee>? GridRef { get; set; }
private List<Employee> GridData { get; set; } = new();
private void OnGridStateInit(GridStateEventArgs<Employee> args)
{
args.GridState.GroupDescriptors = new List<GroupDescriptor>();
args.GridState.GroupDescriptors.Add(new GroupDescriptor()
{
Member = nameof(Employee.Team),
MemberType = typeof(string)
});
args.GridState.GroupDescriptors.Add(new GroupDescriptor()
{
Member = nameof(Employee.OnVacation),
MemberType = typeof(bool)
});
}
private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
{
if (args.PropertyName == "GroupDescriptors" && args.GridState.GroupDescriptors.Count > 2 && GridRef != null)
{
var secondGroupDescriptor = args.GridState.GroupDescriptors.ElementAt(1);
args.GridState.GroupDescriptors.Remove(secondGroupDescriptor);
args.GridState.GroupDescriptors.Add(secondGroupDescriptor);
await GridRef.SetStateAsync(args.GridState);
}
}
protected override void OnInitialized()
{
var rnd = new Random();
for (int i = 1; i <= 20; i++)
{
GridData.Add(new Employee()
{
Id = i,
Name = "Name " + i,
Team = "Team " + (i % 4 + 1),
Salary = (decimal)rnd.Next(1000, 3000),
OnVacation = i % 3 == 0
});
}
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Team { get; set; } = string.Empty;
public decimal Salary { get; set; }
public bool OnVacation { get; set; }
}
}
I've determined that the TelerikDateTimePicker does not work properly on mobile devices when using AdaptiveMode.Auto. Attached are videos of the component's behaviour in both modes (None, and Auto).
Immediately after interacting with the fullscreen popup of the datepicker, I see this error in the console:
RAW:
telerik-blazor.js:50 Uncaught TypeError: r.isParent is not a function
at p.isChild (telerik-blazor.js:50:1362352)
at f.closePopup (telerik-blazor.js:50:1398427)
at HTMLHtmlElement.onMouseDown (telerik-blazor.js:50:1397246)
Code:
@using Telerik.Blazor.Components
@using Telerik.Blazor
<TelerikFloatingLabel Text="Date & Time">
<TelerikDateTimePicker Id="date-picker" @bind-Value="MyFormModel.Date" Max="@DateTime.Now.AddDays(1)"
Format="@DATE_FORMAT" AdaptiveMode="AdaptiveMode.Auto"
FillMode="@Telerik.Blazor.ThemeConstants.DateTimePicker.FillMode.Flat" />
</TelerikFloatingLabel>
@code {
private FormModel MyFormModel { get; set; } = new FormModel();
private const string DATE_FORMAT = "MM/dd/yyyy HH:mm";
private class FormModel
{
public DateTime Date { get; set; }
}
}
Notes:
- If we remove all of the parent components wrapping the DatePicker, it seems to function properly, but the errors remain in the console. This isn't a solution, however.
Hi,
I have a little problem with changing the LoadGroupsOnDemand value. Depending on the data in my grid, I set this value to true or false. When updating grid data requires changing the LoadGroupsOnDemand value, I can't do it this way:
LoadGroupsOnDemand = true;
GridData = result;
GridRef.SetStateAsync(GridRef.GetState());
This code throws me an exception.
I need to do something like this to make it work:
LoadGroupsOnDemand = true;
GridRef.LoadGroupsOnDemand = LoadGroupsOnDemand;
GridData = result;
GridRef.SetStateAsync(GridRef.GetState());
This is the code that is executed in onclick. After OnRead is executed, the exception is thrown.
Let me know if you need more information.
I have a ComboBox that gets data from a remote service, using virtualization. When the PageSize property is big enough (in my case 20), I have issues scrolling down. I'm trying to scroll but it removes the input text.
You can use your own demo examples to replicate this issue. To reproduce the issue, try the ComboBox - Virtualization, in Telerik REPL (Demo).
For reasons unknown, our TelerikGrid rows all render with each <tr> element having the "k-alt k-table-alt-row" classes associated with them. This causes the background colour for each row to be the same, rather than alternating between two colours.
For example, the following block of code...
<TelerikGrid Id="@(Utility.CleanCssId("CrewGrid"))"
DetailTemplate="GridDetailTemplate"
EnableLoaderContainer="@ShowLoading"
Groupable="false"
Height="100%"
OnRead="@OnGridRead"
OnStateChanged="@OnGridStateChanged"
OnStateInit="@OnGridStateInit"
Pageable="true"
PageSize="@PageSize"
PageSizeChanged="@OnGridPageSizeChanged"
Reorderable="IsLargeScreen"
Resizable="IsLargeScreen"
SelectionMode="GridSelectionMode.Single"
ShowColumnMenu="IsLargeScreen"
Size="@GetGridSize"
Sortable="true"
SortMode="SortMode.Multiple"
TItem="CrewListItem"
@ref="Grid"
@bind-SelectedItems="@SelectedItems"
OnRowRender="OnRowRender">
<NoDataTemplate>
<strong>@RecordsMessage</strong>
</NoDataTemplate>
<GridSettings>
<GridColumnMenuSettings Lockable="false" FilterMode="ColumnMenuFilterMode.None" />
<GridPagerSettings InputType="PagerInputType.Buttons" PageSizes="@PageSizes" ButtonCount="5" Adaptive="false" Position="PagerPosition.Bottom" />
</GridSettings>
<GridColumns>
<GridColumn Field="@nameof(CrewListItem.Color)"
Width="@(IsLargeScreen ? "40px" : "50px")"
Resizable="false"
ShowColumnMenu="false"
Groupable="false"
ShowColumnChooser="false"
Sortable="false"
HeaderClass="k-text-transparent"
OnCellRender="OnGridCellRender">
<Template>
@{
var item = (CrewListItem)context;
<M360ListColumnColor Color="@item.Color" IsLargeScreen="IsLargeScreen" />
}
</Template>
</GridColumn>
<GridColumn Field="@nameof(CrewListItem.Name)" Title="@TMessages.Crew" OnCellRender="OnGridCellRender" VisibleInColumnChooser="false">
<Template>
@{
var item = (CrewListItem)context;
<div class="k-d-flex k-h-full @(IsLargeScreen ? "k-align-items-stretch" : "k-align-items-center")">
<M360ListColumnLink Url="@string.Concat("crew/", item.Id)" Text="@item.Name" EntityType="Crew" IsPrimary="true" />
</div>
}
</Template>
</GridColumn>
<GridColumn Field="@nameof(CrewListItem.DivisionsJson)" Title="Division(s)" Sortable="true" Visible="IsLargeScreen" OnCellRender="OnGridCellRender">
<Template>
@{
var item = (CrewListItem)context;
<M360ListColumnList Items="@item.Divisions.ToList()" />
}
</Template>
</GridColumn>
.
.
.
</GridColumns>
</TelerikGrid>
...results in markup like this...
<tbody class="k-table-tbody" role="rowgroup">
<tr
role="row"
class="k-master-row k-table-row k-alt k-table-alt-row"
data-render-row-index="0"
aria-rowindex="1"
>
. . .
</tr>
<tr
role="row"
class="k-master-row k-table-row k-alt k-table-alt-row"
data-render-row-index="1"
aria-rowindex="3"
>
. . .
</tr>
<tr
role="row"
class="k-master-row k-table-row k-alt k-table-alt-row"
data-render-row-index="2"
aria-rowindex="5"
>
. . .
</tr>
. . .
</tbody>
I can see that the "aria-rowindex" increments by two, yet the "data-render-row-index" increments by one. Are we missing something simple, yet crucial here? What could cause the skipping of rows during render?
Many thanks,
Nem
We have edit dialogs with editable fields on them, and we want to display a confirmation dialog if the user tries to close the edit dialog without saving. Simplified code to illustrate the issue:
Trying to group by some nullable column. Expanding the group returns the entire dataset instead of only these rows with value == null.
Use case: Some users can not be assigned to any Team. Want to group by Teams and see users not assigned to any Team.
Steps to reproduce:
Expected results:
Expanding the group by not assigning Teams returns only these users what doesn't have any teams by applying filtering.
Actual results:
Expanding the group by not assigning Teams returns all users without filtering.
Code:
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
Scroll through the groups or expand them to load their data on demand
<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)
{
// sample data retrieval, see comments in the service mimic class below
DataEnvelope<Employee> result = await MyService.GetData(args.Request);
if (args.Request.Groups.Count > 0)
{
args.Data = result.GroupedData.Cast<object>().ToList();
}
else
{
args.Data = result.CurrentPageData.Cast<object>().ToList();
}
args.Total = result.TotalItemCount;
}
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 <= 3; i++)
{
SourceData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 100,
IsOnLeave = i % 3 == 0,
Salary = rand.Next(1000, 5000)
});
}
SourceData.Add(new Employee()
{
EmployeeId = 3,
Name = "Employee " + 3.ToString(),
Team = null,
IsOnLeave = 3 % 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);
}
}
}
Greetings,
I find input adornments very useful. However I noticed that when I click them, the control doesn't get the focus. E.g., with this code:
<TelerikTextBox>
<TextBoxPrefixTemplate>
First name
</TextBoxPrefixTemplate>
</TelerikTextBox>
Clicking on First name doesn't do anything. I would expect the control to be focused when I do that.
You will find an image in attachment showing a green area that, when clicked, brings focus on the textbox. Input adornment is in dark gray. I'm using it as a label for the control but even if it was simply an icon, it would be strange to not be able to focus on the control when clicking it.
I use TelerikMultiSelect as a component for custom filter:
<FilterMenuTemplate>
<TelerikMultiSelect Value="@(AlreadySelectedFilterValues(context.FilterDescriptor))"
OnRead="@OnReadWrapper"
ValueMapper="@ValueMapperWrapper"
TItem="@FilterItemDto"
TValue="@TFilterValue"
ValueField="@nameof(FilterItemDto.Id)"
TextField="@nameof(FilterItemDto.Name)"
AutoClose="true"
Filterable="true"
ClearButton="true"
DebounceDelay="500"
OnChange="@((object newValue) => OnMenuFilterChange(newValue, context))"/>
</FilterMenuTemplate>
Trying to render already selected filters gives two "magic" items in context.FilterDescriptor in AlreadySelectedFilterValues:
These items appear only if TelerikMultiSelect is empty. If I select some from MultySelect these two items disappear and everything works as expected.
GridState has an empty list of FilterDescriptos.
AggregatedAccountNames - string? column.
TFilterValues can be int, int? or string, no matter, the same behavior.
TFilterItemDto - class with int? Id and and string Name fields.
As expected value I expect to have empty FilterDescriptos if nothing was selected.
The following code successfully renders the pdf viewer when the edit form is commented out, but when indside the pdf viewer it fails to render and gives the following error:
"Telerik.Blazor.Components.TelerikComboBox`2[Telerik.Blazor.Components.PdfViewer.Models.PdfViewerZoomLevelDescriptor,System.String] requires a value for the 'ValueExpression' ValueExpression is provided automatically when using 'bind-Value'.See more at https://docs.telerik.com/blazor-ui/knowledge-base/requires-valueexpression ."
@page "/pdfBug"
@* <EditForm Model="_fakeContext"> *@
<TelerikPdfViewer Data="@PdfSource"
OnDownload="@OnPdfDownload"
Height="600px"></TelerikPdfViewer>
@* </EditForm> *@
@code {
private byte[] PdfSource { get; set; }
private async Task OnPdfDownload(PdfViewerDownloadEventArgs args)
{
args.FileName = "PDF-Viewer-Download";
}
protected override void OnInitialized()
{
PdfSource = Convert.FromBase64String(PdfBase64);
base.OnInitialized();
}
private const string PdfBase64 = "JVBERi0xLjEKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDEvTWVkaWFCb3ggWy00MCAtNjQgMjYwIDgwXSA+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjE8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9BcmlhbD4+ID4+ID4+L0NvbnRlbnRzIDQgMCBSPj5lbmRvYmoKNCAwIG9iajw8L0xlbmd0aCA1OT4+CnN0cmVhbQpCVAovRjEgMTggVGYKMCAwIFRkCihUZWxlcmlrIFBkZlZpZXdlciBmb3IgQmxhem9yKSBUagpFVAplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCA1CjAwMDAwMDAwMDAgNjU1MzUgZgowMDAwMDAwMDIxIDAwMDAwIG4KMDAwMDAwMDA4NiAwMDAwMCBuCjAwMDAwMDAxOTUgMDAwMDAgbgowMDAwMDAwNDkwIDAwMDAwIG4KdHJhaWxlciA8PCAgL1Jvb3QgMSAwIFIgL1NpemUgNSA+PgpzdGFydHhyZWYKNjA5CiUlRU9G";
private FakeContext _fakeContext = new FakeContext() { Name = "Test" };
public class FakeContext
{
public string Name { get; set; }
}
}
Hi,
As the subject says, when our app is on the Chinese localization `zh-CN` it causes the date picker to default.
By default I mean the default date becomes 01 01 0001 and you cannot change it no matter what you select.
On any of our other localizations such as es-ES, en-US, fr-FR, etc. (zh-CN is the only one is what I'm getting at) we don't get this issue.
If the Datepicker's binded value is a DateOnly type, the Min and Max should follow that type.