from this screenshot from the demo selecting a value via the keyboard leaves the box blank
to replicate press the down arrow when MultiColumnComboBox has focus
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
The DropDownList remains open after tabbing and does not fire. It also won't fire OnBlur and OnChange in this case. The problem occurs only if the component was opened by clicking exactly on its arrow.
Here is a test page: https://blazorrepl.telerik.com/cxEfFVPq042owTt616
The workaround is to wrap the component in a <span> that handles @onfocusout and closes the component programmatically: https://blazorrepl.telerik.com/cnafPCYL21aT3fpD05
Hello,
is there a way to use the kendo-popup from https://www.telerik.com/kendo-angular-ui/components/popup/ in Telerik UI for Blazor? Is it a planned feature for the future?
Thank you,
Christian
Hey,
Just reporting this as an active bug. If I have a nullable DateTime object, and I erased the date on the date time picker, it treats the date time field as invalid. I would expect it to be treated as valid.
Related thread: https://feedback.telerik.com/blazor/1582282-datepicker-should-accept-null-value-as-valid-when-bound-to-nullable-datetime
This is the razor page:
<TelerikDatePicker Id="@Id"Please add organizational chart control similar with
https://demos.telerik.com/aspnet-ajax/orgchart/examples/overview/defaultcs.aspx
Hi we are using blazor for mobile apps.
For image upload via Camera, we need features where by compressed images can be upload.
Also zoom in and zoom out features when we are showing at front end app
If I change the width of the scheduler component it doesn't move the events to the correct place
I am currentl looking at printing the Scheduler but I ran into this issue when trying to adjust the scheduler to fit on a page
Hi!
Please check the example:
https://blazorrepl.telerik.com/mdaIltlV32cFnMiX42
Why is predefined dialog put in to the back? This happens when i show predefined dialog from OnInitialize or AfterRendered method.
Regards, BoĊĦtjan
If you use the pager whether in the grid, or on its own and the total number of rows in the underlying data source exactly matches the selected page size, the drop down will be displayed as blank. This will only occur when there is no null "All" option in the list of page sizes. By the looks of it, I would guess that there is code to select "All" whenever the total matches the selected page size option, but it selects nothing when the "All" option isn't in the list. The functionality should select the page size that was selected by the user, not try to reset itself to All if the number of rows equals the page size. The following repl shows the bug:
https://blazorrepl.telerik.com/mxOIEBPW09nKgO9A35
When you run the repl, change the page size to 5, and then back to 10. You will see that the dropdown selects a blank item. It should stay with 10.
We have grids with the pager enabled. Some grids are within an EditForm.
The pager <button> elements do not have a "type" attribute, so clicking them causes the form to be submitted. They should be type="button" and not submit the form.
We do not use a GridPagerTemplate.
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!
I am trying to get the currently filtered data out of the grid as per this KB article and I want to include the searchbox filters. I do not, however, want to use OnRead but I want to get the grid state on a click of a button and get the filters plus the searchbox filters from it instead.
---
ADMIN EDIT
Here is a sample of getting those filters through the OnRead event without using remote operations - all the data is in the view model (the SourceData field) so this does not change the way operations happen compared to not using OnRead.
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
@( new MarkupString(output) )
<br />
<TelerikButton OnClick="@GetFilters">Get Filters</TelerikButton>
<TelerikGrid Data=@GridData TotalCount=@Total OnRead=@ReadItems
FilterMode=@GridFilterMode.FilterRow Sortable=true Pageable=true EditMode="@GridEditMode.Inline">
<GridToolBar>
<GridSearchBox />
</GridToolBar>
<GridColumns>
<GridColumn Field=@nameof(Employee.ID) />
<GridColumn Field=@nameof(Employee.Name) Title="Name" />
<GridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" />
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
TelerikGrid<Employee> GridRef { get; set; }
string output { get; set; }
public DataSourceRequest CurrentRequest { get; set; }
void GetFilters()
{
output = string.Empty;
foreach (var item in CurrentRequest.Filters)
{
if (item is FilterDescriptor) // filter row
{
FilterDescriptor currFilter = item as FilterDescriptor;
output += $"field: {currFilter.Member}, operator {currFilter.Operator}, value: {currFilter.Value}<br />";
}
if (item is CompositeFilterDescriptor) // filter menu
{
CompositeFilterDescriptor currFilter = item as CompositeFilterDescriptor;
output += $"START nested filter: logical operator: {currFilter.LogicalOperator}, details:<br />";
// there will actually be 1 or 2 only, this showcases the concept and the types
foreach (FilterDescriptor nestedFilter in currFilter.FilterDescriptors)
{
output += $"field: {nestedFilter.Member}, operator {nestedFilter.Operator}, value: {nestedFilter.Value}<br />";
}
output += "END nested filter<br />";
}
}
}
public List<Employee> SourceData { get; set; }
public List<Employee> GridData { get; set; }
public int Total { get; set; } = 0;
protected override void OnInitialized()
{
SourceData = GenerateData();
}
protected async Task ReadItems(GridReadEventArgs args)
{
CurrentRequest = args.Request;
var datasourceResult = SourceData.ToDataSourceResult(args.Request);
GridData = (datasourceResult.Data as IEnumerable<Employee>).ToList();
Total = datasourceResult.Total;
StateHasChanged();
}
//This sample implements only reading of the data. To add the rest of the CRUD operations see
//https://docs.telerik.com/blazor-ui/components/grid/editing/overview
private List<Employee> GenerateData()
{
var result = new List<Employee>();
var rand = new Random();
for (int i = 0; i < 100; i++)
{
result.Add(new Employee()
{
ID = i,
Name = "Name " + i,
HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20))
});
}
return result;
}
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime HireDate { get; set; }
}
}
---
I have a rather large TelerikForm that contains multiple TelerikTabStrip controls that contain FormItems. In the new version 4.1.0 the form items in the tabstrip do not display correctly and the form items not in the tabs are moved to the bottom of the page. The markup in a test project i created shows the tabstrip above and outside the form tag. Works correctly in 4.0.1. I've attached the test razor file.
It would be helpful to have a <WindowFooter> template inside Window, like <WindowTitle>, or <WindowContent> that stays 'sticky' to the window, so buttons and other content can be placed there , regardless on the height of the window and its contents.
Regards
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>
Description
When selecting a value via the keyboard, the input element is out of sync.
Reproduction (if bug)
1. Create a Combobox and populate it with data.
2. Trigger a change with the keyboard.
3. The value is updated but the input holds the old value and is out of sync.
REPL for reproduction:
https://blazorrepl.telerik.com/GnEnPZun00tsuQEA47
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 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%">