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;
}

Think it'd be great (and probably pretty easy to do) to have a property on each gridcolumn for ShowFilterTextbox (similar to ShowFilterIcon). 

Right now my workaround is to hide them during ItemCreated or in styling, but it becomes messy, quickly.

When filtering for a negative number in a GridNumericColumn with a Numeric Type of "Currency" and  AutoPostBackOnFilter="true"  filter loses its negative value on Enter keypress.

Setup to reproduce:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource"
    AllowFilteringByColumn="true">
    <MasterTableView AutoGenerateColumns="False">
        <Columns>
            <telerik:GridNumericColumn DataField="Price" DataType="System.Decimal"
                FilterControlAltText="Filter Price column" HeaderText="Price"
                SortExpression="Price" UniqueName="Price" NumericType="Currency" 
                AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo">
            </telerik:GridNumericColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = Enumerable.Range(1,6).Select(x=> new { Price = Math.Pow(-1, x) * (x * 0.1 + x * 0.01) });
}

These issues can be reproduced here:

https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/mobile-and-touch-support/adaptive-behavior/defaultcs.aspx

1. Navigate to the above site on an iOS device (IPhone or IPad).

2. Touch the top right hamburger menu to open the Columns Display Form. 

3. Touch a checkbox.

The first touch over a checkbox or its corresponding label is not changing the state of the checkbox but at the same time, the header buttons are switched to Done and Cancel (as if changes have been made).

Touching between separate column fields changes the state of the checkbox of the upper column but the same is not updating the header buttons (Back button remains visible and Done and Cancel remain hidden).

Video of reproduction - http://somup.com/crX0Q80F0j.

The row selection in RadGrid is not proper if the row is deselected via the checkbox, while the Shift button is pressed.

Steps to reproduce the problem:

1. Open https://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/column-types/defaultcs.aspx
2. Select first row of the grid.
3. Press SHIFT key and click up to 4th rows.
4. Uncheck checkbox of third row while SHIFT key is pressed.
5. You can see all the rows below third row becomes deselected.
6. But the current row is still highlighted with checkbox unchecked.
   

I have a grid with several columns - so many that they cannot all appear at once. Users are allow to reorder the columns as they wish. If my grid is set to FrozencolumnsCount=0, then when they drag a column to the edge of the grid, the grid starts to horizontally scroll so that they can see additional columns and drop their column in the desired location.

However if I set FrozenColumnsCount=1, then when they drag a column to the edge of the grid, the grid does not horizontally scroll.

The submenu with filtering options has elements that overflow the sliding element:

Settings to reproduce the problem:

  <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">
            <ClientSettings>
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
            </ClientSettings>
            <MasterTableView  InsertItemDisplay="Bottom"

I've used the Telerik Themebuilder to create a css file for the grid and set up my application to use the theme.  This is working however, there are many classes that are not being output by the themebuilder.  For instance, the buttons on the pager don't work.

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"

Hi,

I have a grid with detail tables.  When the user expands an entry in the parent table, the child table data gets populated via the DetailTableDataBind event.  That's all working properly when things go right.  I'm trying to implement something to address when the detail data retrieval fails.

I've tried setting Cancelled = true in the GridDetailTableBindEventArgs parameter, but that appears to do nothing.

What's even more strange is that if I don't set the value of DetailTableView.DataSource, or I set it to nothing, the value of DetailTableView.DataSource takes on the value of the parent item datasource.  That produces an exception because the parent table doesn't have the columns specified in the detail table DataKeyNames property.  If I clear the DataKeyNames, I can prevent the exception.  But then the child grid shows the parent grid records.

The following is a sample DetailTableDataBind Event:  What can I do to either prevent the parent item from opening, show an empty child item, etc?

Protected Sub rgGrid_DetailTableDataBind(sender As Object, e As GridDetailTableDataBindEventArgs) Handles rgErrorGrid.DetailTableDataBind
        Select Case e.DetailTableView.Name
            Case "DetailTableName"
                Dim dataItem As GridDataItem = TryCast(e.DetailTableView.ParentItem, GridDataItem)
                Dim KeyVal As Integer
                Dim dt As DataTable = Nothing
 
                If Integer.TryParse(dataItem.GetDataKeyValue("ID").ToString(), KeyVal) Then
                    dt = GetDetailTable(KeyVal)
                End If
 
                If dt Is Nothing Then
                    ' What do I need to do here to either prevent the parent item from expanding, or show an empty grid...without throwing an exception?
                    e.DetailTableView.DataSource = Nothing
                    e.Canceled = True
                Else
                    e.DetailTableView.DataSource = dt
                End If
        End Select
    End Sub

