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);
})
}
}
It would be good to add this functionality for a better customization of the Grid's newly inserted rows.
See online demo:
https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx
Steps to reproduce (seen in Chrome and Edge):
- Click the "x" on the 2nd to last record on page 1 to mark it for deletion (Click "OK" at the prompt)
- Click "Add new record" button
Observe:
- the record marked for deletion moves up by one record (but fortunately it appears the correct record will actually get deleted upon Saving)
- a blank new record is creating correctly
If you repeat this procedure but choose a different record for deletion you can see it is functioning correctly.
I am seeing the same behaviour in my own project.
Filtering with the milliseconds returns no results.
Then I remove milliseconds part "2018-09-24 18:05:21"
Filtering without that will return results.
Even with the EnableTimeIndependentFiltering property set to True, the milliseconds are not ignored, and the filtering mechanism doesn't find the records.
Hello @support!
Did you observe the behavior, that Firefox (v71.0 64bit) does not turn the rad grid into edit mode, whereas IE11, Edge, Chrome (v78) perfectly work ok on the same grid?
Clicking the edit stencil button only makes the two arrows below rotate for some seconds, but nothing happens. What could that be?
Video Demo is attached.
Thank you,
Alexander
.jpg){kind=avatar}
With no filtering applied, the filter menu still highlights the filter-function defined in the CurrentFilterFunction property of the column.
Issue #1. When the Grid is not having any records (i.e. when the grid is initialized for the first time), if we define the Detail Item Template than the item template is shown 10-11 times.
Issue#2: When we have the pagination enabled in the grid and the records are fully filled on the first page and suppose the second page is half-filled with records, then in this scenario On the second page even the records of the first page are hidden but the data item template for those rows are visible which is not correct. Screenshot is attached.
Issue #3: The same scenario is happening when we searched the grid first with 10 records and then we search for 2 records, In this case also 8 records will be removed but there data item templates will still be visible on the grid.
When using iPad touch to open the header context menu of a grid column, an immediate postback prevents the opening of the menu when the RadGrid is in Mobile RenderMode. The reason is that this action gets recognized as dragging when AllowDragToGroup is enabled.
Bug report
When I use TimePicker in GridDateTimeColumn it works fine in a normal browser but fails on mobile with the following error "Value must be 00:00 or earlier"
This works fine from Firefox, but when I use a mobile browser I get the following error "Value must be 00:00 or earlier" or "Value must be 12:00 AM or earlier".
Reproduction of the problem
Markup
<telerik:RadGrid ID="RGTimesheet" runat="server" OnNeedDataSource="RGTimesheet_NeedDataSource" RenderMode="Mobile"
AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowAutomaticDeletes="True"
Skin="MetroTouch"
Width="100%" AllowSorting="True" GroupPanelPosition="Top">
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>
</ClientSettings>
<MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Bottom" DataKeyNames="OrderID" ShowFooter="True">
<Columns>
<telerik:GridEditCommandColumn ButtonType="FontIconButton">
</telerik:GridEditCommandColumn>
<telerik:GridClientDeleteColumn ButtonType="FontIconButton">
</telerik:GridClientDeleteColumn>
<telerik:GridDateTimeColumn DataField="Start" DataType="System.TimeSpan" EditDataFormatString="hh:mm:ss tt" HeaderText="Start" SortExpression="Start" UniqueName="Start" PickerType="TimePicker">
</telerik:GridDateTimeColumn>
<telerik:GridDateTimeColumn DataField="Finish" DataType="System.TimeSpan" HeaderText="Finish" SortExpression="Finish" UniqueName="Finish" PickerType="TimePicker">
</telerik:GridDateTimeColumn>
</Columns>
<EditFormSettings>
<EditColumn UniqueName="EditCommandColumn1" ButtonType="PushButton">
</EditColumn>
</EditFormSettings>
</MasterTableView>
</telerik:RadGrid>
C# - Markup
private DataTable OrdersTable()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
dt.Columns.Add(new DataColumn("Start", typeof(TimeSpan)));
dt.Columns.Add(new DataColumn("Finish", typeof(TimeSpan)));
dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };
for (int i = 0; i < 10; i++)
{
int index = i + 1;
DataRow row = dt.NewRow();
int hours = DateTime.Now.Hour;
int minutes = DateTime.Now.Minute;
int seconds = DateTime.Now.Second;
row["OrderID"] = index;
row["Start"] = new TimeSpan(hours, minutes, seconds);
row["Finish"] = new TimeSpan(hours+index, minutes, seconds);
dt.Rows.Add(row);
}
return dt;
}
protected void RGTimesheet_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
RGTimesheet.DataSource = OrdersTable();
}
Links inside RadGrid are failing Contrast tests with ANDI tool:
<telerik:RadButton runat="server" ID="RadButton1" Text="Hide Grids with no Contrast issues" AutoPostBack="false" OnClientClicked="OnClientClicked" />
<script>
function OnClientClicked(sender, args) {
var $ = $ || $telerik.$;
var failingSkins = []
$(".RadGrid").each(function () {
var grid = $(this)
if (grid.find(".ANDI508-element-danger").length == 0) {
grid.parent().hide();
} else {
failingSkins.push(grid.parent().find(".label").text())
}
})
console.log(failingSkins)
}
</script>
<a href="javascript:void((function(){andiScript=document.createElement('script');andiScript.setAttribute('src','https://www.ssa.gov/accessibility/andi/andi.js');document.body.appendChild(andiScript)})());">Run ANDI tool</a>
<br />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server"></telerik:RadSkinManager>
<asp:Repeater runat="server" ID="Repeater1" OnItemDataBound="Repeater1_ItemDataBound">
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
<ItemTemplate>
<div class="container">
<asp:Label Text="Label1" CssClass="label" ID="Label1" runat="server" />
<telerik:RadGrid ID="RadGrid1" RenderMode="Lightweight" runat="server" AllowPaging="True" CellSpacing="0"
GridLines="None" Width="800px" PageSize="10" OnNeedDataSource="RadGrid1_NeedDataSource"
AllowSorting="true">
<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
<Columns>
<telerik:GridHyperLinkColumn DataTextField="ShipName" DataNavigateUrlFields="OrderID" DataNavigateUrlFormatString="https://google.com/search?q={0}" Target="_blank"></telerik:GridHyperLinkColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
</ItemTemplate>
</asp:Repeater>protected void Page_Load(object sender, EventArgs e)
{
Repeater1.DataSource = RadSkinManager1.GetSkinChooser().Items;
Repeater1.DataBind();
}
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
(sender as RadGrid).DataSource = Enumerable.Range(1,70).Select(x=> new { OrderID = x, ShipName = "Ship name #" + x });
}
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
var grid = e.Item.FindControl("RadGrid1") as RadGrid;
if (grid != null)
{
var skin = (e.Item.DataItem as RadComboBoxItem).Text;
grid.Skin = skin;
(e.Item.FindControl("Label1") as Label).Text=skin;
}
}
Reproduction steps:
- For RadGrid set RenderMode="Mobile" and EnableHeaderContextMenu="true"
- For Grid Column set Groupable="false"
- Try to group by the non-groupable column - http://somup.com/cYirQb6fqR
The horizontal line just above the group header:
<telerik:RadAjaxPanel runat="server" ID="panel" LoadingPanelID="RadAjaxLoadingPanel1" RenderMode="Inline" EnableAJAX="true">
<div class="row">
<asp:Button runat="server" ID="btnLoad" Text="Load Data" OnClick="btnLoad_Click" />
</div>
<telerik:RadGrid runat="server" ID="radGrid" CssClass="radgrid" Skin="Bootstrap"
ClientSettings-Scrolling-AllowScroll="true"
ClientSettings-Scrolling-ScrollHeight="800"
ClientSettings-Scrolling-UseStaticHeaders="true"
ClientSettings-EnableAlternatingItems="false"
HeaderStyle-Wrap="false" AllowPaging="true" PageSize="50"
ItemStyle-Wrap="false" AllowSorting="true"
OnNeedDataSource="radGrid_NeedDataSource" AllowMultiRowSelection="false"
HeaderStyle-BackColor="White">
<ClientSettings>
<Selecting AllowRowSelect="true" />
</ClientSettings>
<MasterTableView>
<Columns>
<telerik:GridTemplateColumn UniqueName="colEdit" AllowFiltering="false" Exportable="false">
<ItemTemplate>
<asp:LinkButton CssClass="link-button" runat="server" ID="btnEdit">Edit</asp:LinkButton>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="colDelete" AllowFiltering="false" Exportable="false">
<ItemTemplate>
<asp:LinkButton CssClass="link-button" ID="btnDelete" runat="server">Delete</asp:LinkButton>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadAjaxPanel>protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
radGrid.Visible = false;
}
}
protected void btnLoad_Click(object sender, EventArgs e)
{
radGrid.Visible = true;
radGrid.Rebind();
}
protected void radGrid_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
var grid = sender as RadGrid;
grid.DataSource = LoadData();
}
private DataTable LoadData()
{
DataTable tbl = new DataTable();
tbl.Columns.Add(new DataColumn("ADFAFD", typeof(string)));
tbl.Columns.Add(new DataColumn("ADFADFADF", typeof(string)));
tbl.Columns.Add(new DataColumn("ADFADFADFADFASDF", typeof(string)));
tbl.Columns.Add(new DataColumn("HGDH", typeof(string)));
tbl.Columns.Add(new DataColumn("ADFADF ADFADFADF", typeof(string)));
tbl.Columns.Add(new DataColumn("ADF ADSFADF", typeof(string)));
tbl.Columns.Add(new DataColumn("FKHDGJHFGJH", typeof(string)));
tbl.Columns.Add(new DataColumn("SHFSFHSGH", typeof(string)));
tbl.Columns.Add(new DataColumn("ADF ASDFASDF ASDFADSF", typeof(string)));
tbl.Rows.Add(new object[] { "ADFADF", "ASDFADFAFD", "ADFADF", "ADFADFADF ADFADFADFADF ADFADF ADFADFADF ADFADFADFADF ADFADF", "ADFADF", "ASDFADFAFD", "ADFADF", "ADFADFADF ADFADFADFADF ADFADF"});
tbl.Rows.Add(new object[] { "ADFADF", "ASDFADFAFD", "ADFADF", "ADFADFADF ADFADFADFADF ADFADF", "ADFADF", "ASDFADFAFD", "ADFADF", "ADFADFADF ADFADFADFADF ADFADF"});
return tbl;
}
Currently, the "GridButtonColumn" and "GridEditCommandColumn" columns render only ASP Buttons such as ImageButton, PushButton, LinkButton.
We would like to have the option to Choose Telerik Buttons such as RadButton, RadImageButton as ButtonType for the Columns.
<ExportSettings>
<Excel Format="Biff" DefaultCellAlignment="NotSet"/>
</ExportSettings>
Currently, using HeaderContextFilterMenu on RadGrid with client-side binding results in JavaScript error and unexpected behavior.
- JavaScript error is thrown when clicking on the "Filter" button.
- "nonValueFilters" are not being passed to filterExpressions for "isClientSideBinding" as expected, leaving IsEmpty/NotIsEmpty/IsNull/NotIsNull not propagating to the databinding phase.
Currently, the Headers are cycled by pressing the Tab key and this FeatureRequest is to improve the behavior and allow arrow navigation between headers, similar to the Kendo UI Grid:
Also, pressing Home/End should navigate to the first/last focusable cell in the row, while Ctrl+Home/Ctrl+End should navigate to the first/last focusable element in the Grid.
Set up to reproduce:
<telerik:RadGrid ID="RadGrid1" runat="server" ....>
<MasterTableView EditMode="Batch" ....>
<BatchEditingSettings HighlightDeletedRows="true" />
<Columns>
<telerik:GridBoundColumn DataField="OrderID" Display="false" UniqueName="OrderID">
</telerik:GridBoundColumn>
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
SortExpression="OrderDate" UniqueName="OrderDate">
</telerik:GridDateTimeColumn>
....
Axe Tool Accessibility
Structure for reproduction:
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid_CIPCodes" GridLines="None" runat="server" Skin="Bootstrap" role="application"
PageSize="10"
AllowPaging="true"
AutoGenerateColumns="False"
OnNeedDataSource="RadGrid_CIPCodes_NeedDataSource"
AllowSorting="true"
AllowFilteringByColumn="true"
GroupingSettings-CaseSensitive="False" FilterType="Combined"
EnableAriaSupport="true">
<MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="OrderID" HorizontalAlign="NotSet" EditMode="Batch" Caption="Master Table" AutoGenerateColumns="False"
AllowMultiColumnSorting="false"
NoMasterRecordsText="No new CIP Code(s) to add!" ShowHeadersWhenNoRecords="true">
<BatchEditingSettings EditType="Row" />
<CommandItemSettings ShowAddNewRecordButton="false" SaveChangesText="Save" CancelChangesText="Cancel" ShowRefreshButton="false" />
<SortExpressions>
<telerik:GridSortExpression FieldName="OrderID" SortOrder="Ascending" />
</SortExpressions>
<PagerStyle Mode="NextPrevAndNumeric" PageButtonCount="3" Position="Bottom" ChangePageSizeButtonToolTip="PageSizeButton" ChangePageSizeTextBoxToolTip="ChangePageSizeToolTip" />
<RowIndicatorColumn CurrentFilterFunction="Contains" FilterListOptions="VaryByDataType" Visible="False">
<HeaderStyle />
</RowIndicatorColumn>
<Columns>
<telerik:GridBoundColumn DataField="OrderID" HeaderStyle-Width="100px" HeaderText="CIP Code" SortExpression="CIP_Code" UniqueName="CIP_Code" ForceExtractValue="InEditMode"
FilterListOptions="VaryByDataType" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" ReadOnly="true" FilterControlWidth="90px">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ShipCountry" HeaderStyle-Width="210px" HeaderText="Display Text" SortExpression="Display_Text" ForceExtractValue="InEditMode" AutoPostBackOnFilter="true"
UniqueName="Display_Text" CurrentFilterFunction="Contains" ShowFilterIcon="false">
<ColumnValidationSettings EnableRequiredFieldValidation="true">
<RequiredFieldValidator ForeColor="Red" Text="*This field is required" Display="Dynamic">
</RequiredFieldValidator>
</ColumnValidationSettings>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderStyle-Width="210px" HeaderText="Value" ShowFilterIcon="false" UniqueName="Disp_Value" DataField="ShipCountry" SortExpression="Disp_Value" ForceExtractValue="InEditMode" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderStyle-Width="210px" HeaderText="Open Doors Code" UniqueName="OpenDoorsCode" DataField="ShipCountry" AllowFiltering="false" HeaderStyle-Font-Bold="true" ConvertEmptyStringToNull="true"></telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="STEM Eligible" DefaultInsertValue="" HeaderStyle-Width="100px" UniqueName="StemEligible" AllowFiltering="false" HeaderStyle-Font-Bold="true">
<ItemTemplate>
</ItemTemplate>
<EditItemTemplate>
<telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="StemEligibleDropDown">
<Items>
<telerik:DropDownListItem Text="" Value="" Selected="true" />
<telerik:DropDownListItem Text="Yes" Value="1" />
<telerik:DropDownListItem Text="No" Value="0" />
</Items>
</telerik:RadDropDownList>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridCheckBoxColumn HeaderStyle-Width="100px" HeaderText="Add to DB" HeaderTooltip="header tooltip" UniqueName="AddToDB" AllowFiltering="false" HeaderStyle-Font-Bold="true" ToolTip="Is Checked?"></telerik:GridCheckBoxColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowKeyboardNavigation="true"></ClientSettings>
<FilterMenu>
<CollapseAnimation Type="OutQuint" Duration="100" />
</FilterMenu>
</telerik:RadGrid>
Data binding
protected void RadGrid_CIPCodes_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
(sender as RadGrid).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"] };
for (int i = 0; i < 70; i++)
{
int index = i + 1;
DataRow row = dt.NewRow();
row["OrderID"] = index;
row["OrderDate"] = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0).AddHours(index);
row["Freight"] = index * 0.1 + index * 0.01;
row["ShipName"] = "Name " + index;
row["ShipCountry"] = "Country " + index;
dt.Rows.Add(row);
}
return dt;
}