Hi,
The column headings read by JAWS are not great. I see that the rendered table headings have an aria-label attributes, but the text of these labels appears to match the DataField attribute of the grid column. Unfortunately, the DataField is often not the same as the human readable text displayed on the column header. This provides an inconsistent and sometimes confusing experience for screen reader users.
For example, if my data field is named something like full_name_with_title, but my column heading is actually "Full Name," the user will hear fullunderlinenameunderlinewithunderlinetitle, but we'd like them to hear "Full Name". All those underlines are confusing.
It would be much better if Telerik used the HeaderText attribute of the column instead of the DataField attribute. This would ensure that the presentational text and not the internal column names were read to the user.
A temporary workaround can be using the following OnGridCreated handler:
function OnGridCreated(sender, args) {
if (sender.get_enableAriaSupport()) {
sender.get_masterTableView().get_columns().forEach(function (col) {
var header = col.get_element();
var headerText = (header.textContent || header.innerText).replace(/^\s+|\s+$/g, '');
header.setAttribute("aria-label", headerText);
})
}
}
If the Chrome browser zoom is different from 100%, it is not possible to reorder the RadGrid columns. The problem can be reproduced at https://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/column-row-resize-reorder/defaultcs.aspx .
Requesting the improvement of this functionality to include scrolling.
Brief summary of the issue:
MultiCell selection uses a virtual marque tool to select items and does not include items that are out of view.
Assuming the following configuration for RadGrid:
Testing using a mobile device (e.g. Chrome in Galaxy Nexus)
Test case 1:
If I click on middle of three dots Icon, then RadGrid opens the options menu
Test case 2:
If I click a bit below of the three dots Icon, then RadGrid does a sort on the column automatically
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
if(e.CommandName == RadGrid.ExportToExcelCommandName)
{
// if there are items in edit mode, clear those
if(RadGrid1.EditIndexes.Count > 0)
{
RadGrid1.EditIndexes.Clear();
RadGrid1.Rebind();
}
// if insert item is present, cancel the insert form
if (RadGrid1.MasterTableView.IsItemInserted)
{
RadGrid1.MasterTableView.GetInsertItem().FireCommandEvent("Cancel", "");
}
}
}
We are still experiencing a problem with the RadGrid and JAWS when aria support is enabled. The JAWS form fields dialog (INS+F5) renders all elements of the grid on a single line.
Hello,
There is an issue with Classic render mode Grid when grouping is enabled. The width of the grouping is incorrect and some of the icons are wrapped on the next row.
Hello,
It would be nice to be able to clear the filter for each column as opposed to creating an external button to clear all filters. I was thinking of similar to below.
I found issue here in your forum and received an updated fix.
However, the sample fix has the grid name ("RadGrid1") hard-coded in the method "function OnClientHidden(sender, args)". In our code we need to use this for many grids; each with its own name. Please show me how to obtain the grid name generically; preferably from the arguments (sender, args).
Also in the example the checkbox isn't explicitly declared; I assume the code is using some implicit name. However, in our code the name of the checkbox is declared (see below my signature). Please show me how to change the code to use different checkbox names.
When the Grid has <HeaderContextMenu> in the Markup and there is no explicitly set RenderMode of the Grid, the Grid is rendered in Classic. It also happens if there is a reference to the ContextMenu in the code behind. Reproduction steps: <script> function f() { //code alert($find("RadGrid1")._renderMode); Sys.Application.remove_load(f); } Sys.Application.add_load(f); </script> <telerik:RadGrid ID="RadGrid1" runat="server" > <HeaderContextMenu></HeaderContextMenu> </telerik:RadGrid> Solutions: 1. Remove the HeaderContextMenu tag 2. Set the RenderMode of the Grid explicitly
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
AutoGenerateColumns
=
"true"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
>
<
ExportSettings
ExportOnlyData
=
"true"
>
<
Excel
Format
=
"Biff"
/>
</
ExportSettings
>
<
MasterTableView
Caption
=
"My Personalized caption"
CommandItemDisplay
=
"Top"
>
<
CommandItemSettings
ShowExportToExcelButton
=
"true"
/>
</
MasterTableView
>
</
telerik:RadGrid
>
protected
void
RadGrid1_NeedDataSource(
object
sender, GridNeedDataSourceEventArgs e)
{
RadGrid1.DataSource = OrdersTable();
}
private
DataTable OrdersTable()
{
DataTable dt =
new
DataTable();
dt.Columns.Add(
new
DataColumn(
"OrderID"
,
typeof
(
int
)));
dt.Columns.Add(
new
DataColumn(
"OrderDate"
,
typeof
(DateTime)));
dt.Columns.Add(
new
DataColumn(
"Freight"
,
typeof
(
decimal
)));
dt.Columns.Add(
new
DataColumn(
"ShipName"
,
typeof
(
string
)));
dt.Columns.Add(
new
DataColumn(
"ShipCountry"
,
typeof
(
string
)));
dt.PrimaryKey =
new
DataColumn[] { dt.Columns[
"OrderID"
] };
return
dt;
}
Hi
Since updating to the latest release of UI for ASP.NET AJAY the RadContextMenu of my RadGrid is misaligned at the right edge of the screen. Even in your sample https://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/context-menu/defaultcs.aspx when you open the context menu at the right side of the screen the context menu is nor aligned to the left (like it used to be).
Please ses the attached printscreen.
Kind regards
Felix
Expected: the row disappears.
Actual result: nothing happens.
The following steps create this issue: 1. Use html 4 2. Use telerik AJAX (For consistency) 3. Set a radgrid with some columns that reach beyond the extent of its element (such that it requires horizontal scrolling). Use at least four columns. One being the GridClientSelectColumn. 4. Have the following settings: Control Settings: AllowPaging=true,AllowSorting=true,AllowFiltering=true,AllowFilteringByColumn=true,AllowMultiRowSelection=true Control Events Used: NeedDataSource,OnItemDataBound Client Settings: EnablePostBackOnRowClick=false,Resizing AllowColumnResize=true, Selecting AllowRowSelect=true,UseClientSelectColumnOnly=false,Scrolling,AutoGenerateColumns=false,AllowScroll=true,UseStaticHeaders=true Important note: Retain data on the server, rebind, and, on item databound, select the previously selected rows. Set up a button to perform some action on the selected rows and have this action use AJAX such that this action depends on the currently selected rows in the RadGrid. 5. Scroll away from the selection checkboxes 6. Select some rows in your RadGrid 7. Perform your action with AJAX If all was set up correctly, your grid should have been rebound with the previously selected rows re-selected. The RadGrid should still be scrolled to its previous position. 8. Perform your action with AJAX again. Here's the bug, the grid states that it has no selected items; however, the client shows that there are items selected in the UI. This may be related to "RadGrid's last selected item index is not persisted correctly when two or more postbacks are triggered from external controls."
For keyboard users who don't have a specific Context Menu key (see https://en.wikipedia.org/wiki/Menu_key), they typically need to use the Windows standard SHIFT+F10 hotkey to trigger a contextmenu event. For example: 1. In IE, load http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/context-menu/defaultcs.aspx 2. Tab to a column header link 3. Press SHIFT+F10 (standard Windows/IE hotkey to open context menu) 4. Notice the context menu displays, however, the focus is really on the IE menubar. IE supports F10 to open the menubar, but is also seeing SHIFT+F10 too. Or 1. In FireFox, load http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/context-menu/defaultcs.aspx 2. Tab to a column header link 3. Press SHIFT+F10 (standard Windows/IE hotkey to open context menu) then press down arrow 4. Notice the context menu displays, however, the focus is really on FireFox's application system menu in the upper left. Chrome does not have this issue - it opens the grid context menu only. We need IE and FireFox to also only open the grid's context menu, and not trigger default browser behavior. According to https://yuilibrary.com/yui/docs/event/contextmenu.html, it is possible to correct this behavior by calling event.preventDefault() when SHIFT+F10 is pressed, but then trigger a synthetic contextmenu event anyway. As a workaround, we know users can press Escape to close the browser's default menu and bring focus back into the HTML document (and thus the grid's context menu), but this throws off the user experience and becomes a training issue.
Hidden columns are shown on resize when the static headers and frozen column are used. Video: https://www.screencast.com/t/4Lwuvbp7 Possible workarounds: - Hide the column with Visible="False", instead of Display="False" - Hide the column on the client-side: function gridCreated(sender, args) { var masterTableView = sender.get_masterTableView(); columnIndex = masterTableView.getColumnByUniqueName("ShipName").get_element().cellIndex; setTimeout(function () { masterTableView.hideColumn(columnIndex); }, 2); } Steps to reproduse: <telerik:RadGrid RenderMode="Lightweight" HeaderStyle-Width="200px" AutoGenerateColumns="false" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" Width="100%" runat="server"> <ClientSettings> <Scrolling AllowScroll="True" UseStaticHeaders="true" FrozenColumnsCount="2"></Scrolling> </ClientSettings> <MasterTableView AutoGenerateColumns="false"> <Columns> <telerik:GridBoundColumn DataField="SongID" HeaderText="SongID" FilterControlWidth="50px" HeaderStyle-Width="50px"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="SongTitle" HeaderText="Song Title" FilterControlWidth="200px"></telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="CollectionName" HeaderText="Collection Name" FilterControlWidth="200px"></telerik:GridBoundColumn> <telerik:GridBoundColumn FilterControlWidth="50px" DataField="VersionID" HeaderText="VersionID" Display="false"></telerik:GridBoundColumn> </Columns> </MasterTableView> </telerik:RadGrid> Code Behind: protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) { (sender as RadGrid).DataSource = GetData(); } private DataTable GetData() { DataTable dt = new DataTable(); dt.Columns.Add("SongID"); dt.Columns.Add("SongTitle"); dt.Columns.Add("CollectionName"); dt.Columns.Add("VersionID"); for (int i = 0; i < 20; i++) { dt.Rows.Add(i, i + 1, i + 2, i + 3); } return dt; }