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
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);
}
}
}
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; }
}
}
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).
Sorry for the long question/request...
I'm running into an exception during a TelerikScheduler Edit event when trying to initialize the model. I believe this is occurring because the models are complex objects with another object as a property inside it, where the "submodel" does not have a parameterless constructor. I'm receiving the following exception while debugging:
I read this ticket that discusses a similar issue as well as this ticket which describes the OnModelInit event that allows you to create an instance of the model to pass to the CUD event. However, after implementing the OnModelInit handler the error is still occurring because it is trying to clone that object before passing it to the edit event and is attempting to use a constructor with no parameters which does not exist.
To reiterate the ticket above, it would be nice if the clone process checks to see if the model implements the ICloneable interface. This will allow custom clone behavior which should resolve this issue. Or is there already a fix/workaround for this?
I added a few simplified code segments below as an example of the issue I'm having... (I'm using Blazor Server if that's relevant)
Index.razor:
@page "/"
@using TelerikBlazorTestApp.Models
<TelerikScheduler Data="@Appointments"
AllowCreate="true" AllowDelete="true" AllowUpdate="true"
OnModelInit="@ModelInitHandler">
<SchedulerViews>
<SchedulerDayView />
<SchedulerWeekView />
<SchedulerMonthView />
</SchedulerViews>
</TelerikScheduler>
@code {
public List<SchedulerAppointment<TestModel>> Appointments { get; set; }
protected override async Task OnInitializedAsync()
{
Appointments = new List<SchedulerAppointment<TestModel>>()
{
new SchedulerAppointment<TestModel> { Title = "Test 1", Start = DateTime.Now, End = DateTime.Now.AddHours(1), IsAllDay = false, Model = new TestModel("blah") },
new SchedulerAppointment<TestModel> { Title = "Test 2", Start = DateTime.Now.AddHours(1), End = DateTime.Now.AddHours(2), IsAllDay = false, Model = new TestModel("blah") },
new SchedulerAppointment<TestModel> { Title = "Test 3", Start = DateTime.Now, End = DateTime.Now, IsAllDay = true, Model = new TestModel("blah") }
};
}
public SchedulerAppointment<TestModel> ModelInitHandler()
{
return new SchedulerAppointment<TestModel>("blah");
}
}
SchedulerAppointment.cs:
namespace TelerikBlazorTestApp.Models
{
public class SchedulerAppointment<TItem>
{
public Guid Id { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
public List<DateTime> RecurrenceExceptions { get; set; }
public Guid? RecurrenceId { get; set; }
public TItem Model { get; set; }
public SchedulerAppointment()
{
Id = Guid.NewGuid();
}
public SchedulerAppointment(string s)
{
Id = Guid.NewGuid();
Model = (TItem)Activator.CreateInstance(typeof(TItem), s);
}
}
}
namespace TelerikBlazorTestApp.Models { public class TestModel { public string PropA { get; set; } public string PropB { get; set; } public TestModel(string s) { // something using s here } } }
Thanks!
When I select value that is right after first range I cannot scroll back to the previous range again due to a mechanism that makse scroling near to the selected value harder.
Hello,
it seems there is a bug related to the subject. Run this REPL please https://blazorrepl.telerik.com/wRFaYnEq276w3dK528 and follow the steps in the attached video.
Very thanks.
Miroslav
Since upgrading from 3.8 to 4.4 (including all new css) created dialogs from DialogFactory are sometimes behind an already opened modal window.
The reason for this seems to be an incorrectly, automatically calculated z-index of 10003 when the open dialog has 10006.
This does not always happen, there are scenarios where the first created dialog works fine, and the next called in the same method suddenly is behind the dialog, thus the error seems to be in telerik and not our side.
We could not yet find a proper workaround apart from creating custom dialogs.
Per API documentation, the Decimals property defaults to what is set in the user's region (culture). This is a flawed design.
Why would one think that ALL properties of type double or float in grid models should be truncated to 2 decimal places (when my region is set to US and that is the default)?
This seriously limits property values. Not everything is a dollar and cent value! The region setting I believe is for how to format general currency values perhaps (I am not exactly sure what it is for, because there is a different tab for 'Currency' with a 'No. of digits after decimal' setting as well as the tab for 'Numbers' having the same thing. But this does not mean that Windows always formats numbers that way.
Suppose for example I have a property in my model named "Weight" (expressed in terms of pounds). The value 150.12345 (pounds) is perfectly valid. It should not be truncated to 150.12. Or another, "Length" (expressed in terms of Feet): 17.0625 (that's 17 feet, 1 inch) - should not be morphed into 17.06.
To work around this, developers currently either have to override a <GridColumn>'s <EditorTemplate> and place a <TelerikNumericTextBox> element bound to the same property that the <GridColumn> is, and explictly set the Decimals property themselves.
Or what I have found is a better workaround, although not desirable to have to do this at all, is to put this kind of code snippet in the Program.cs file, right after the line var app = builder.Build();
app.UseRequestLocalization(action =>
{
var currentCulture = CultureInfo.CurrentCulture.Clone() as CultureInfo;
currentCulture!.NumberFormat.NumberDecimalDigits = 10; // for example, to allow this many decimal places in everything numeric
var cultures = new List<CultureInfo>() { currentCulture };
action.SupportedCultures = cultures;
});
Please remove the default value for the Decimals property being tied to the culture. It should just allow as many decimal places as a normal float or double would allow for its precision. Perhaps just allow a developer to set it and honor that, but if not set, basically let it be unlimited, just like the number of digits to the left of the decimal point.
Hello there,
I encountered an issue with the TelerikForm component after upgrading Telerik.UI.for.Blazor from version 4.0.1 to 4.4.0. In the code below I have placed the two form items in a Bootstrap grid:
<TelerikForm Model="@person">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidation>
<FormItems>
<div class="row">
<div class="col-md-6">
<FormItem Field="@nameof(Person.Id)" LabelText="Id"></FormItem>
</div>
<div class="col-md-6">
<FormItem Field="@nameof(Person.FirstName)"
EditorType="@FormEditorType.TextArea"
LabelText="First name">
</FormItem>
</div>
</div>
</FormItems>
</TelerikForm>
With version 4.0.1, the two fields were displayed in two columns within the form element. However, with version 4.4.0, I noticed that the HTML code, specifically the div elements, are now rendered outside of the form element. The HTML structure looks like this:
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<form class="k-form telerik-blazor k-form-md" dir="ltr" style="">
<div class="k-form-field">
<label class="k-label k-form-label" for="a6cc8103-4d52-4377-8656-169e4a3de33a">
Id
</label>
<div class="k-form-field-wrap">
......
I wanted to check with you if this change is intentional or if it might be a bug with the TelerikForm component in the latest version.
Best regards,
Ivaylo
Unexpected scroll behaviour is seen after selecting an item in a DropDownList/Multiselect with a scroll mode set to virtualise. We are unable to easily scroll upwards using the scroll bar in the control or using a mouse/trackpad. The scroll position immediately snaps back to the selected item. Sometimes we are able 'escape' this by rapidly scrolling but this does not feel like intended behaviour.
Downward scrolling seems okay and using the keyboard arrow keys also seems unaffected. This is reproducible on the demo page: Blazor DropDownList - Virtualization - Telerik UI for Blazor and https://docs.telerik.com/blazor-ui/components/multiselect/virtualization.
Reproduction steps on Chrome:
Minimal reproducible example: Blazor MultiSelect - Virtualization - Telerik UI for Blazor
In a cascading parent/child scenario (both DropDownLists), the args.Request.Skip property in the child's OnRead handler is not reset after rebinding the child data from the OnChange of the parent. This is a problem when the Skip is larger than the total amount of child items that are available from the back-end for the new parent. The api that is called in the OnRead handler returns nothing when for example the Skip still is 15 and there are only 10 items available.
I tried many things (in many different orders) to clear the child's state properly:
- set the model property which is bound to the child to it's default value
- called StateHasChanged()
- played around with Task.Delay
- set the child's value to it's default value
- set the child's Data property to null
- set the child's Data property to an empty list
- called child.Refresh()
- called child.Rebind()
- even tried to use reflection to reset the private proteced Skip property
Sort of a workaround:
In the OnRead handler after the api call compare the total item count with the skip and refetch with skip = 0 when skip > total item cound. This gives me the data I need but it is still shown at the old Skip position (with a buch of empty lines before that).
This bugreport (https://feedback.telerik.com/blazor/1558042-cascading-virtual-dropdownlist-does-not-reset-scrollbar) seems similar. In a response we are advised to clear the scrollbar position maually (which sounds a bit like the Skip position).
Please advise on how to reset the state manually because I don't see how. And if this is not possible, please add some functionality to do so. Perhaps something like the DataGrid's GetState, SetState methods?
Regards,
Harmen
We have had major complaints from users when using the combo box. They use the filter, see the first item highlighted, then click tab and the item in not selected. They do a lot of data entry and don't want to use the mouse or use the down arrow to select it. They are used to a regular HTML select control which works that way. Is there any Javascript workaround for this? If not, I probably have to go back to using a standard select box. The reason I am using the combobox and not the dropdown is because your dropdown doesn't support tabbing out of the box and that was a deal breaker for them.
I saw an article on using the PopupClass for the ComboBox but that isn't a supported property.
Thanks!
After the update
we're having this issue when trying to build our project.
The needed nuget package it's already added and even adding the Telerik.DataSource as a package that's not needed in theory we're not able to build.
Error CS0012 The type 'CompositeFilterDescriptor' is defined in an assembly that is not referenced. You must add a reference to assembly 'Telerik.DataSource, Version=2.1.3.0, Culture=neutral, PublicKeyToken=29ac1a93ec063d92'.
Title: WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them (#\39 374a450-079d-4586-b823-d6bc7723505f)
Tags: Accessibility, WCAG 1.3.1, aria-required-children
Issue: Ensures elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)
Target application: Hermes Home - https://localhost/TrafficLoss
Element path: #\39 374a450-079d-4586-b823-d6bc7723505f
Snippet: <div class="k-grid-aria-root" id="9374a450-079d-4586-b823-d6bc7723505f" role="grid" aria-label="Data table">
How to fix:
Fix any of the following:
Element has children which are not allowed (see related nodes)
Element has no aria-busy="true" attribute
Environment: Microsoft Edge version 111.0.1661.41
====
This accessibility issue was found using Accessibility Insights for Web 2.37.3 (axe-core 4.6.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.
============================ code =============================
<TelerikGrid Data="@ViewModel.RDLInformation" TItem="TLSummary"
Pageable="true"
Sortable="true"
Groupable="false"
FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
Resizable="true"
Reorderable="true"
Height = "100%">
....
</TelerikGrid>
Title: WCAG 4.1.2: Ensures elements with ARIA roles have all required ARIA attributes (.k-splitbar)
Tags: Accessibility, WCAG 4.1.2, aria-required-attr
Issue: Ensures elements with ARIA roles have all required ARIA attributes (aria-required-attr - https://accessibilityinsights.io/info-examples/web/aria-required-attr)
Target application: xxx
Element path: .k-splitbar
Snippet: <div tabindex="0" role="separator" class="k-splitbar k-splitbar-vertical k-splitbar-draggable-vertical">
How to fix:
Fix any of the following:
Required ARIA attribute not present: aria-valuenow
Environment: Microsoft Edge version 111.0.1661.41
====
This accessibility issue was found using Accessibility Insights for Web 2.37.3 (axe-core 4.6.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.
=================== code ===============================
<TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top" @ref="@TabStrip" Height="100%">Windows 11 Pro Version 22H2 OS build 22621.674
Chrome Version 106.0.5249.119 (Official Build) (64-bit)
Edge Version 106.0.1370.52 (Official build) (64-bit)
NVDA Version 2022.3.1
NVDA is announcing separator along with value like "50 ".
Narrator is announcing as "Seperator".
Changing page size triggers multiple read requests.