Description:
'Selected' state is not defined for 'Pagination controls' in entire page.
Environment (OS, Application, Versions):
OS: Windows_11
Version: 21H2
OS Build: 22000.856
Browser: Microsoft Edge Version 105.0.1343.33 (Official build) (64-bit)
URL: https://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx
Screen Reader: NVDA(2022.2)
Repro Steps:
1. Open URL:https://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx page in Edge Browser.
2. Navigate to pagination controls present below "Book A Car' table under 'Overview'.
3. Open NVDA.
4. Navigate to 'Selected button' on pagination controls.
5. Observe an issue that 'Selected' state is not defined for 'Pagination controls'.
Actual Result:
'Selected' state is not defined for 'Pagination controls' in entire page.
Expected Result:
State 'Selected' should be defined on pagination controls. In this case, the expected role is {button or has a pop-up}. All components need a proper role attribute, ideally with semantics. In rare cases a role attribute should be added to give full context and information to assistive technology. Learn more by reading about when to use an aria role and the html/aria role mappings.
When EnableAriaSupport is enabled for the RadGrid, the PagerItem receives role='presentation' and hence is ignored by the screenreaders.
I have enabled aria settings for the treeview control, but when I am trying to navigate via key board it announces some thing like {level} {selected value/text} {checked/not checked} or {selected value/text} {checked/not checked} {level},
I don't want {checked/not checked}, to be announced.
Using attached Visual Studio project....
Steps to re-create:
1) Draw line on image with pencil
2) Clear all changes
3) Draw another line with pencil. Upon releasing mouse button RadDiagram loses image and just shows checkerboard.
Demo project attached.
Happens in Chrome, but not in Firefox.
Seems to occur regardless of Telerik version.
I would like to request the RadRadioButtonList's get_oldSelectedIndex method used in the OnSelectedIndexChanged event should return -1 instead of undefined when no item is selected.
Thank you!
Test Environment:
OS: Windows_11URL: https://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx
Screen Reader: NVDA (2021.3)
Repro Steps:
1. Open URL https://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx page in edge browser and turn on NVDA.
2. Navigate to table by using Tab key.
3. Observe that screen reader is announcing clickable when focus lands on table.
Actual Results:
Screen reader is announcing clickable when focus lands on table.
Expected Results:
The screen reader should only read relevant information once for each item.
While working on pivot grid, we observe that the filtering condition is applied. But there is no visual indicator showing that the current pivot has applied a filtering condition on a given column.
For instance, the following captured picture is obtained from the demo page. I selected Beverages in the "Category" filter and applied it to the pivot grid.
However, there is no visual clue to tell me how many filtering columns are been used at the moment.
Here is how the filtered and non-filtered fields appear in MS Excel:
Hi,
I wanted to implement RadComboBox combined with checkboxes and load on demand approach.
However, this page explained it is not possible and advised to use RadMultiSelect with Virtualization
https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/functionality/checkbox-support
I checked the page and demo is explained via web service...
Is there a demo where it would be explained that when I type e.g. 3 characters some function would be called (e.g. OnItemsRequested) and in the server I would call database and fill the required data ? We don't have web service for providing the data... In code-behind we always access databases.
Thanks,
Peter
With a lot of columns, in some cases, the latest column is clipped in a zoomed OS. For example, resolution 1920x1080 and the scale is 150% or 3840 x 2160 and the 150% scale.
Adding the following script somewhere after the ScriptManager(e.g. near the closing </form> or </body> tag) can improve the experience with zoomed scenarios:
<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
<script>
if (Telerik && (Telerik.Web.Browser.chrome || Telerik.Web.Browser.edgeChromium) && Telerik.Web.UI.GridScrolling) {
Telerik.Web.UI.GridScrolling.prototype.onGridFrozenScroll = function (args) {
if (!this._frozenScrollCounter) {
this._frozenScrollCounter = 0;
}
this._frozenScrollCounter++;
this._needToUpdateClientState = false;
var gridControl = this;
gridControl._currentElement = Telerik.Web.UI.Grid.GetCurrentElement(args);
Telerik.Web.UI.Grid.frozenScrollHanlder = function (count) {
var operaVersion = 10.00;
if ($telerik.isOpera) {
operaVersion = navigator.userAgent.substring(navigator.userAgent.indexOf("Version/") + "Version".length + 1) * 1;
}
if (gridControl._frozenScrollCounter != count || gridControl._owner._isResize)
return;
if (!gridControl._lastScrollIndex) {
gridControl._lastScrollIndex = 0;
}
var masterTableView = gridControl._owner.get_masterTableView();
var masterTableViewHeader = gridControl._owner.get_masterTableViewHeader();
var currentElement = gridControl._currentElement;
if (gridControl._owner.ClientSettings.Scrolling.FrozenColumnsCount > masterTableViewHeader.get_columns().length) {
gridControl.isFrozenScroll = false;
}
var column, i;
if (gridControl.isFrozenScroll) {
var notFrozenColumns = gridControl._getNotFrozenColumns();
var scrollPercent = 0;
var notShownSpaceWidth = -1;
var currentElementWidthDiff = currentElement.scrollWidth - currentElement.offsetWidth;
if ((currentElementWidthDiff) != 0)
notShownSpaceWidth = currentElementWidthDiff;
scrollPercent = currentElement.scrollLeft / notShownSpaceWidth;
if (scrollPercent < 0)
scrollPercent = -1 * scrollPercent;
if (scrollPercent > 1)
scrollPercent = 1;
if (Telerik.Web.UI.Grid.IsRightToLeft(gridControl._owner.GridHeaderDiv) && ($telerik.isSafari || $telerik.isIE7))
scrollPercent = 1 - scrollPercent;
var gridColumns = masterTableView.get_columns();
var currentScrollPosition = currentElement.scrollLeft;
i = 0;
while (i < notFrozenColumns.length)//always show the last column
{
column = notFrozenColumns[i];
var prerviousForzenDisplayWidth = notFrozenColumns._getPreviousNotFrozenColumnWidth(column.Index);
if ((currentElementWidthDiff) < 0)
break;
var columnPercent = (column.Width + prerviousForzenDisplayWidth - 50) / notShownSpaceWidth;
if (columnPercent <= scrollPercent && currentScrollPosition != 0) {
if (column.FrozenDisplay) {
masterTableViewHeader._hideNotFrozenColumn(column.Index);
}
}
else {
if (!column.FrozenDisplay) {
masterTableViewHeader._showNotFrozenColumn(column.Index);
}
}
i++;
if (i == (notFrozenColumns.length - 1)) {
var prevWidthBeforeLastHidden = 0;
var lastHiddenColumnIndex = 0;
var k = 0;
for (var j = 0; j < gridColumns.length - 1; j++) {
if (typeof (gridColumns[j].FrozenDisplay) == 'boolean' && !gridColumns[j].FrozenDisplay) {
prevWidthBeforeLastHidden += notFrozenColumns[k].Width;
k++;
lastHiddenColumnIndex = j;
}
}
if ((prevWidthBeforeLastHidden - notShownSpaceWidth) < notFrozenColumns[notFrozenColumns.length - 1].Width + 25) {
if (scrollPercent < 0.5) {
var nextColumnToHide = notFrozenColumns[notFrozenColumns.length - 1];
masterTableViewHeader._hideNotFrozenColumn(nextColumnToHide.Index);
} else {
var nextColumnToHide = notFrozenColumns[k];
masterTableViewHeader._hideNotFrozenColumn(nextColumnToHide.Index);
}
}
}
}
gridControl._afterColumnFreeze(masterTableView, masterTableViewHeader, scrollPercent);
if (scrollPercent > 0.9999 && $telerik.isFirefox) {
masterTableViewHeader.get_element().style.width = masterTableViewHeader.get_element().offsetWidth + "px";
masterTableViewHeader.get_element().style.tableLayout = "auto";
masterTableViewHeader.get_element().style.tableLayout = "fixed";
masterTableView.get_element().style.width = masterTableViewHeader.get_element().offsetWidth + "px";
masterTableView.get_element().style.tableLayout = "auto";
masterTableViewHeader.get_element().style.tableLayout = "";
setTimeout(
function () {
if ($telerik.isFirefox && Sys.Browser.version >= 4)
masterTableView.get_element().style.tableLayout = "fixed";
masterTableViewHeader.get_element().style.tableLayout = "auto";
masterTableViewHeader.get_element().style.tableLayout = "fixed";
},
100);
}
if (gridControl._owner.get_masterTableViewFooter()) {
gridControl._owner.get_masterTableViewFooter().get_element().style.width = masterTableViewHeader.get_element().offsetWidth + "px";
gridControl._owner.get_masterTableViewFooter().get_element().style.tableLayout = "auto";
gridControl._owner.get_masterTableViewFooter().get_element().style.tableLayout = "fixed";
}
}
else {
gridControl._owner.GridDataDiv.scrollLeft = currentElement.scrollLeft;
}
/////////////////////////////////////
gridControl._frozenScrollCounter = 0;
gridControl._needToUpdateClientState = true;
//gridControl._owner.updateClientState();
setTimeout(Telerik.Web.UI.Grid._clientStateUpdater, 500);
if (gridControl._owner.get_events().getHandler("scroll")) {
gridControl._owner.raise_scroll(new Telerik.Web.UI.GridScrollEventArgs(gridControl._currentElement));
}
};
Telerik.Web.UI.Grid._clientStateUpdater = function () {
if (gridControl._needToUpdateClientState) {
gridControl._needToUpdateClientState = false;
gridControl._owner.updateClientState();
}
};
clearTimeout(window.frozenScrollTimeout);
window.frozenScrollTimeout = setTimeout("Telerik.Web.UI.Grid.frozenScrollHanlder(" + this._frozenScrollCounter + ")", 30);
}
}
</script>
</telerik:RadCodeBlock>
When AJAX is enabled for the Grid with the <PagerStyle Mode="Advanced"> or <PagerStyle Mode="NextPrevNumericAndAdvanced"> the Go To Page by Number and Change Page Size Bugtons would not work.
On the other hand, if changing the Page or PageSize by typing and hitting the ENTER key instead of clicking the buttons, the Grid will behave accordingly.
Issue appears in RenderMode="Lightweight"
1. Visit the RadEditor demo at https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx (I used Google Chrome.) 2. In the HTML view, replace the entire demo text with This <strong>strange</strong> thing 3. In the Design view, place the cursor at the very end of the line, and press Shift+Left repeatedly. a. At first it will highlight the final letter correctly. b. Then it will UNHIGHLIGHT the final letter! c. Then it will begin highlight more letters again starting from the letter BEFORE the final letter. d. Then, after highlighting the “e” in strange, it will being UNHIGHLIGHTING starting from the righthand side of the selection! e. Then it will highlight left as far as the “s”. f. Then it will start UNHIGHLIGHTING from the right again! g. Then highlighting the space to the left h. Then UNHIGHLIGHTING the space to the left! i. Then highlighting to the left as far as the beginning of the line j. Then UNHIGHLIGHTING from the right side of the selection! Pressing Shift+Left and Shift+Right should always modify only one end of the selection, and the other end should always remain where the selection was started. This is how Windows Notepad and virtually all other applications behave.
Steps to replicate the issue:
- Enable Virtualization
- Enable Paging
- Enable Scrolling
- Enable Sorting
- Bind enough data for a few pages
- Run the page and in the Pager click on a different page number to change the current Page
- Click on the Column header to Sort that Column
Observe: The Grid makes a PostBack and sorts the items, CurrentPage index gets reset back to 1.
I would like to implement a list picker with item grouping in the destination Asp.Net RadListBox.
Unfortunately the Telerik Asp.net RadListBox control does not seem to support item grouping natively. I have seen a forum post from 2019 that suggests adding custom group items https://www.telerik.com/forums/subheadings-in-radlistbox We could do this but would prefer a more native solution.
When EnableLinqGrouping is set to True (default) Group Aggregates do not have Case sensitive calculations.
Code to replicate the issue
<telerik:RadListBox
RenderMode="Lightweight"
runat="server"
ID="RadListBoxSource"
AllowTransfer="true"
TransferToID="RadListBoxDestination"
ButtonSettings-AreaWidth="35px">
<EmptyMessageTemplate>
empty message
</EmptyMessageTemplate>
</telerik:RadListBox>
<telerik:RadListBox
RenderMode="Lightweight"
runat="server"
ID="RadListBoxDestination"
ButtonSettings-AreaWidth="35px">
<EmptyMessageTemplate>
empty message2
</EmptyMessageTemplate>
</telerik:RadListBox>
Set up to reproduce:
<telerik:RadToggleButton ID="RadToggleButton1" runat="server" Text="RadToggleButton">
<ConfirmSettings ConfirmText="Sure?" />
<ToggleStates>
<telerik:ButtonToggleState Text="state1">
<Icon Url="supervisorIcon.png" />
</telerik:ButtonToggleState>
<telerik:ButtonToggleState Text="state2">
<Icon Url="ownerIcon.jfif" />
</telerik:ButtonToggleState>
</ToggleStates>
</telerik:RadToggleButton>