Resizing a column in the Grid Leads to resizing of the Grid wrapper along with the GroupPanel. The problem can be replicated with the following Resizing settings:

<Resizing AllowColumnResize="true" AllowRowResize="true" EnableRealTimeResize="true" ResizeGridOnColumnResize="false" EnableNextColumnResize="true"/>

The issue occurs only on certain Screen sizes, or when the browser/display has some zoom applied.

When EnableAriaSupport is enabled for the RadGrid, the PagerItem receives role='presentation' and hence is ignored by the screenreaders.

Currently ExcelML format does not work when both hierarchy and grouping are used.

You would get something like

(([createddate] >= '01/08/2017,00:00:00') AND ([createddate] <= '14/08/2017,23:59:59'))

while you should get something like

(([createddate] >= '01/08/2017 00:00:00') AND ([createddate] <= '14/08/2017 23:59:59'))

so that the SQL syntax is valid.

RadGrid, does not send the FilterExpression to the SqlDataSource, however. It executes the SELECT statement and then filters the resulting data on its own. This works fine.

If you will be performing operations yourself, you could use a string operation before passing the filter expression. For example:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
	if (!string.IsNullOrEmpty(this.RadGrid1.MasterTableView.FilterExpression))
	{
		if (this.RadGrid1.MasterTableView.FilterExpression.Contains("createddate"))
		{
			this.RadGrid1.MasterTableView.FilterExpression = this.RadGrid1.MasterTableView.FilterExpression.Replace(",", " ");
		}
		DataView dv =GetData("select * from [myTable] where ", this.RadGrid1.MasterTableView.FilterExpression);
                //where you would need to have something like (([createddate] >= '01/08/2017 00:00:00') AND ([createddate] <= '14/08/2017 23:59:59'))
		this.RadGrid1.DataSource = dv;
	}
}

Note that implementing such a change may break existing code that relies on the current syntax that contains the comma.

For Bug Report :

Note: We are using MM/dd/yyyy as Internal Date format to prevent issue while inserting or updating value.

Steps to reproduce:
When we use dd-MM-yyyy and yyyy-dd-MM Date DisplayFformat for RadDatePicker/RadDateTimePicker control as well as view mode in Radgrid Batch Edit mode it's render behaviour is inconsistent
1. When dd is less than or equal to 12 then while rendering in edit mode Month and Date is interchanged
2. When dd is greather than 12 then while rendering in edit mode Month and Date is rendered correctly.

To overcome this issue you can do the following:

- For anchor links (a) implement onclick event with window.location.
- For submit buttons set UseSubmitBehavior property to false.

Provide a simple interface to showcase exactly in what order the columns have been sorted in (ex. 1, 2, 3, etc in column header) - matching the functionality in Kendo UI Grid:

http://demos.telerik.com/kendo-ui/grid/sorting

Enable filtering, Enable HeaderContextMenu and HeaderContextMenuFilter.

First, filter using the HeaderContextMenu filter (e.g. OrderDate GreaterThanOrEqualTo "someDate" AND OrderDate LessThanOrEqualTo "someOtherDate"

Second, apply a filter on another column using the Header filter only (e.g. Freight GreaterThanOrEqualTo "4")

At this point, the filtering applied by the HeaderContexFilterMenu is now partially removed.

Issue only appears when Header filter and HeaderContextMenu filter are used in combination. They work as expected when used separately.

Hello,

I have Radgrid with editable & non editable columns. I edit a row.

If I click an editable cell, it places the cursor within the editable cell. Its correct.

But if I click a readonly cell, it places the cursor in the first editable cell of the line. If the readonly cell is the last cell of the line and if I click the readonly cell, it places the cursor in the first editable cell. If the grid column width is very large, the grid is scrolled to show the first editable cell, and I loose the data which I am visualizing.

If I click in readonly cell, I want to open all the editable cells of the line, but the page should remain in same place. I don't want to place the cursor in any of the editable cells of the line. 

Example grid:
I have a simple Radgrid with batch mode and edit type row.
I have 3 columns id,name and age.
Id and name columns are editable columns. Age column is non editable column.
If I click on age column which is  non editable , the focus moves to id column, which is the first editable column.
If there many columns in my grid and if I click the last  non editable  column, the grid scrolls to first editable column, and I lose the focus of data which I am seeing.
If I click in  non editable column, I want the grid to remain in same place.

This feature can be added as an option by adding property of grid ForceFocusinEdit.
When ForceFocusinEdit= true, if we click in readonly column, focus moves to first editable column.
When ForceFocusinEdit = false, if we click in readonly column, focus is in clicked cell.

Please refer to Ticket ID: 1168296 for more informations.
Thank you