After update to 3.0.0 TextArea autosize no longer works.
AutoSize is no longer one of the available properties.
Also Label is no longer an available property.
Hi Team,
We are using Telerik Modal popup on the GridView edit click button.
This Modal Window moves out of the screen when user clicks on popup header click when there is a vertical page scrollbar and the scroll position is not top.
Can you please fix this bug? We implemented your workaround, but using that workaround with below link, after opening the popup, below screen automatically scrolls on top. This is not good user experience on lengthy page.
Expectation : Page scroll should stay with the previous position after opening the popup with scrollbar.
Thanks,
Aarti Tare
I have a telerikdropdownlist in the EditorTemplate of a Grid. If a user uses the keyboard to speed the navigation of the dropdown (for example: they type a T to immediately scroll to the T section), then clicks on a selection further down in the list, the selected item becomes the item navigated to via the Keyboard, not the item that is actually clicked on. Clicking on an item (without using the keyboard navigation first) works as expected. I was able to replicate this behavior in REPL using the following code:
<br />
<br />
<TelerikDropDownList
Data = "@People"
@bind-Value="@SelectedUser"
TextField="LastFirst"
ValueField="Id"
Width="400px"
/>
<br />
<br />
<TelerikGrid
Data="@Assets"
EditMode="GridEditMode.Inline"
Width="800px"
OnUpdate="@Update"
>
<GridColumns>
<GridColumn Field="@nameof(Asset.AssetId)" Title="ID" Width="50px"/>
<GridColumn Field="@nameof(Asset.BarCode)" Title="BarCode" Width="125px"/>
<GridColumn Field="@nameof(Asset.UserId)" Title="User" Width="125px">
<Template>
@{
CurrentAsset = (Asset)context;
Person? p = People.FirstOrDefault<Person>(x => x.Id == CurrentAsset.UserId);
if(p != null)
{
<span>@p.LastFirst</span>
}
}
</Template>
<EditorTemplate>
@{
CurrentAsset = (Asset)context;
<TelerikDropDownList
Data = "@People"
@bind-Value="@CurrentAsset.UserId"
TextField="LastFirst"
ValueField="Id"
/>
}
</EditorTemplate>
</GridColumn>
<GridCommandColumn Width="100px" Locked="true">
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true"></GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit"></GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true"></GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
<br />
@code {
public List<Person> People = new();
public List<Asset> Assets = new();
int SelectedUser = 0;
Asset CurrentAsset = new();
protected override void OnInitialized()
{
LoadData();
base.OnInitialized();
}
public void LoadData()
{
People.Add(new Person(1, "Brent", "Tuominen"));
People.Add(new Person(2, "Tina", "Tuominen"));
People.Add(new Person(3, "Casey", "Tuominen"));
People.Add(new Person(4, "Ryan", "Tuominen"));
People.Add(new Person(5, "Alex", "Tuominen"));
Assets.Add(new Asset(1, "BC001"));
Assets.Add(new Asset(2, "BC002"));
Assets.Add(new Asset(3, "BC003"));
Assets.Add(new Asset(4, "BC004"));
Assets.Add(new Asset(5, "BC005"));
}
public void Update(GridCommandEventArgs args)
{
Asset a = (Asset)args.Item;
Asset? asst = Assets.FirstOrDefault(x => x.AssetId == a.AssetId);
if(asst != null)
{
asst.BarCode = a.BarCode;
asst.UserId = a.UserId;
}
StateHasChanged();
}
public class Asset
{
public Asset()
{
}
public Asset(int assetId, string barcode)
{
AssetId = assetId;
BarCode = barcode;
}
public int AssetId{ get; set; }
public string BarCode { get; set; } = string.Empty;
public int? UserId{ get; set; }
}
public class Person
{
public Person(int id, string fName, string lName)
{
Id = id;
FirstName = fName;
LastName = lName;
}
public int Id{ get; set; }
public string FirstName { get; set; } = string.Empty;
public string LastName { get; set; } = string.Empty;
public string LastFirst
{
get
{
return LastName + ", " + FirstName;
}
}
public string FullName
{
get
{
return FirstName + " " + LastName;
}
}
}
}
When testing your datepicker control in NVDA, there are a number of accessibility issues.
- The dateinput portion of the control does not account for users entering full dates into the control, meaning if a person was to try to type 2/23/2022 into the input where they included the slashes, it would throw them into the year section when they thought they were entering the day section. My suggestion via this forum link (https://www.telerik.com/forums/ignore-forward-slash-allow-various-formats-when-using-date-input) is to alter your date entry logic to allow users to both enter the dates without the slashes (which is what you have now except under a few edge cases where a slash is needed to move to the next section like 2 2/ 2022) as well as include the slashes where if the user is on the first digit of the day section and the / is pressed, do NOT advance them to the year section. While this can be an annoyance for a sited user because they end up accidentally entering the day in the year section when they try to use the slashes, they can at least see what went wrong, and then go back and fix it. For a screen reader user, they are not notified of the auto advancement, and so they have no idea that they have entered an invalid date until the leave the control and then tab back to it, or if they were to try to submit the form and get an error.
- The dropdown portion of the control is not being read properly by NVDA. When you first drop it down via alt-down arrow, it will actually write all of the table text to the Speech Viewer window, but nothing is read.
- Then, once you try to arrow to a date, nothing is read at all. You can tab to the month and previous/next buttons and they are read.
- Opening the Month section of the dropdown doesn't read the month out when arrowing through the months.
- Tabbing to the previous or next buttons and then pressing them with enter reads all of the dates in the table.
- Arrowing up or down within the days reads all of the dates in the table when it advances to a new month, but reads nothing otherwise.
I am using the latest version of NVDA 2021.3.3 on Chrome Version 98.0.4758.82 (Official Build) (64-bit). I will note that Jaws and Chrome work properly regarding the dropdown issues, so it may be an NVDA thing, but maybe some research can be done to see if there are some different aria attributes that will work so that if functions properly with both screen readers. For example this Aria Best Practices Date Combo Box example at least reads where the user is with the arrow keys. https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-datepicker.html It is not perfect, but it is better than not being read at all.
And even outside of the date dropdown stuff, the date input portion (#1) above is an issue across the board. I know that it is a design decision that you guys have made, and that you have provided documentation as to why and how to use it, but most users are going to type in the slashes of a date, and it's not reasonable to write up a half page of documentation within my app to let users know how to use the control. I can't even put a short label that says enter date without slashes, because under some circumstances a slash is necessary, so it becomes confusing to the user, and screen reader users will get lost if they make a mistake because they are not informed that they have just switched to a different section.
Thanks.
With an item selected, I want to reset the drop down list to the state it has when the page loads, i.e. populated with nothing selected.
Setting the backing filed to zero does not work. I have read Clear the selection, I know it works if you have a default text,
I dont't want to have a default text.
As you can see in the repl, there's some more experiments, since I thought I could maybe clear the content and re-populate
the list to reset it.
Setting the data source to null does nothing?!?!
Clearing the data source removes the items in it, but keeps the selected value!?!?
I've seen answers to this question that suggests using CSS to achieve this, but that's just stupid and shouldn't be necessary.
Finally, we have the hack solution, which is totally crazy but seems to work.
I leave it here for others to see, since it seems a lot of people also have this problem.
Please fix this.
Checking a checkbox of a on demand-loaded child then collapsing and reopening its parent makes the checkbox disappear. However, it is still checked in the CheckedItems collection, but just not in the UI. See this REPL example. Steps...
1. Expand a top level item
2. Check its child checkbox
3. Collapse the top level item
4. Expand it again
Result: checkbox gone (in the UI)
Hi, we are using a tile layout for charts and are having an issue where the tooltips for the second row of tiles are appearing at the bottom of the screen away from the chart or not at all. Then when we scroll back to the first row of tiles the tool tips are out of alignment as well. The following screen shot shows an example.
We have a component that has a tab strip and the tile layout with the following code
<TabStripTab Title="@tabName">
@((MarkupString)tabHeading)
<TelerikTileLayout Columns="6"
RowHeight="225px"
ColumnWidth="285px"
Reorderable="true"
Resizable="true"
OnResize="@ItemResize"
OnReorder="@ItemReorder"
@ref="@TileLayout">
<TileLayoutItems>
@foreach (CustomChartViewModel chart in tab.Charts)
{
int colSpan = 2;
int rowSpan = 2;
<TileLayoutItem RowSpan="@rowSpan" ColSpan="@colSpan">
<HeaderTemplate>
<div style="text-align: right">
<TelerikButton OnClick="@(() => onDeleteChart(chart.Id, tab.Id))">X</TelerikButton>
</div>
</HeaderTemplate>
<Content>
<ChartComponent ViewModel="@chart" @ref="@charts[chart.Id]" />
</Content>
</TileLayoutItem>
}
</TileLayoutItems>
</TelerikTileLayout>
</TabStripTab>And then a chart component that renders the individual charts with a tooltip
<TelerikChart @ref="@ChartRef" Height="100%" Width="100%" OnSeriesClick="@OnSeriesClickHandler">
<ChartTooltip Visible="true">
<Template>
<TelerikIcon Icon="information" />
@(context.Percentage.ToString("P", nfi))<br />
@((context.DataItem as MyDataModel).toolTip)
</Template>
</ChartTooltip>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Donut" Data="@Data" Field="value" CategoryField="category" ColorField="color">
<ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
Visible="@ViewModel.ShowLabels"
Background="transparent"
Template="#= category #: #= value#">
</ChartSeriesLabels>
</ChartSeries>
</ChartSeriesItems>
<ChartTitle Text="@ViewModel.Name"></ChartTitle>
<ChartLegend Position="ChartLegendPosition.Bottom" Visible="@ViewModel.ShowLegend"></ChartLegend>
</TelerikChart>
After the upgrade to 3.0 the auto size feature of TextArea when used inside the Window component no longer works.
I just updated to Telerik.UI.for.Blazor 2.30.0 and the grid search boxes look a little screwy. Not a huge deal but thought I would report it.
If you are in edit mode using InCell, clicking somewhere else inside or outside the Grid should fire OnUpdate if the item is valid. However, if you click on some customly added element in the Grid (e.g. button, icon, dropdown) this will not fire OnUpdate for a valid item.
In Incell edit, clicking anywhere besides the edited cell should fire OnUpdate for a valid input.
When you have a TelerikNumericTextBox bound to a non nullable field (like int test) it will display a 0 like this which is correct
But when you start changing the value, that initial 0 will still remain like (1234 entered)
It will however sort itself out once you leave the field
But it is still confusing to users and also makes then try to remove the initial 0.
The initial 0 should not be displayed when user has switched focus to a field and started entering text. This problem does not seem to happen if you have already entered a value and revisit the textbox.
Ideally formatting (in this case currency) should also be displayed when in Edit but that is perhaps another topic.
Thanks.
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true" Title="Some text here">Some text here</GridCommandButton>Update and Cancel GridCommandButtons do not honor Caption when using PopUp edit forms.
The "Some text here" will show up as name of button in Inline editing but not in Popup form editing where the default Save button will instead be shown.
Maybe I'm doing it wrong...
I have a Telerik Window that is modal=true
Within the Telerik Window, I have a component... and within that component, other components.
I want to post a TelerikDialog. "Do you want to save changes?"
If I add it to the component, it appears behind the main modal.
If I add it to the main Telerik Window, it doesn't appear at all.
How do you show a TelerikDialog on a TelerikWindow that is modal?
-Bert
Hello,
first of all, thank you for relelasing Dialog, it is what we are "simulating" by modal Window on any kind of heavy data editing app,again and again and again :) .
The problem is,
- when you put DropDownList in Dialog, using OnRead async task event, the UI is still "empty". => Iam fiddled with reassigning datasource, changing order of assigning source, nothing helped.
- same dropdownlist scenario inside window, working/displayed as expected.
Steps to reproduce:
1) click on then button to show window by -> async task
2) event OnRead of the dropdownlist is correctly called, data to the IEnumerable<model> is loaded
3) window appear, but DropDownList is empty
4) when you filter by typeing inside DropDownList, OnRead is called and model populated, but GUI is still empty
What doesnt worked:
- statechaned, reassign datasource, clear datasource, task delay
What partially worked:
- OnRead=> async Task changed to just: OnRead=> Task
Thanks for info what should be made done else.
Stripped sample:
<TelerikButton @onclick="@(() => ParamEd(4444, null))">open window or dialog</TelerikButton>
<TelerikWindow Modal="true" @bind-Visible="@ShowEditWindow" Draggable="true">
<WindowTitle>
<strong>@ShowEditWindowCaption</strong>
</WindowTitle>
<WindowContent>
<TelerikDropDownList @bind-Value="@CurrentEdit.ValTxt"
ScrollMode="@DropDownScrollMode.Virtual"
Data="@CurrentEdit.ComboSource"
OnRead="@ReadComboData"
ItemHeight="30"
TotalCount="@Paging.CNT"
PageSize="14"
PopupHeight="400px"
TextField="Nazev1"
ValueField="KeyVal"
Filterable="true"
FilterOperator="StringFilterOperator.Contains">
</TelerikDropDownList>
....
vs
<TelerikDialog @bind -Visible="@ShowEditWindow" Title="@ShowEditWindowCaption" CloseOnOverlayClick="false">
<DialogContent>
<TelerikDropDownList @bind-Value="@CurrentEdit.ValTxt"
ScrollMode="@DropDownScrollMode.Virtual"
Data="@CurrentEdit.ComboSource"
OnRead="@ReadComboData"
ItemHeight="30"
TotalCount="@Paging.CNT"
PageSize="14"
PopupHeight="400px"
TextField="Nazev1"
ValueField="KeyVal"
Filterable="true"
FilterOperator="StringFilterOperator.Contains">
</TelerikDropDownList>
....
@code{
public NotificationBase Notification { get; set; }
[CascadingParameter]
public DialogFactory Dialogs { get; set; }
//clicked on the button to show window/dialog:
async Task ParamEd(int xtyp, object it)
{
await Task.Delay(500);//await load captions... and THEN open window:
ShowEditWindowCaption = "window title";
ShowEditWindow = true;
}
async Task ReadComboData(DropDownListReadEventArgs e)
{
try
{
var r = await readDBDATA...
//CurrentEdit.ComboSource = new List<EdBase>();
//CurrentEdit.ComboSource = null;
//CurrentEdit.ComboSource = new IEnumerable<EdBase>(r);
//CurrentEdit.ComboSource = await ReadDBDATA
CurrentEdit.ComboSource = r;
Paging.CNT = p.Get<int>("CNT");
/*
//!! HOTFIX FROM ANOTHER BUG(show selected data) - ReAssign data(but id doesnt impact result):
string v = CurrentEdit.ValTxt;
int? i= CurrentEdit.ValInt;
CurrentEdit.ValTxt = string.Empty;
CurrentEdit.ValInt = null;
StateHasChanged();
//await InvokeAsync(() => StateHasChanged());
CurrentEdit.ValTxt = v;
CurrentEdit.ValInt = i;
//CurrentEdit.ValTxt = CurrentEdit.ValTxt;
//StateHasChanged();
*/
}
catch (Exception ex)
{
Notification.ShowSQLErr(ex.Message);
}
}
//PARTIALLY WORKING, but not filtering:
Task ReadComboData(DropDownListReadEventArgs e)
{
try
{
var r = readDBDATA...
CurrentEdit.ComboSource = r;
Paging.CNT = p.Get<int>("CNT");
}
catch (Exception ex)
{
Notification.ShowSQLErr(ex.Message);
}
}
}
This might not be considered a bug but since this behavior changed when we upgraded to 3.0, it might be considered as such unless there is no documentation about this (we have not been able to find it). I am still unsure where we are to just ask support questions, as the feedback portal seem to force us into either choosing feature or bug.
After upgrading to Telerik Blazor 3.0, the captions are suddenly above the fields and no longer to the left of them. This might be preferable in some cases, but it should then be something you enable/change yourself.
How can we control this behavior (probably via CSS)?
Is it perhaps a way we can also control so that the grids popup form gets more compact, like perhaps displaying the fields in two columns instead of the default of just one?
Thanks.
---
ADMIN EDIT
The following should let the multiselect render above the custom yellow element, but it does not. A workaround is available as the second CSS snippet that you can uncomment.
<style>
/*should work but does not*/
.high-zindex {
z-index: 124;/*note how this is higher than the z-index of the div element, and is higher than the default z-index of the component*/
}
/*workaround*/
.k-animation-container {
z-index: 15000;
}
</style>
<div style="position: absolute; z-index: 123; width: 600px; height: 200px; background: yellow;">
<TelerikMultiSelect Data="@Countries"
@bind-Value="@Values"
Placeholder="Enter Balkan country, e.g., Bulgaria"
ClearButton="true" AutoClose="false"
PopupClass="high-zindex">
</TelerikMultiSelect>
</div>
@code {
List<string> Countries { get; set; } = new List<string>();
List<string> Values { get; set; } = new List<string>();
protected override void OnInitialized()
{
Countries.Add("Albania");
Countries.Add("Bosnia & Herzegovina");
Countries.Add("Bulgaria");
Countries.Add("Croatia");
Countries.Add("Kosovo");
Countries.Add("North Macedonia");
Countries.Add("Montenegro");
Countries.Add("Serbia");
Countries.Add("Slovenia");
base.OnInitialized();
}
}---